小程序黑科技之获取手机号码、通讯地址、地理位置

首页学海无涯微信小程序小程序黑科技之获取手机号码、通讯地址、地理位置

摘要本文为大家介绍微信小程序提供的比较实用的几个黑科技，主要包括导入通讯地址、获取手机号码、获取地理位置。

黑科技之一：获取手机号

简介：

获取微信用户绑定的手机号，需先调用wx.login接口。

因为需要用户主动触发才能发起获取手机号接口，所以该功能不由API来调用，需要用<button>组件的点击来触发。

使用方法：

1.页面放置一个button，使用户手动触发接口.

<button class='getPhone' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

注：必须是微信的<button>组件，且必须加上open-type="getPhoneNumber"。用户点击按钮后会弹出一个确认框，确认或拒绝都会进入bindgetphonenumber中填写的函数。

2.编写回调函数。

Page({
  getPhoneNumber: function(e) {
    console.log(e.detail.errMsg); //用户不同意授权返回的是:getPhoneNumber:fail user deny
    console.log(e.detail.iv); //加密算法的初始向量
    console.log(e.detail.encryptedData); //包括敏感数据在内的完整用户信息的加密数据
    if (e.detail.errMsg == "getPhoneNumber:ok") {
      wx.request({
        url: 'https://api.qq.com/user/getPhoneNumber', //仅为示例，后台接口地址
        data: {
          iv: e.detail.iv,
          encrytedData: e.detail.encryptedData
        },
        success(res) {
          //后台将加密数据进行解密后即可获得用户手机号码
          console.log(res.data)
        }
      })
    } else {
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '获取失败',
        success: function(res) {}
      })
    }
  }
})

用户同意授权后，我们可以获取到iv、encryptedData，再加上之前通过wx.login步骤获取到的session_key，即可解密用户数据获取到手机号码。

3.关于后台如何解密，还请各位大胸弟移步官方文档，微信官方提供了多种编程语言的示例代码供参考。

传送门：加密数据解密算法

encryptedData解密后为以下json结构：

{
    "phoneNumber": "13580006666",  
    "purePhoneNumber": "13580006666", 
    "countryCode": "86",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":TIMESTAMP
    }
}

4.注意：getPhoneNumber回调中使用wx.login获取session_key的话会刷新登录态，而获取到的加密数据是旧的登录态，会出现解密失败。所以wx.login步骤必须提前使用，提前换区到session_key。

黑科技之二：导入通讯地址

简介：

获取用户通讯地址需要调用wx.chooseAddress。

该方法会调起用户编辑收货地址的原生界面，并在编辑完成后返回用户选择的地址。

代码实现：

Page({
  importWXAddr: function() {
    var that = this;
    if (wx.chooseAddress) {
      wx.chooseAddress({
        success: function(res) {
          if (res.errMsg === 'chooseAddress:ok') {
            var userName = res.userName, //收货人姓名
              telNumber = res.telNumber, //收货人手机号码
              detailInfo = res.detailInfo, //详细收货地址信息
              provinceName = res.provinceName, //国标收货地址第一级地址
              cityName = res.cityName, //国标收货地址第二级地址
              countyName = res.countyName; //国标收货地址第三级地址
          }
        },
        fail: function(err) {
          //用户未选择或者拒绝授权
          if (err.errMsg === 'chooseAddress:fail auth deny') {
              //此时可以提示用户打开授权
          }
        }
      })
    } else {
      console.log('当前微信版本不支持chooseAddress');
    }
  }
})

注意事项：

调用该API之前需要用户授权，用户从未操作该项授权时（未拒绝、未同意、未手动打开），调用该API会默认弹出一个询问框，询问用户是否进行授权，用户确定后会进入success回调，拒绝则会进入fail回调。而一旦用户操作过该项授权（拒绝、同意、手动打开），调用该API将不会弹出询问框，而是直接采用上次用户的操作情况，也就是说，用户上次是拒绝那么这次默认也是拒绝。所以这个地方需要开发者灵活处理，办法有很多，在此暂时不做描述。

黑科技之三：获取地理位置

简介：

获取用户地理位置需要调用wx.chooseLocation。

该方法会打开地图，并在用户选择位置后返回地理位置信息。

代码实现：

Page({
  chooseLocation: function () {
    var that = this;
    wx.chooseLocation({
      success: function (res) {
        console.log(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 + ")";
        }
        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);
        }
        //设置数据
        console.log(addressBean);
      },
      fail: function (err) {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  }
})

很多时候我们需要把省、市、区、详细地址独立出来，所以上述代码对wx.chooseLocation返回的地址数据进行了处理。

下面分别是原始数据和处理后的数据：