微信小程序获取电话号码

目录

微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程序添加插屏广告 微信小程序添加激励式广告

最终效果可扫码查看

概述

使用之前已经完成的个人中心页，在这个基础上直接修改。原地址：https://blog.csdn.net/m0_58095675/article/details/121077886 流程分为三步：

1. 默认情况下没有登录
2. 点击登录按钮后，提示是否绑定手机号
3. 点击确定后，获取到手机号码

对应效果如下

技术总结

1 小程序登录wx.login获取code（后台使用该code得到session_key openid unionid） 2 获取手机号码 open-type=“getPhoneNumber” 3 本地存储的使用wx.getStorageSync(‘mobile’) 和 wx.setStorageSync(“mobile”, phoneNumber); 4 后端代码使用的java，如果需要可留言，或添加上图中联系电话对应的微信。

样式

样式仅做了微调，调整了button控件的百分比，其他的和之前代码一样

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.content { 
  width: 100%; 
  padding: 10px;
  padding-top: 25px;
  justify-content: space-around; 
 } 

 .content-text {
  width: 100%;
  display: flex;
  font-size: 16px;
  line-height: 26px;
}

.content-text-mobile {
  color: #2782D7;
}

.mine-text {
  width: 100%;
  height:120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
}
.mine-text.text{
   color: #fff;
   font-size: 44rpx;
   line-height: 51rpx;
   width: 100%;
 }

流程 官方提醒

在获取手机号码的文档中，微信官方有这样的提示：“在回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。”

所以，将之前的代码调整为只要onShow就调用一次wx.login，而不是放到获取手机号码的成功回调用。

登录部分微信官方地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html 获取手机号码微信官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

后台数据

写了一个获取手机号码的接口 http://yr.lootaa.com/location/wechat/mobile?code=&encryptedData=&iv=&appid=&secret= 几个请求参数说明： code：wx.login的时候有，必填 encryptedData：获取手机号码的时候有，必填 iv：获取手机号码的时候有，必填 appid：小程序的appid，如果不填，后台默认使用的我自己的 secret：小程序的secret，如果不填，后台默认使用的我自己的

如果请求成功，返回的数据格式

{
  "code": 200,
  "message": "",
  "data": {
    "phoneNumber": "15010563146",
    "purePhoneNumber": "15010563146",
    "countryCode": "86",
    "openid": "omu1A5cusH9k7lKLJVoJGJ6AEkhI",
    "unionid": "oHD8W0tMu5f26AWGvP4sru6lUBzw"
  }
}

其中，unionid不一定有，需要将小程序绑定到微信开放平台才有。开放平台地址https://open.weixin.qq.com/ 绑定小程序的时候有个坑，开放平台提示主体比如一致，但是如果没有认证的话，微信就认为开放平台属于个人，即便小程序和开放平台所属公司相同也不行。认证费300大洋。

代码

Page({
  data: {
    login: false,
    code: '',
    userMobile: ''
  },
  onShow: function (options) {
    var that = this;
    var mobile = wx.getStorageSync('mobile');
    var openid = wx.getStorageSync('openid');
    var unionid = wx.getStorageSync('unionid');
    if (mobile && openid && unionid) {
      that.setData({
        userMobile: mobile
      });
      this.setData({
        login: true
      });
    } else {
      this.setData({
        login: false
      });
      wx.login({
        success(res) {
          if (res.code) {
            console.log(res.code)
            that.setData({
              code: res.code
            })
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
    }
  },

  call: function () {
    wx.makePhoneCall({
      phoneNumber: '15010563146'
    })
  },

  userLogin: function (e) {
    // wx.navigateTo({
    //   url: '../logs/logs'
    // })
    var that = this;
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
      var url = '这里是后台接口地址，如果需要Java版本的可留言?code=' +
        encodeURIComponent(encodeURIComponent(this.data.code)) + '&encryptedData=' + encodeURIComponent(encodeURIComponent(e.detail.encryptedData)) + '&iv=' + encodeURIComponent(encodeURIComponent(e.detail.iv)) + '&appid=&secret=';
      console.log(url)
      wx.request({
        url: url,
        success(res) {
          console.log(res.data.data)
          if (res.data.code != 200) {

          } else {
            wx.setStorageSync("mobile", res.data.data.phoneNumber);
            wx.setStorageSync("openid", res.data.data.openid);
            wx.setStorageSync("unionid", res.data.data.unionid);
            that.setData({
              userMobile: res.data.data.phoneNumber
            });
            that.setData({
              login: true
            });

          }
        }
      })

    }

  }

})

布局

获取手机号码按钮比如用button，同时open-type=“getPhoneNumber”，用bindgetphonenumber指定获取的方法。