早在一年多以前，我写过一篇微信小程序-省市区县三级联动选择器的文章，那时候小程序刚起步，网上找了很久没有相关的文献，官方也没有相关的组件，我就自己动手写了一个，也因为刚开始接触写的不是很好。
当时省市区的数据我是在网上找的一个json文档，然后把里面的json数据复制出来，在js文件里写了一个方法用数组接收复制出来的json数据，外部调用这个方法就直接返回这个数组，因为json数据有几百k的占用，显然不是很符合小程序的“小”的初衷。
最近无事，研究了下云开发，我就想把数据放在云端数据库，重写一下省市区三级联动选择器。后来在查看小程序组件的时候发现，现在官方组件picker专门为我们提供了"省市区选择器"这个控件，假如单单只是需要文字形式的"省市区选择器"，大家可以选用官方的，性能方面以及简易方面应该更适合普通开发者，因为直接接入就行了，不用写内部复杂的逻辑。
图1-官方省市区选择器文档说明
<!.wxml-->
<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>
//.js
//点击确定按钮
bindRegionChange: function (e) {
console.log(e)
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
region: e.detail.value
})
}
但是我们往往不只是需要e.detail.value里面的省市区名字，可能后台只需要传code就行了。按图1bingchange的属性是有code的但是我打印e.detail.code发现是没有code的。不知道是不是我版本的问题，反正打印除了e.detail.value有值postcode和code都是没值的，那怎么办呢？没值我就自己造值，从某接口获取了一份数据，已经按省市区三维数组处理好了，我存在了云数据库里。
因为官方的"省市区选择器"mode="region"里的数组是定死的有微信提供，不能做更改，好在同是piker组件mode="multiSelector"时提供了自定义的"多列选择器"：
图2-多列选择器
本文使用的数据结构大致如下：
[
{
"citys":[
{
"areas":[
{
"code":"440303",
"name":"罗湖区"
},
{
"code":"440304",
"name":"福田区"
},
...
],
"code":"440300",
"name":"深圳市"
},
...
],
"code":"440000",
"name":"广东省"
},
...
]
属性rang对应是最外层的整个数组，range-key指定选择器上要显示的内容，这里range-key="name"就会显示中文内容，假若range-key="code"显示的就是code字段内容了就是一串数字，眼尖的朋友应该知道其实这串数字就是身份证前六位，通过它们的组合传给后台就可以定位省市区了。
言归正传动手写代码：
<!--pages/getCityData/getCityData.wxml-->
<view class="section">
<view class="section__title">多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="name">
<button class="picker">
当前选择：{{multiArray[0][multiIndex[0]].name}}({{multiArray[0][multiIndex[0]].code}}){{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name + "(" + multiArray[1][multiIndex[1]].code + ")"):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name + "(" + multiArray[2][multiIndex[2]].code + ")"):""}}
</button>
</picker>
</view>
/* pages/getCityData/getCityData.wxss */
.picker{
padding: 13px;
background-color: #FFFFFF;
}
//pages/getCityData/getCityData.json
{
"component": true,
"usingComponents": {}
}
js文件中multiArray代码显示的[省,市,区]数组，multiIndex代表滑动后定位的下标数组。从数据库获取数据后通过[0,0,0]得到初始化的multiArray，通过滑动调用bindMultiPickerColumnChange方法得到新的数组下标数组，进而得到新的数据数组。
// pages/getCityData/getCityData.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
multiArray: [],
multiIndex: [0,0,0]
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () {
this.getCityInfo()
}
},
/**
* 组件的方法列表
*/
methods: {
//获取数据库数据
getCityInfo: function(){
wx.showLoading({
title: 'Loading...',
})
const db = wx.cloud.database()
//因为数据库只存有一个总的数据字典，所以指定它的ID直接获取数据
var that = this
db.collection('cityDataArr').doc('5bdad6225f23a246bb2a97e1').get({
success: res => {
wx.hideLoading();
if (res.data){
//获取云数据库数据
var temp = res.data.data;
//初始化更新数据
that.setData({
provinces: temp,
multiArray: [temp, temp[0].citys, temp[0].citys[0].areas],
multiIndex: [0, 0, 0]
})
console.log(that.data.provinces)
}
},
fail: err => {
wx.hideLoading();
console.error(err)
}
})
},
//点击确定
bindMultiPickerChange: function (e) {
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
multiIndex: e.detail.value
})
},
//滑动
bindMultiPickerColumnChange: function(e){
console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
var data = {
multiArray: this.data.multiArray,
multiIndex: this.data.multiIndex
};
//更新滑动的第几列e.detail.column的数组下标值e.detail.value
data.multiIndex[e.detail.column] = e.detail.value;
//如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0
if (e.detail.column == 0){
data.multiIndex = [e.detail.value,0,0];
} else if (e.detail.column == 1){
//如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0
data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
} else if (e.detail.column == 2) {
//如果更新的是第三列“区”，第一列“省”和第二列“市”的值均不变。
data.multiIndex = [data.multiIndex[0], data.multiIndex[1], e.detail.value];
}
var temp = this.data.provinces;
data.multiArray[0] = temp;
if ((temp[data.multiIndex[0]].citys).length > 0){
//如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
data.multiArray[1] = temp[data.multiIndex[0]].citys;
var areaArr = (temp[data.multiIndex[0]].citys[data.multiIndex[1]]).areas;
//如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值；否则赋值为空数组
data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
}else{
//如果第二列“市”的个数不大于0，那么第二列“市”和第三列“区”都赋值为空数组
data.multiArray[1] = [];
data.multiArray[2] = [];
}
//data.multiArray = [temp, temp[data.multiIndex[0]].citys, temp[data.multiIndex[0]].citys[data.multiIndex[1]].areas];
//setData更新数据
this.setData(data);
}
}
})
注释说明都在以上代码中，至于最后怎么显示?省：multiArray[0][multiIndex[0]]，市：multiArray[1][multiIndex[1]]，区：multiArray[2][multiIndex[2]]。得到的是object的字典键值对，需要显示中文取.name，需要获取编码取.code。
<!--pages/getCityData/getCityData.wxml-->
当前选择：{{multiArray[0][multiIndex[0]].name}}({{multiArray[0][multiIndex[0]].code}}){{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name + "(" + multiArray[1][multiIndex[1]].code + ")"):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name + "(" + multiArray[2][multiIndex[2]].code + ")"):""}}
图3-最终效果
下面附上处理后的json数据cityDataArr.json，直接上传到云数据库即可。
未处理的plist文件cityDataArr.plist也一并附上 。
网友评论