微信小程序-hotCity城市选择器
城市选择是很多小程序开发的必备功能
我们自己做了个小程序的城市选择组件，带后台，后台可把sql 导出来。
后台数据API 由HotApp小程序统计提供并维护，如果需要导出并部署在公司的生产环境，最后有SQL导出下载地址
使用方法：
- 复制pages/district到你的项目目录
- 把样式文件district.wxss引入到您调用本插件的作用域 @import \”你的路径/district/wxParse.wxss\”;
- 在需要使用的模版的x.wxml中引入模版文件wxParse.wxml
- <import src=\”../district/district.wxml\”/>
- <template is=\”district\” data=\”{{districts}}\” />
- 在对应的js中引入district.js文件 var WxParse = require(\’你的路径/district/district.js\’);
- 使用: 在你的js文件中, 必须要绑定四个事件:
- getProvinces、getCities、getDistricts和finish
- 其中
- getProvinces事件需要调用districts.getProvinces(this);
- getCities事件需要调用districts.getCities(this, event);
- getDistricts事件需要调用districts.getDistricts(this, event);
- finish事件需要调用districts.finish(this, event);
复制代码
数据来源
数据来源于高德地图, 从高德地图的行政区划查询中找到了api请求地址, 然后再写脚本把高德所有的数据全部导入到hotapp的数据库中
数据库表设计
高德地图返回的数据格式是:
- {
- adcode: \”220100\”
- center: \”125.3245,43.886841\”
- citycode: \”0431\”
- districts: []
- level: \”city\”
- name: \”长春市\”
- }
复制代码
稍微改造了一下, 数据库字段设计为：
- CREATE TABLE `tbl_districts` (
- `adcode` char(6) COLLATE utf8_unicode_ci NOT NULL,
- `name` varchar(20) COLLATE utf8_unicode_ci NOT NULL,
- `lng` decimal(12,8) unsigned NOT NULL,
- `lat` decimal(12,8) unsigned NOT NULL,
- `level` varchar(10) COLLATE utf8_unicode_ci NOT NULL,
- `parent_adcode` char(6) COLLATE utf8_unicode_ci NOT NULL,
- `created_at` timestamp NULL DEFAULT NULL,
- `updated_at` timestamp NULL DEFAULT NULL,
- PRIMARY KEY (`adcode`),
- KEY `tbl_districts_parent_adcode_index` (`parent_adcode`)
- ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
- 其中, lng表示经度, lat表示纬度, level有\”province\”、\”city\”和\”district\”三种类型
复制代码
接口使用方法
一共就一个接口: GET /districts, 如果不带参数, 表示获取的是所有province级别的数据, 如果带上参数parent_adcode, 表示获取指定的parent_adcode的数据
https://github.com/hotapp888/hotcity
