城市选择是很多小程序开发的必备功能
我们自己做了个小程序的城市选择组件,带后台,后台可把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