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

作者: zms! 日期: 2018.12.27 本文发布于458天前 分类: Weixin助手 相关:

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

黑科技之一:获取手机号

简介:

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

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

使用方法:

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

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

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

        2.编写回调函数。

  1. Page({
  2. getPhoneNumber: function(e) {
  3. console.log(e.detail.errMsg); //用户不同意授权返回的是:getPhoneNumber:fail user deny
  4. console.log(e.detail.iv); //加密算法的初始向量
  5. console.log(e.detail.encryptedData); //包括敏感数据在内的完整用户信息的加密数据
  6. if (e.detail.errMsg == "getPhoneNumber:ok") {
  7. wx.request({
  8. url: 'https://api.qq.com/user/getPhoneNumber', //仅为示例,后台接口地址
  9. data: {
  10. iv: e.detail.iv,
  11. encrytedData: e.detail.encryptedData
  12. },
  13. success(res) {
  14. //后台将加密数据进行解密后即可获得用户手机号码
  15. console.log(res.data)
  16. }
  17. })
  18. } else {
  19. wx.showModal({
  20. title: '提示',
  21. showCancel: false,
  22. content: '获取失败',
  23. success: function(res) {}
  24. })
  25. }
  26. }
  27. })

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

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

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

        encryptedData解密后为以下json结构:

  1. {
  2. "phoneNumber": "13580006666",
  3. "purePhoneNumber": "13580006666",
  4. "countryCode": "86",
  5. "watermark":
  6. {
  7. "appid":"APPID",
  8. "timestamp":TIMESTAMP
  9. }
  10. }

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

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

简介:

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

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

代码实现:

  1. Page({
  2. importWXAddr: function() {
  3. var that = this;
  4. if (wx.chooseAddress) {
  5. wx.chooseAddress({
  6. success: function(res) {
  7. if (res.errMsg === 'chooseAddress:ok') {
  8. var userName = res.userName, //收货人姓名
  9. telNumber = res.telNumber, //收货人手机号码
  10. detailInfo = res.detailInfo, //详细收货地址信息
  11. provinceName = res.provinceName, //国标收货地址第一级地址
  12. cityName = res.cityName, //国标收货地址第二级地址
  13. countyName = res.countyName; //国标收货地址第三级地址
  14. }
  15. },
  16. fail: function(err) {
  17. //用户未选择或者拒绝授权
  18. if (err.errMsg === 'chooseAddress:fail auth deny') {
  19. //此时可以提示用户打开授权
  20. }
  21. }
  22. })
  23. } else {
  24. console.log('当前微信版本不支持chooseAddress');
  25. }
  26. }
  27. })

注意事项:

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


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

简介:

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

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

代码实现:

  1. Page({
  2. chooseLocation: function () {
  3. var that = this;
  4. wx.chooseLocation({
  5. success: function (res) {
  6. console.log(res);
  7. //地址数据处理
  8. var regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
  9. var REGION_PROVINCE = [];
  10. var addressBean = {
  11. REGION_PROVINCE: null,
  12. REGION_COUNTRY:#
");

返回上一页


讨论区

您尚未 登录,或请 注册

登 录 注 册


你可能也喜欢

玩转微信浏览器之Web(H5)播放器 2020.03.11,2 pv
wxApi jsApiList 接口列表 2020.02.13,1 pv
微擎应用开发之获取微信地址 2020.02.13,0 pv

微信客服消息:形式简单,功能强劲 2019.12.18,8 pv
微信小程序省市区联动选择器 2019.05.09,14 pv
微信网页jssdk实用代码 2019.03.26,34 pv