微信小程序雲開發之地址（省市區）選擇器

爲了用戶的便利，開發者們往往要投入更多的精力去完成一個功能。明明可以用輸入框，所麼簡單，可非要去選擇選擇器，多麼便利。爲用戶提供了便利，提高用戶體驗。

今天的主題就是地址選擇器！

當然，這個還是用組件開發會比較快一點。小程序開發我一直都在用Vant組件，使用這個你的界面會容易很多實現。

如果你還沒安裝Vant，可以去官網查看安裝，上面有安裝命令。很簡單。

安裝完Vant，接下來我們就來完成地區選擇器吧。

完成步驟：

1. 配置路徑
2. 下載地區數據集
3. 編寫代碼
4. 實現

一、配置路徑

安裝完Vant，首先要在app.json中引入該模塊。該功能需要的模塊是area，因爲我們還要做彈窗，所以還要引入彈出層popup。

"usingComponents": {
  "van-popup": "@vant/weapp/popup/index",    //修改自己的組件路徑
  "van-area": "@vant/weapp/area/index"
}

二、下載地址數據集

因爲選擇地址這種東西你不可能自己一個個把地址全部列出來，這是不現實的事情，如果你真有那個本事，當然你可以自己列出來，列出來之後用Picker選擇器自己完成。

我們這裏講的是area地區選擇器。
這裏可以選擇省市區、也可以選擇省市，當然還有其他樣式。我們這裏只講一種省市的選擇，其他你就自己明白啦

下載數據集地址，你需要把這個area.js文件下載下來。

放進你的項目裏面，隨便一個地方都行。

三、編寫代碼

wxml:

<van-cell title="地址" is-link bind:click="showPopup" />
<van-popup 
show="{{ show }}" 
bind:close="onClose"
position="bottom"
custom-style="height: 50%;">
<van-area bind:confirm="onConfirm" bind:cancel="onCancel" area-list="{{ areaList }}" columns-num="{{ 2 }}" title="省市" />
</van-popup>

js:

import province_list from './area'; //導入地址數據集，根據你所存放的位置寫路徑

data: {
        show: false,
    },


onLoad(){
   this.setData({
     areaList:province_list
   })
 },

onClose() {
        this.setData({ show: false });
      },
    onConfirm(event) {
        console.log(event.detail.values[0].name)
        console.log(event.detail.values[1].name)
        this.setData({
          show:false
        })
      },
    
      onCancel() {
        this.setData({ show: false });
      },

四、實現

幾個簡單的步驟就輕鬆完成了地址的選擇。

如果有問題，可以下面留言，看到之後第一時間回覆。