小程序开发--地区选择四级联动（选择省,市,县,镇）

前端时间接到一个项目，里面有涉及到地区选择四级联动（即能选择到镇）。自己去网上收罗了一波，也没发现有很详细的，所以就自己来写，写完总结一下。

首先地址选择小程序有自带一个组件，我们就先来看看这个组件：picker组件。

小程序官方用法：

html:

<view class="section">

<view class="section__title">省市区选择器</view>

<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">

<view class="picker">

当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}

</view>

</picker>

</view>

data : {

region: ['广东省', '广州市', '海珠区'],

customItem: '全部',

}

用了以后我们看到，只有三级联动，无奈甲方他不予许呀，一定要是四级联动。

所以我们还是老老实实得写四级联动。

准备工作，首先我们得有一个json文件，包含了中国省，市、县，镇。

我在网上找了一波，终于找到一位大佬爬出来的（重点是免费的，找了好多都要收什么费用）这是大佬的github地址

我用的是下面的这个：

这个我们只是测试，所以我就用vs code 开一个php服务器，把json文件放到服务器里面，通过掉接口的形式来调用。

然后开启php服务。然后在当前文件夹下开启php服务（vs code 安装运行php环境才能跑起来）

然后我们回到小程序，先调我们本地接口，看看接口是否通：

getSiteData: function() {

var that = this;

wx.request({

url: 'http://localhost:3000/index.php', // 这是我们本地的地址

success: res=> {

console.log(res); // 输出接口的回调

}

})

}

ok，现在数据返回成功了。

我们开始写联动部分

还是picker组件，利用其多列选择器 mode = multiSelector。先看看官方使用：

<view class="section"><view class="section__title">多列选择器</view><pickermode="multiSelector"bindchange="bindMultiPickerChange"bindcolumnchange="bindMultiPickerColumnChange"value="{{multiIndex}}"range="{{multiArray}}"><view class="picker">当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view></picker>
</view>

data: {array: ['美国', '中国', '巴西', '日本'],objectArray: [{id: 0,name: '美国'},{id: 1,name: '中国'},{id: 2,name: '巴西'},{id: 3,name: '日本'}],index: 0,multiArray: [['无脊柱动物', '脊柱动物'], ['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'], ['猪肉绦虫', '吸血虫']],objectMultiArray: [[{id: 0,name: '无脊柱动物'},{id: 1,name: '脊柱动物'}], [{id: 0,name: '扁性动物'},{id: 1,name: '线形动物'},{id: 2,name: '环节动物'},{id: 3,name: '软体动物'},{id: 3,name: '节肢动物'}], [{id: 0,name: '猪肉绦虫'},{id: 1,name: '吸血虫'}]],multiIndex: [0, 0, 0],date: '2016-09-01',time: '12:01',region: ['广东省', '广州市', '海珠区'],customItem: '全部'},

里面的属性值 range接受一个数组，数组里面包含数组，数组长度就是多少列，我们是四级联动，所以我们就需要按这样的格式来赋值[[省数组],[市数组],[县数组],[镇数组]]。

根据我们的接口回调数据结构，我们就写了一串获取省市县镇的js代码

getSiteData: function() {var that = this;wx.request({url: 'http://localhost:3000/index.php',success: res=> {console.log(res);var chinaData = res.data;this.data.chinaData = chinaData;var sheng = []; //  设置省数组for(var i = 0; i < chinaData.length; i++) {sheng.push(chinaData[i].name);}this.setData({"multiArray[0]": sheng})that.getCity(); // 得到市}})},getCity: function() { //  得到市var shengNum = this.data.multiIndex[0];var chinaData = this.data.chinaData;var cityData = chinaData[shengNum].children;var city = [];for (var i = 0; i < cityData.length; i++) {city.push(cityData[i].name)}this.setData({"multiArray[1]": city})this.getXian();},getXian: function(e) { //  得到县var shengNum = this.data.multiIndex[0];var cityNum = this.data.multiIndex[1];var chinaData = this.data.chinaData;var xianData = chinaData[shengNum].children[cityNum].children;var xian = [];for (var i = 0; i < xianData.length; i++) {xian.push(xianData[i].name)}this.setData({"multiArray[2]": xian})this.getZhen();},getZhen: function() { //  得到镇var shengNum = this.data.multiIndex[0];var cityNum = this.data.multiIndex[1];var xianNum = this.data.multiIndex[2];var chinaData = this.data.chinaData;var zhenData = chinaData[shengNum].children[cityNum].children[xianNum].children;var zhen = [];for (var i = 0; i < zhenData.length; i++) {zhen.push(zhenData[i].name)}this.setData({"multiArray[3]" : zhen})}

下面就是所有的代码：

wxml代码

<view class='site'><view class="section"><view class="section__title">省市区选择器</view><picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}"><view class="picker">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view></picker></view><view class="section"><view class="section__title">多列选择器</view><picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"><view class="picker" style='font-size:24rpx'>当前选择：{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}，{{multiArray[3][multiIndex[3]]}}</view></picker></view>
</view>

js代码：

// pages/demo/site/site.js
Page({/*** 页面的初始数据*/data: {region: ['广东省', '广州市', '海珠区'],customItem: '全部',multiArray: [],multiIndex: [0, 0, 0, 0],chinaData: []},bindDateChange(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({date: e.detail.value})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.getSiteData();},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},bindMultiPickerChange: function(e) {console.log(e);},bindMultiPickerColumnChange: function(e) {var move = e.detail;var index = move.column;var value = move.value;if (index == 0) {this.setData({multiIndex: [value,0,0,0]})this.getCity();}if (index == 1) {this.setData({"multiIndex[1]": value,"multiIndex[2]": 0,"multiIndex[3]": 0})this.getXian();}if (index == 2) {this.setData({"multiIndex[2]": value,"multiIndex[3]": 0,})this.getZhen();}if (index == 3) {this.setData({"multiIndex[3]": value})this.getZhen();}},getSiteData: function() {var that = this;wx.request({url: 'http://localhost:3000/index.php',success: res=> {console.log(res);var chinaData = res.data;this.data.chinaData = chinaData;var sheng = []; //  设置省数组for(var i = 0; i < chinaData.length; i++) {sheng.push(chinaData[i].name);}this.setData({"multiArray[0]": sheng})that.getCity(); // 得到市}})},getCity: function() { //  得到市var shengNum = this.data.multiIndex[0];var chinaData = this.data.chinaData;var cityData = chinaData[shengNum].children;var city = [];for (var i = 0; i < cityData.length; i++) {city.push(cityData[i].name)}this.setData({"multiArray[1]": city})this.getXian();},getXian: function(e) { //  得到县var shengNum = this.data.multiIndex[0];var cityNum = this.data.multiIndex[1];var chinaData = this.data.chinaData;var xianData = chinaData[shengNum].children[cityNum].children;var xian = [];for (var i = 0; i < xianData.length; i++) {xian.push(xianData[i].name)}this.setData({"multiArray[2]": xian})this.getZhen();},getZhen: function() { //  得到镇var shengNum = this.data.multiIndex[0];var cityNum = this.data.multiIndex[1];var xianNum = this.data.multiIndex[2];var chinaData = this.data.chinaData;var zhenData = chinaData[shengNum].children[cityNum].children[xianNum].children;var zhen = [];for (var i = 0; i < zhenData.length; i++) {zhen.push(zhenData[i].name)}this.setData({"multiArray[3]" : zhen})}
})

真尴尬，现在才发现这个插入代码功能。

（测试本地接口记得小程序开发工具打开不校验合法域名，这样才能调接口成功。如果有什么问题，记得及时联系我哦）

下面附上GitHub代码地址：

点击去gitHub查看代码

小程序开发--地区选择四级联动（选择省,市,县,镇）相关推荐

微信小程序开发案例2---省市区信息选择
在之前的案例1中小编教授了大家如何做一个微信小程序版的简易计算器,并实现其相应功能,同样这次小编将延续案例一中的风格,继续非常详细的一步一步的带小伙伴们亲手调试和开发编程. 下面我将教大家如何开发自己 ...
选择产品套餐自动生成报价小程序开发制作
选择产品套餐自动生成报价小程序开发制作按照客户需求选择广告服务套餐自动生成报价小程序开发制作具体的功能: 1.选择套餐后,显示固定内容供选择: 2.产品的选择上有金额限制和部分服务多选少的限制,需要 ...
小程序开发合同_小程序开发公司在哪里找？
红匣子科技,建议大家可以从北上广深这些城市入手,毕竟一线城市人才多的同时,开发公司也多,所以可选择的开发公司比较多,适合自己的开发公司也比较多,不会像二.三城市可能选择会比较单一,可能该公司技术强,但 ...
小程序开发代码_企业为什么要选择小程序定制开发？
随着小程序红利的爆发,越来越多的商家投身小程序的浪潮中,而现在微信小程序的制作方式有两种,一种是模板小程序开发,另一种是定制小程序开发.随着市场竞争激烈程度的升级和商家开发的个性需求,很多商家更多的是 ...
小程序开发之各种弹出框选择框汇总
小程序开发过程中,很多地方为了便利我们多采用小程序自带弹出框来实现交互效果.这也够大多数开发使用,下面我给大家详细介绍下小程序弹出框官方api传送门:https://developers.weixi ...
微信小程序开发语言的选择
微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...
微信开发者工具无法选择预览和真机调试_小程序开发第二篇：使用微信小程序开发者工具、wepy框架初始化项目...
1.微信小程序开发者工具使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可小程序框架开发:首选官方提供类vue.js开发框架 wepy.js ,备选 mpVue.我们选择的是 wepy ...
微信小程序开发一定要服务器么，该怎么选择小程序服务器？
因为微信用户群体广,微信小程序自从上线以来就受到用户的青睐,很多商家看准商机开始部署自己的微信小程序平台,且占据了很大的市场份额,尤其是微信小游戏和微信购物类商城很少火爆.但是很多人们对微信小程序开发 ...
小程序开发工具_有哪些好用的微信小程序开发工具？如何选择？
小程序对商家和个人的帮助很大,可以为商家导入新的线上流量.那么该如何拥有自己的小程序呢?如果你想自己制作小程序的话,目前有两种方式,一种是使用"微信开发者工具",需要精通代码编程, ...

小程序开发--地区选择四级联动（选择省,市,县,镇）

小程序开发--地区选择四级联动（选择省,市,县,镇）相关推荐

最新文章

热门文章