早在一年多以前，我寫過一篇微信小程序-省市區(qū)縣三級聯(lián)動選擇器的文章，那時候小程序剛起步，網(wǎng)上找了很久沒有相關(guān)的文獻，官方也沒有相關(guān)的組件，我就自己動手寫了一個，也因為剛開始接觸寫的不是很好。

當(dāng)時省市區(qū)的數(shù)據(jù)我是在網(wǎng)上找的一個json文檔，然后把里面的json數(shù)據(jù)復(fù)制出來，在js文件里寫了一個方法用數(shù)組接收復(fù)制出來的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ū)選擇器"，大家可以選用官方的，性能方面以及簡易方面應(yīng)該更適合普通開發(fā)者，因為直接接入就行了，不用寫內(nèi)部復(fù)雜的邏輯。

圖1-官方省市區(qū)選擇器文檔說明

省市區(qū)選擇器

當(dāng)前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}

//.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"時提供了自定義的"多列選擇器"：

圖2-多列選擇器

本文使用的數(shù)據(jù)結(jié)構(gòu)大致如下：

[

{

"citys":[

{

"areas":[

{

"code":"440303",

"name":"羅湖區(qū)"

},

{

"code":"440304",

"name":"福田區(qū)"

},

...

],

"code":"440300",

"name":"深圳市"

},

...

],

"code":"440000",

"name":"廣東省"

},

...

]

屬性rang對應(yīng)是最外層的整個數(shù)組，range-key指定選擇器上要顯示的內(nèi)容，這里range-key="name"就會顯示中文內(nèi)容，假若range-key="code"顯示的就是code字段內(nèi)容了就是一串?dāng)?shù)字，眼尖的朋友應(yīng)該知道其實這串?dāng)?shù)字就是身份證前六位，通過它們的組合傳給后臺就可以定位省市區(qū)了。

言歸正傳動手寫代碼：

多列選擇器

當(dāng)前選擇：{{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 + ")"):""}}

/* pages/getCityData/getCityData.wxss */

.picker{

padding: 13px;

background-color: #FFFFFF;

}

//pages/getCityData/getCityData.json

{

"component": true,

"usingComponents": {}

}

js文件中multiArray代表顯示的[省,市,區(qū)]數(shù)組，multiIndex代表滑動后定位的下標(biāo)數(shù)組。從數(shù)據(jù)庫獲取數(shù)據(jù)后通過[0,0,0]得到初始化的multiArray，通過滑動調(diào)用bindMultiPickerColumnChange方法得到新的數(shù)組下標(biāo)數(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ù)組下標(biāo)值e.detail.value

data.multiIndex[e.detail.column] = e.detail.value;

//如果更新的是第一列“省”，第二列“市”和第三列“區(qū)”的數(shù)組下標(biāo)置為0

if (e.detail.column == 0){

data.multiIndex = [e.detail.value,0,0];

} else if (e.detail.column == 1){

//如果更新的是第二列“市”，第一列“省”的下標(biāo)不變，第三列“區(qū)”的數(shù)組下標(biāo)置為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。

當(dāng)前選擇：{{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數(shù)據(jù)cityDataArr.json，直接上傳到云數(shù)據(jù)庫即可。

未處理的plist文件cityDataArr.plist也一并附上 。

總結(jié)

以上是生活随笔為你收集整理的range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。