微信小程序省市区选择器的详细阐述

一、微信小程序城市区县选择

微信小程序提供了城市区县选择组件，是对于用户选择地址时的一种简单方便的解决方案。在使用之前，需要在页面的.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);
},