小程序省市区调用微信原生代码

最新推荐文章于 2024-08-01 13:24:30 发布

最新推荐文章于 2024-08-01 13:24:30 发布 · 702 阅读

文章标签：

#微信小程序 #省市区 #地址选择 #原生小程序

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个微信小程序中实现省市区地址选择的方法。通过调用原生微信API, 用户可以轻松选取地址并将其解析为省、市、区格式，同时保存详细地址。此功能通过正则表达式处理获取到的位置信息。

微信小程序调用原生微信api 实现省市区地址选择

// page/address/edit.js
Page({
  data:{},
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  bingAddressTap:function(){
    var that = this;
    wx.chooseLocation({
      success: function(res){
        var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
        var REGION_PROVINCE=[];
        var addressBean = {
          REGION_PROVINCE:null,
          REGION_COUNTRY:null,
          REGION_CITY:null,
          ADDRESS:null};
        function regexAddressBean(address, addressBean){
            regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
            var addxress = regex.exec(address);
            addressBean.REGION_CITY=addxress[1];
            addressBean.REGION_COUNTRY=addxress[2];
            addressBean.ADDRESS=addxress[3]+"("+res.name+")";
            console.log(addxress);
        }
        if(!(REGION_PROVINCE = regex.exec(res.address))){
          regex = /^(.*?(省|自治区))(.*?)$/;
          REGION_PROVINCE = regex.exec(res.address);
          addressBean.REGION_PROVINCE= REGION_PROVINCE[1];
          regexAddressBean(REGION_PROVINCE[3],addressBean);
        } else {
          addressBean.REGION_PROVINCE= REGION_PROVINCE[1];
          regexAddressBean(res.address, addressBean);
        }
        that.setData({ADDRESS_1_STR:
        addressBean.REGION_PROVINCE+" "
        +addressBean.REGION_CITY+""
        +addressBean.REGION_COUNTRY });
        that.setData(addressBean);
      }
    })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

以上是js 代码

网页部分（wxml）

<view class="info">
    <text>收货地址</text>
    <input bindfocus="bingAddressTap" value="{{REGION_PROVINCE}}{{REGION_CITY}}{{REGION_COUNTRY}}" placeholder="小区/大厦/学校"/>
</view>
<view class="info">
    <text>详细地址</text>
    <textarea auto-height="true" placeholder="详细地址（如门牌号等）" value="{{ADDRESS}}"/>
</view>

点击收货地址后面的文本框，就能选中了

预览效果