早在一年多以前，我寫過一篇微信小程序-省市區(qū)縣三級聯(lián)動選擇器的文章稠肘，那時候小程序剛起步福铅，網(wǎng)上找了很久沒有相關的文獻，官方也沒有相關的組件项阴，我就自己動手寫了一個滑黔，也因為剛開始接觸寫的不是很好。
當時省市區(qū)的數(shù)據(jù)我是在網(wǎng)上找的一個json文檔，然后把里面的json數(shù)據(jù)復制出來略荡，在js文件里寫了一個方法用數(shù)組接收復制出來的json數(shù)據(jù)色查，外部調(diào)用這個方法就直接返回這個數(shù)組，因為json數(shù)據(jù)有幾百k的占用撞芍，顯然不是很符合小程序的“小”的初衷。
最近無事跨扮，研究了下云開發(fā)序无，我就想把數(shù)據(jù)放在云端數(shù)據(jù)庫，重寫一下省市區(qū)三級聯(lián)動選擇器衡创。后來在查看小程序組件的時候發(fā)現(xiàn)帝嗡，現(xiàn)在官方組件picker專門為我們提供了"省市區(qū)選擇器"這個控件，假如單單只是需要文字形式的"省市區(qū)選擇器"璃氢，大家可以選用官方的哟玷，性能方面以及簡易方面應該更適合普通開發(fā)者，因為直接接入就行了一也，不用寫內(nèi)部復雜的邏輯巢寡。
<!.wxml-->
<view class="section">
<view class="section__title">省市區(qū)選擇器</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發(fā)送選擇改變抑月，攜帶值為', e.detail.value)
this.setData({
region: e.detail.value
})
}
但是我們往往不只是需要e.detail.value里面的省市區(qū)名字，可能后臺只需要傳code就行了舆蝴。按圖1bingchange的屬性是有code的但是我打印e.detail.code發(fā)現(xiàn)是沒有code的谦絮。不知道是不是我版本的問題，反正打印除了e.detail.value有值postcode和code都是沒值的洁仗，那怎么辦呢层皱？沒值我就自己造值，從某接口獲取了一份數(shù)據(jù)赠潦，已經(jīng)按省市區(qū)三維數(shù)組處理好了叫胖，我存在了云數(shù)據(jù)庫里。
因為官方的"省市區(qū)選擇器"mode="region"里的數(shù)組是定死的由微信提供她奥，不能做更改臭家，好在同是piker組件mode="multiSelector"時提供了自定義的"多列選擇器"：
本文使用的數(shù)據(jù)結構大致如下：
[
{
"citys":[
{
"areas":[
{
"code":"440303",
"name":"羅湖區(qū)"
},
{
"code":"440304",
"name":"福田區(qū)"
},
...
],
"code":"440300",
"name":"深圳市"
},
...
],
"code":"440000",
"name":"廣東省"
},
...
]
屬性rang對應是最外層的整個數(shù)組，range-key指定選擇器上要顯示的內(nèi)容方淤，這里range-key="name"就會顯示中文內(nèi)容钉赁，假若range-key="code"顯示的就是code字段內(nèi)容了就是一串數(shù)字，眼尖的朋友應該知道其實這串數(shù)字就是身份證前六位携茂，通過它們的組合傳給后臺就可以定位省市區(qū)了你踩。
言歸正傳動手寫代碼：
<!--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代表顯示的[省,市,區(qū)]數(shù)組带膜，multiIndex代表滑動后定位的下標數(shù)組吩谦。從數(shù)據(jù)庫獲取數(shù)據(jù)后通過[0,0,0]得到初始化的multiArray，通過滑動調(diào)用bindMultiPickerColumnChange方法得到新的數(shù)組下標數(shù)組膝藕，進而得到新的數(shù)據(jù)數(shù)組式廷。
// pages/getCityData/getCityData.js
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
multiArray: [],
multiIndex: [0,0,0]
},
lifetimes: {
// 生命周期函數(shù)，可以為函數(shù)芭挽，或一個在methods段中定義的方法名
attached: function () {
this.getCityInfo()
}
},
/**
* 組件的方法列表
*/
methods: {
//獲取數(shù)據(jù)庫數(shù)據(jù)
getCityInfo: function(){
wx.showLoading({
title: 'Loading...',
})
const db = wx.cloud.database()
//因為數(shù)據(jù)庫只存有一個總的數(shù)據(jù)字典滑废，所以指定它的ID直接獲取數(shù)據(jù)
var that = this
db.collection('cityDataArr').doc('5bdad6225f23a246bb2a97e1').get({
success: res => {
wx.hideLoading();
if (res.data){
//獲取云數(shù)據(jù)庫數(shù)據(jù)
var temp = res.data.data;
//初始化更新數(shù)據(jù)
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發(fā)送選擇改變，攜帶值為', 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的數(shù)組下標值e.detail.value
data.multiIndex[e.detail.column] = e.detail.value;
//如果更新的是第一列“省”蠕趁，第二列“市”和第三列“區(qū)”的數(shù)組下標置為0
if (e.detail.column == 0){
data.multiIndex = [e.detail.value,0,0];
} else if (e.detail.column == 1){
//如果更新的是第二列“市”，第一列“省”的下標不變辛馆，第三列“區(qū)”的數(shù)組下標置為0
data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
} else if (e.detail.column == 2) {
//如果更新的是第三列“區(qū)”俺陋，第一列“省”和第二列“市”的值均不變。
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){
//如果第二列“市”的個數(shù)大于0,通過multiIndex變更multiArray[1]的值
data.multiArray[1] = temp[data.multiIndex[0]].citys;
var areaArr = (temp[data.multiIndex[0]].citys[data.multiIndex[1]]).areas;
//如果第三列“區(qū)”的個數(shù)大于0,通過multiIndex變更multiArray[2]的值昙篙；否則賦值為空數(shù)組
data.multiArray[2] = areaArr.length > 0 ? areaArr : [];
}else{
//如果第二列“市”的個數(shù)不大于0腊状，那么第二列“市”和第三列“區(qū)”都賦值為空數(shù)組
data.multiArray[1] = [];
data.multiArray[2] = [];
}
//data.multiArray = [temp, temp[data.multiIndex[0]].citys, temp[data.multiIndex[0]].citys[data.multiIndex[1]].areas];
//setData更新數(shù)據(jù)
this.setData(data);
}
}
})
注釋說明都在以上代碼中，至于最后怎么顯示?侍伞：multiArray[0][multiIndex[0]]寿酌，市：multiArray[1][multiIndex[1]]，區(qū)：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 + ")"):""}}
下面附上處理后的json數(shù)據(jù)cityDataArr.json埃仪，直接上傳到云數(shù)據(jù)庫即可乙濒。
未處理的plist文件cityDataArr.plist也一并附上 。
