欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
微信小程序-hotCity城市选择器微信小程序-hotCity城市选择器
立即下载

微信小程序-hotCity城市选择器

模板分类 : 小程序模板 模板编号 : Y134 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 14:37 模板等级 : ☆☆☆☆☆

模板截图:

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

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。