用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-12-2 14:15:29 yaoohfox原创达人 优秀会员纪念 HotApp小程序统计 楼主 55623
城市选择是很多小程序开发的必备功能
我们自己做了个小程序的城市选择组件,带后台,后台可把sql 导出来。
城市放在服务器端,微信小程序本地最大1M,城市存本地,严重影响包大小


城市选择首页(动画).gif


应用截图
样式一 通过导航实现三级选择
样式二 三级联动
后台数据API 由HotApp小程序统计提供并维护,如果需要导出并部署在公司的生产环境,最后有SQL导出下载地址

使用方法



[AppleScript] 纯文本查看 复制代码
复制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的数据库中

数据库表设计



高德地图返回的数据格式是:
[AppleScript] 纯文本查看 复制代码
{
    adcode: "220100"
    center: "125.3245,43.886841"
    citycode: "0431"
    districts: []
    level: "city"
    name: "长春市"
}


我稍微改造了一下, 数据库字段设计为:


[AppleScript] 纯文本查看 复制代码
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

项目下载: hotcity-master.zip (255.07 KB, 下载次数: 27)

评分

参与人数 3原创 +1 浮云 +25 收起 理由
赤龙 + 5 赞一个!
天下雪 + 1 + 10 赞一个!
笑若天河 + 10 这个很给力。

查看全部评分

这个确实很给力,可以直接用在项目中。感谢大牛分享。
666,先做个记录。谢谢
这个可以的,给学习者一个特别好的参考,感谢分享
2016-12-8 16:04:52 xiaobin 架构狮
5#
这个牛
大佬怎样获取api啊
发新帖
    您需要登录后才可以回帖 登录 | 立即注册