小程序 省市区地址选择器

这两天闲着没事干，给自己挖了个坑，用小程序些省市区地址选择器，直接上效果图吧，样子有点丑。接口地址，我是直接找的开源的，今天我就懒的讲那么多话了，直接上代码。

省（全国各省）
http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json

市(以安徽为例)
http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/340000_city.json

县
http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/341700_district.json

wxml文件

<view class="main">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section">
      <text class="section__title">收货人</text>
      <input name="input" type="text" placeholder="请输入收货人" />
    </view>
     <view class="section">
      <text class="section__title">手机号码</text>
      <input name="input" type="number" placeholder="请输入手机号码" />
    </view>
    <view class="section">
      <text class="section__title">所在地区</text>
        <view bindtap="open">{{addressDetails?addressDetails:"请选择地区"}}</view>
        
    </view>
     <view class="section">
      <text class="section__title">详细地址</text>
          <input placeholder="请输入详细地址" value="{{detalis}}" />
    </view>
    <view wx:if="{{condition}}" class="citypicker">
      <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange" class="citybody">
        <view class="cityheader">
          <view bindtap="open" class="city-cancel">取消</view>
          <view bindtap="submit" class="city-true">确定</view>
        </view>
        <picker-view-column>
          <view wx:for="{{provinces}}" wx:key="item" style="line-height: 50px;padding-left:40px;">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{citys}}" wx:key="item" style="line-height: 50px;padding-left:20px;">{{item.name}}</view>
        </picker-view-column>
        <picker-view-column>
          <view wx:for="{{countys}}" wx:key="item" style="line-height: 50px;padding-left:10px;">{{item.name}}</view>
        </picker-view-column>
      </picker-view>
    </view>
    <view wx:if="{{!condition}}" class="btn-area">
      <button type="warn" formType="submit">保存</button>
    </view>
  </form>
</view>

js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    provinces:[],
    citys:[],
    province:{},
    city:{},
    countys:[],
    addressDetails:'',
    details:'',
    condition:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: async function (options) {
    const data = await this.getProvince() 
    this.setData({
      provinces:data
    })
    const adcode = this.data.provinces[0].adcode;
    const cityData = await this.getCity(adcode);
    this.setData({
      citys:cityData
    })
    const countyAdcode = this.data.citys[0].adcode;
    const countyData = await this.getCounty(countyAdcode);
    this.setData({
      countys:countyData,
    })
  },
  open(){
    const condition = this.data.condition;
    this.setData({
      condition:!condition,
      addressDetails:''
    })
  },
  submit(){
    const condition = this.data.condition;
    this.setData({
      condition:!condition
    })
  },
  async bindChange(event){
    const provinceList = this.data.provinces;
    const code = event.detail.value;
    const provinceCode = code[0];
    const cityCode = code[1];
    const countyCode = code[2];
    let cityList = this.data.citys;
    if(provinceCode){
      const cityData =await this.getCity(provinceList[provinceCode].adcode)
      this.setData({
        citys:cityData
      })
      const countyData =await this.getCounty(cityList[0].adcode)
      this.setData({
        countys:countyData
      })
      
      if(cityCode){
        const countyData =await this.getCounty(cityList[cityCode].adcode)
        this.setData({
          countys:countyData
        })
        const address = this.data.provinces[provinceCode].name + this.data.citys[cityCode].name + this.data.countys[countyCode].name;
        this.setData({
          addressDetails:address
        })
      }
    }
    if(!provinceCode && cityCode){
      const countyData =await this.getCounty(cityList[cityCode].adcode)
      this.setData({
        countys:countyData
      })
      const address = this.data.provinces[provinceCode].name + this.data.citys[cityCode].name + this.data.countys[countyCode].name;
        this.setData({
          addressDetails:address
        })
    }
  },
  changeProvince(event){
    console.log(event)
    const index = event.detail.value;
    const value = this.data.provinces[index];
    this.setData({
      province:value,
      address:value.name
    })
  },
  getProvince(){
    return new Promise(resolve=>{
      wx.request({
        url: 'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json',
        success(res){
          const body = res.data.rows;
          let p = [];
          body.forEach(item=>{
            let obj = {
              adcode:'',
              name:''
            };
            obj.adcode = item.adcode
            obj.name = item.name;
            p.push(obj)
          })
          resolve(p)
        }
      })
    })
  },
  getCity(adcode){
   return new Promise(resolve=>{
    let cityUrl = 'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/'+adcode+'_city.json';
    wx.request({
      url: cityUrl,
      success(res){
        const body = res.data.rows;
        let p = [];
        body.forEach(item=>{
          let obj = {
            adcode:'',
            name:''
          };
          obj.adcode = item.adcode
          obj.name = item.name;
          p.push(obj)
        })
        resolve(p);
      }
    })
   })
  },
  getCounty(adcode){
    return new Promise(resolve=>{
      let cityUrl = 'http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/'+adcode+'_district.json';
      wx.request({
        url: cityUrl,
        success(res){
          const body = res.data.rows;
          let p = [];
          const code = adcode.slice(0,4);
          // debugger;
          body.forEach(item=>{
            if(item.adcode.includes(code)){
              let obj = {
                adcode:'',
                name:''
              };
              obj.adcode = item.adcode
              obj.name = item.name;
              p.push(obj)
            }
          })
          resolve(p);
        }
      })
    })
  }
})

最后附上开源博主的地址：https://blog.csdn.net/jimolangyaleng/article/details/85596748