本文最后修改于 262 天前,部分内容可能已经过时!
最近在写一个小程序,用了云开发,然后在获取手机号这出现了点小问题
坑爹的百度一搜出来,都是好多重复且错误的例子
上面的答案都是这个样子的,但总感觉哪里不对
微信小程序云开发获取手机号码还需要通过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"> phone}}</block>
<image wx" 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
}