城市选择器小程序实现

1.效果图

2.使用方法

#  城市选择器， 城市数据库可自己导出

##后台数据API 由HotApp小程序统计提供并维护，如果需要导出并部署在公司的生产环境，最后有SQL导出下载地址

## 使用方法

- 复制pages/district到你的项目目录

- 把样式文件district.wxss引入到您调用本插件的作用域

`@import "你的路径/district/wxParse.wxss";`

- 在需要使用的模版的x.wxml中引入模版文件wxParse.wxml

```javascript<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的数据库中

## 数据库表设计

高德地图返回的数据格式是:

```json{adcode: "220100"center: "125.3245,43.886841"citycode: "0431"districts: []level: "city"name: "长春市"}```

 数据库字段设计为:

```sqlCREATE 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的数据. 

比如: 要获取所有province级别的数据:返回格式为:

```json[{"adcode": 110000,"name": "北京市","lng": "116.40528500","lat": "39.90498900","level": "province","parent_adcode": ""},{"adcode": 120000,"name": "天津市","lng": "117.19018200","lat": "39.12559600","level": "province","parent_adcode": ""},...{"adcode": 420000,"name": "湖北省","lng": "114.29857200","lat": "30.58435500","level": "province","parent_adcode": ""},...]```

然后如果需要获取湖北省所有的city, 返回格式为:


```json[{"adcode": 420100,"name": "武汉市","lng": "114.29857200","lat": "30.58435500","level": "city","parent_adcode": "420000"},{"adcode": 420700,"name": "鄂州市","lng": "114.89059300","lat": "30.39653600","level": "city","parent_adcode": "420000"},{"adcode": 420800,"name": "荆门市","lng": "112.20425100","lat": "31.03542000","level": "city","parent_adcode": "420000"},...]```

3.代码实现

{"pages": ["pages/index/index","pages/style1/index","pages/style2/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fc8e5d","navigationBarTitleText": "城市选择器","navigationBarTextStyle": "black"},"tabBar": {"color": "#b3b3b3","selectedColor": "#fc8e5d","backgroundColor": "#f5f5f7","borderStyle": "white","list": [{"pagePath": "pages/index/index","text": "城市选择","iconPath": "images/1_4.png","selectedIconPath": "images/1_5.png"},{"pagePath": "pages/index/index","text": "占位图标","iconPath": "images/1_2.png","selectedIconPath": "images/1_3.png"}]},"sitemapLocation": "sitemap.json"
}
/*
城市选择器
*/
//app.js
var hotapp = require('util/hotapp.js');
App({onLaunch: function () {//一行代码接入HotApp小程序统//统计接入成功后 会自动统计 今日启动数 昨日启动数 今日新增用户 昨日新增用户  今日活跃 昨日活跃数 今日累计用户hotapp.init("hotapp22259962");}
})
<!-- district.wxml -->
<template name="district"><block wx:if="{{districts.showProvinces}}"><scroll-view scroll-y="true"  class='district-section-wrap'><view id="province" class='district-section'><block wx:for="{{districts.provinces}}" ><view class="district_name" data-adcode="{{item.adcode}}" data-name="{{item.name}}" bindtap="getCities">{{item.name}}<image class="district_arrow" src="../../images/1_7.png" ></image></view></block></view></scroll-view ></block><block wx:if="{{districts.showCities}}"><scroll-view scroll-y="true"  class='district-section-wrap' ><view id="city" class='district-section'><block wx:for="{{districts.cities}}"><view class="district_name" data-adcode="{{item.adcode}}" data-name="{{item.name}}" bindtap="getDistricts">{{item.name}}<image class="district_arrow" src="../../images/1_7.png" ></image></view></block></view></scroll-view > </block><block wx:if="{{districts.showDistricts}}"><scroll-view scroll-y="true"  class='district-section-wrap' ><view id="town" class='district-section'><block wx:for="{{districts.districts}}"><view class="district_name" data-adcode="{{item.adcode}}" data-name="{{item.name}}" bindtap="finish">{{item.name}}<image class="district_arrow" src="../../images/1_7.png" ></image></view></block></view></scroll-view ></block>
</template>
/**/
var host = 'https://sunjiaoshou/api/districts';
var districts = {provinces: [],cities: [],districts: [],showProvinces: false,showCities: false,showDistricts: false,selectedProvince: '',selectedCity: '',selectedDistrict: ''
};//查询
function query(parent_adcode,cb){var adcode = '';//判断parent_adcode是不是function类型if((typeof parent_adcode == "function")){cb = parent_adcode;}else{adcode = parent_adcode;}wx.request({url: host, //仅为示例，并非真实的接口地址data: {parent_adcode: adcode },header: {'content-type': 'application/json'},success: function(res) {typeof cb == "function" && cb(res.data)}})
}/*** 获取省份*/
function getProvinces(that) {query(function(data) {districts.provinces = data;if (data.length == 0) {getDistricts.showProvinces = false;} else {districts.showProvinces = true;}districts.showCities = false;districts.showDistricts = false;districts.selectedCity = '';districts.selectedDistrict = '';that.setData({districts: districts});});
}/*** 获取城市*/
function getCities(that, event) {var adcode = event.currentTarget.dataset.adcode;var provinceName = event.currentTarget.dataset.name;query(adcode, function(data) {districts.cities = data;districts.selectedProvince = provinceName;  districts.showProvinces = false;if (data.length == 0) {districts.showCities = false;} else {districts.showCities = true;}districts.selectedDistrict = '';districts.showDistricts = false;that.setData({districts: districts});});
}/*** 获取地区*/
function getDistricts(that, event) {var adcode = event.currentTarget.dataset.adcode;var cityName = event.currentTarget.dataset.name;query(adcode, function(data) {districts.districts = data;districts.selectedCity = cityName; districts.showProvinces = false;districts.showCities = false;if (data.length == 0) {districts.showDistricts = false;} else {districts.showDistricts = true;}that.setData({districts: districts});console.log(that.data);});
}/*** 选择完成*/
function finish(that, event) {districts.showProvinces = false;districts.showCities = false;districts.showDistricts = false;districts.selectedDistrict = event.currentTarget.dataset.name;that.setData({districts: districts});
}module.exports = {getProvinces: getProvinces,getCities: getCities,getDistricts: getDistricts,finish: finish
}

四、项目结构

五、代码下载

城市选择器小程序实现.zip

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/618310.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mysql dll文件的缺失和Can‘t connect to MySQL server on ‘localhost‘ (10061)

mysql dll文件的缺失和Can‘t connect to MySQL server on ‘localhost‘ (10061)

个人笔记&#xff08;整理不易&#xff0c;有帮助&#xff0c;收藏点赞评论&#xff0c;爱你们&#xff01;&#xff01;&#xff01;你的支持是我写作的动力&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔…
阅读更多...
Java-Scanner类进阶+题目

Java-Scanner类进阶+题目

Scanner进阶 接收整数数据时&#xff1a; 接收小数数据时&#xff1a; 例子&#xff1a; 可以先这样弄出scanner的框架&#xff1a; 未完待续... ...
阅读更多...
视频基础学习六——视频编码基础三（h264框架配合图文+具体抓包分析 万字）

视频基础学习六——视频编码基础三（h264框架配合图文+具体抓包分析 万字）

系列文章目录 视频基础学习一——色立体、三原色以及像素 视频基础学习二——图像深度与格式&#xff08;RGB与YUV&#xff09; 视频基础学习三——视频帧率、码率与分辨率 视频基础学习四——视频编码基础一&#xff08;冗余信息&#xff09; 视频基础学习五——视频编码基础…
阅读更多...
SSM整合----第一个SSM项目

SSM整合----第一个SSM项目

文章目录 前言一、使用步骤1.引入库2.建表3 项目结构4 web.xml的配置5 配置数据源6 SpringMVC配置7 配置MyBatis Mapper8 书写控制类 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; SSM整合是指Spring、SpringMVC和MyBatis这三个框架的整合使用。…
阅读更多...
MySQL复习

MySQL复习

in和exists的区别&#xff1f; in是内外表hash连接&#xff0c;exists是对外表做loop循环&#xff0c;每次loop后再对内表查询&#xff0c;如果外表小就用exists&#xff1b; not in和not exists前者是全表扫描&#xff0c;后者是可以走索引 锁 对于标准的插入操作&#xf…
阅读更多...
Linux —— FTP服务【从0-1】

Linux —— FTP服务【从0-1】

目录 一、介绍 1.概述 2.FTP的传输模式 PORT 主动模式 PASV 被动模式 3.FTP服务的作用 二、搭建FTP服务器 FTP服务端配置 1.安装vsftpd文件服务 2.启动服务 3.防火墙配置 4.FTP服务相关文件说明 FTP客户端配置 1.安装FTP客户端工具 lftp 2.访问FTP服务器 Linux系…
阅读更多...
Vulnhub靶机 DC-2渗透详细过程

Vulnhub靶机 DC-2渗透详细过程

VulnHub靶机 DC-2 打靶 目录 VulnHub靶机 DC-2 打靶一、将靶机导入到虚拟机当中二、攻击方式主机发现端口扫描服务探针爆破目录web渗透信息收集扫描探针登录密码爆破SSH远程登录rbash提权 一、将靶机导入到虚拟机当中 靶机地址&#xff1a; https://www.vulnhub.com/entry/dc…
阅读更多...
196算法之谜在 JSP 中使用内置对象 request 获取 form 表单的文本框 text 提交的数据。

196算法之谜在 JSP 中使用内置对象 request 获取 form 表单的文本框 text 提交的数据。

(1&#xff09;编写 inputNumber . jsp &#xff0c;该页面提供一个 form 表单&#xff0c;该 form 表单提供一个文本框 text &#xff0c;用于用户输入一个正整数&#xff0c;用户在 form 表单中输入的数字&#xff0c;单击 submit 提交键将正整数提交给 huiwenNumber . jsp 页…
阅读更多...
【300套】基于Springboot+Vue的Java毕业设计项目(附源码+演示视频+LW)

【300套】基于Springboot+Vue的Java毕业设计项目(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f9e1;今天给大家分享300的Java毕业设计&#xff0c;基于Springbootvue框架&#xff0c;这些项目都经过精心挑选&#xff0c;涵盖了不同的实战主题和用例&#xff0c;可做毕业…
阅读更多...
Claude3和GPT4哪个强？

Claude3和GPT4哪个强？

在短短两个月内&#xff0c;全球最强人工智能的桂冠再次易主。此前&#xff0c;Claude3 Opus以其卓越的表现超越了GPT-4&#xff0c;吸引了无数用户抛弃GPT&#xff0c;转而拥抱Claude3。然而&#xff0c;OpenAI近日强势回归&#xff0c;用实力证明了GPT依然是人工智能领域的霸…
阅读更多...
rocketmq面试

rocketmq面试

broker主从复制机制 同步复制&#xff1a; 等Master和Slave均写成功后&#xff0c;才反馈给客户端写成功状态&#xff1b; 如果Master出故障&#xff0c; Slave上有全部的备份数据&#xff0c;容易恢复&#xff0c;但是同步复制会增大数据写入延迟&#xff0c;降低系统吞吐量。…
阅读更多...
工作流引擎数据库表UML图

工作流引擎数据库表UML图

RepositoryService RepositoryService DeploymentQuery&#xff1a; 用于查询部署信息。 ProcessDefinitionQuery&#xff1a; 用于查询流程定义信息。 流程定义与部署 流程关联表 RuntimeService &#xff1a; RuntimeService ExecutionQuery&#xff1a; 用于查询执行实例…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023