微信小程序省市區選擇器的詳細闡述

一、微信小程序城市區縣選擇

微信小程序提供了城市區縣選擇組件，是對於用戶選擇地址時的一種簡單方便的解決方案。在使用之前，需要在頁面的.json文件中進行組件的註冊。

"usingComponents":{
    "van-area":"../../components/vant/area/area"
}

而在對城市區縣選擇器的使用中，要在.wxml文件中創建一個組件標籤，用於後續與JS代碼進行交互。同時，也可以根據官方文檔中提供的API方法，定製自己想要的功能，比如自定義模板，定製顏色。

在JS文件中，需要對組件進行初始化並且提供一些函數供用戶實現交互效果。初始化時，需要提供相關參數並且聲明每個參數所對應的含義，同時，還需要在函數中實現邏輯交互，對用戶的選擇進行處理，並對頁面進行渲染。

data: {
    areaValue: [],
    show: false,
    title: "",
},
onConfirm(event) {
    console.log(event.detail.values);
    this.setData({
        areaValue: event.detail.values,
        show: false,
        title: "",
    });
},
onCancel() {
    this.setData({
        show: false,
        title: "",
    });
},
onChange(event) {
    console.log(event.detail);
},
onDetailToggle(event) {
    console.log(event.detail);
},
onHide() {
    console.log("onHide");
},
showAreaPopup() {
    this.setData({ show: true, title: "城市區縣選擇" });
},

二、微信小程序省市區街道選擇

微信小程序省市區街道選擇器是微信官方提供的一個組件，同樣需要在頁面.wxml文件中進行註冊並創建組件標籤。在使用之前，需要對組件提供一些參數的配置，比如顯示方式，高亮顏色等等。

    
        
            {{region[value].label}}
            
        
    

對於使用該組件的開發人員而言，需要實現在頁面中聲明一個數組用於存儲省市區信息，並且在需要使用到該組件的地方，調用相關函數對省市區信息進行處理並將信息渲染到頁面中。

data: {
    value: [],
    region: [],
    mode: "region",
},
onChange(event) {
    console.log(event.detail);
    this.setData({ value: event.detail.value });
},
onLoad() {
    const that = this;
    wx.request({
        url: "http://japi.zto.cn/region",
        data: {
            messageType: "province",
            companyId: "3",
        },
        header: {
            "content-type": "application/json", // 默認值
        },
        success(res) {
            console.log(res.data);
            const tmp = [];
            for (let i = 0; i < res.data.result.length; i++) {
                tmp.push({
                    label: res.data.result[i].regionName,
                    value: res.data.result[i].regionCode,
                    children: [],
                });
            }
            console.log(tmp);
            that.setData({ region: tmp });
        },
    });
},

三、小程序省市區選擇器

小程序省市區選擇器是對於微信小程序城市區縣選擇器和微信小程序省市區街道選擇器的完美結合，提供了更為便利和完善的地址選擇方案。在使用該組件前，同樣需要在頁面.json文件中進行註冊，同時，在.wxml文件中創建組件標籤，並指定組件應該承擔的功能。

    
        
            
                
                    
                        {{areaShow}}
                    
                    
                
            
        
    

對於該組件的使用，同樣需要提供一些參數進行初始化，並在交互期間進行數據處理，對結果進行渲染。可以通過該組件，實現對於用戶的地址選擇方案的完善。

data: {
    areaShow: "省市區選擇器",
    areaCodeArr: [0, 0, 0],
    areaList: [],
},
onLoad: function (options) {
    this.getProvinces()
        .then((res) => {
            this.areaList.push(res);
            return this.getCities(res[0].code);
        })
        .then((res) => {
            this.areaList.push(res);
            return this.getDistricts(res[0].code);
        })
        .then((res) => {
            this.areaList.push(res);
            this.getAreaShow();
        });
},
columnChange: function (e) {
    if (e.detail.column === 0) {
        let code = this.areaList[e.detail.column][e.detail.value].code;
        this.getCities(code).then(
            (res) => {
                this.areaList[1] = res;
                let code = this.areaList[e.detail.column][0].code;
                this.getDistricts(code).then((res) => {
                    this.areaList[2] = res;
                    this.getAreaShow(0);
                });
            },
            (err) => console.log(err)
        );
    } else if (e.detail.column === 1) {
        let code = this.areaList[e.detail.column][e.detail.value].code;
        this.getDistricts(code).then((res) => {
            this.areaList[2] = res;
            this.getAreaShow(0);
        });
    }
},
areaChange: function (e) {
    let value = e.detail.value;
    this.areaCodeArr = value;
    this.getAreaShow();
},
getProvinces: function () {
    let _this = this;
    return new Promise((resolve, reject) => {
        wx.request({
            url: "http://jiefangsudi.com/thanks/province/list",
            success: function (res) {
                let provinces = res.data;
                for (var i = 0; i  {
        wx.request({
            url: "http://jiefangsudi.com/thanks/city/list?provinceCode=" + parentCode,
            success: function (res) {
                let cities = res.data;
                for (var i = 0; i  {
        wx.request({
            url: "http://jiefangsudi.com/thanks/area/list?cityCode=" + parentCode,
            success: function (res) {
                let districts = res.data;
                for (var i = 0; i  {
        let areaCodeArr = _this.areaCodeArr;
        let provinces = _this.areaList[0].children;
        let cities = _this.areaList[1].children;
        let districts = _this.areaList[2].children;
        let areaShow = "";
        if (provinces[areaCodeArr[0]]) {
            areaShow += provinces[areaCodeArr[0]].name;
        }
        if (cities[areaCodeArr[1]]) {
            areaShow += "-" + cities[areaCodeArr[1]].name;
        }
        if (districts[areaCodeArr[2]]) {
            areaShow += "-" + districts[areaCodeArr[2]].name;
        }
        _this.areaShow = areaShow;
    }, delayTime);
},