你和光都差不多 看起来触手可及 但偏偏咫尺千里

微信小程序获取用户手机号,利用云开发云函数拿到用户手机号

最近在写一个小程序,用了云开发,然后在获取手机号这出现了点小问题

坑爹的百度一搜出来,都是好多重复且错误的例子

上面的答案都是这个样子的,但总感觉哪里不对

微信小程序云开发获取手机号码还需要通过code发到微信平台上获得session key来解密取得手机号码

因为企鹅都说过了,云开发是自动鉴权的,不应该还要通过code来解密的啊

所以后面就跟着文档找,试着试着就试出了正确的通过云函数获取手机号码的流程

然后是想给这些文档作者和无良BD一锤子,想要的内容找不着,广告反而一大堆

首先,我们找到官方文档关于获取手机号的说明

我们看一下它的返回参数中关于cloudID的说明(基础库2.80以上一般新建云开发都是在这个之上的,老式的基础库这里不作说明)

敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据,详细见云调用直接获取开放数据

然后我们就跳到了关于云开发云调用直接获取开放数据这里

1)获取手机号码页cellphone.wxml或者在需要调用这个的位置添加上这一句

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机号码</button>

2)相应的cellphone.js页面新建一个上面bindgetphonenumber对应的函数getPhoneNumber

 //获取用户手机号
  getPhoneNumber(e) {
        wx.cloud.callFunction({
          name: 'openapi',//调用openapi云函数文件
          data: {
            action:'getcellphone',//调用openapi云函数文件里的getcellphone函数
            id:wx.cloud.CloudID(e.detail.cloudID)//在这里通过wx.cloud.CloudID云函数把敏感数据转值,如果直接id:e.detail.cloudID这样把e.detail.cloudID赋予给id,则只能得到cloudId的值,当时我就是错在这一步上(真是羞耻QAQ)
          }
        }).then(res => {
          console.log('res: ', res)
        //这里写业务逻辑代码,then是succeed的另一种写法,也就是说获取手机号成功后这里执行些什么操作,一般常见的就是setdata赋值
        })    
      },

3)进入云函数openapi的index.js//不一定是openapi,你可以自己写一个自定义云函数,同理修改上述代码

首先要引入node_modules和package-lock.json 包在这里 放到openapi这个云函数文件夹下

// 云函数入口文件,如果没有这一句那么自己加上

const cloud = require('wx-server-sdk')

找到switch (event.action) {这段函数添加上

case 'getcellphone':{
      return getCellphone(event);
    }

然后在文件最后方我们加入这段函数的执行代码

async function getCellphone(event){
console.log(event.id.data.phoneNumber);
return event.id.data.phoneNumber;
}

全程无需获取code和session_key及解密,云开发天然鉴权,最后附送上wxml和js完整代码,有需要的可以借鉴使用和修改

wxml

        <button class="phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
              <block wx:if="phone==''}}"> 请点击获取您的手机号</block>
              <block wx(if="{{phone!=='')"> phone}}</block>
              <image wx(if="{{phone=='')" class="right" src="/images/right.png" />
        </button>

wxss

.phone {
      justify-content: space-between;
      margin-top: 45rpx;
      width: 100%;
      height: 92rpx;
      background: #f1f3f8;
      border-radius: 10rpx;
      text-align: left;
      padding: 0 20rpx 0 36rpx;
      box-sizing: border-box;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      color: #8c9aa8;
      border: none;
}

.phone::after {
      border: none;
}

.right {
      width: 30rpx;
      height: 30rpx;
}

js

  //获取用户手机号
  getPhoneNumber(e) {
        let that = this;
        //判断用户是否授权确认
        if (!e.detail.errMsg || e.detail.errMsg != "getPhoneNumber:ok") {
              wx.showToast({
                    title: '获取手机号失败',
                    icon: 'none'
              })
              return;
        }
        wx.showLoading({
              title: '获取手机号中...',
        })
  


        console.log(JSON.stringify(e.detail.cloudID));
        wx.cloud.callFunction({
          name: 'openapi',
          data: {
            action:'getcellphone',
            id:wx.cloud.CloudID(e.detail.cloudID), 
          },success: res => {
              console.log('res: ', res.result)
//判断该手机号是否注册,如果手机号在数据库中注册了则直接跳转主页
db.collection('otk_user_main').where({phone:res.result}).get().then(res=>{
      if(res.data.length!=0){
        wx.setStorageSync('userinfo',res.data[0]);
        wx.setStorageSync('openid',res.data[0]._openid);
              wx.switchTab({url:'../my/my'})
      }
})

              wx.hideLoading();
              if (res.result == null) {
                    wx.showToast({
                          title: '获取失败,请重新获取',
                          icon: 'none',
                          duration: 2000
                    })
                    return false;
              }
              //获取成功,设置手机号码
              that.setData({
                    phone: res.result
              })
        },
        fail: err => {
              console.error(err);
              wx.hideLoading()
              wx.showToast({
                    title: '获取失败,请重新获取',
                    icon: 'none',
                    duration: 2000
              })
        }
        })
        
      },

附录与正文无关:

2)相应的cellphone.js页面新建一个上面bindgetphonenumber对应的函数getPhoneNumber

getPhoneNumber(e) {
            var that = this;
            wx.cloud.callFunction({
                name: 'getMobile',
                data: {
                    weRunData: wx.cloud.CloudID(e.detail.cloudID),
                }
            }).then(res => {
                console.log('res: ', res)
        //这里写业务逻辑代码
            }).catch(err => {
                console.error(err);
            });
        },

3)云函数 getMobile文件

// 云函数入口文件
const cloud = require('wx-server-sdk')
 
cloud.init()
 
// 云函数入口函数
exports.main = async (event, context) => {
    const wxContext = cloud.getWXContext()
    var moblie = event.weRunData.data.phoneNumber;
    return moblie
}
小工程 © 著作权归陌橙离家的小屋所有,转载请注明出处。
我不相信一见钟情了,所以要想方设法再多见一面 打赏 相对于文艺青年,我更喜欢别人称我为“人文从业者”

添加新评论