微信小程序，使用云函数实现获取手机号码(免验证码)
使用云函数获取手机号码前端代码：最终效果 [图片] wxml: <van-overlay show="{{ show }}" >
<view class="wrapper" >
<view class="login">
<view class="top-img flex">
<image src="../../img/login_img.png" style="width:322rpx;height:245rpx;"></image>
</view>
<view class="title">获取手机号</view>
<view class="body">小程序即将获取您的手机号码，将为小程序实行登录操作,请确保您的手机号码能够正常使用！</view>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"><view class="btn">知道了</view></button>
</view>
</view>
</van-overlay>
注意：wxml使用了vant的弹窗组件，通过button的开放功能获取用户手机号码的令牌， 如果直接贴上面的代码，程序上什么也不会显示，你需要在你的项目中安装vant weapp UI,引入 [图片] js: getPhoneNumber (e) { //button的开放功能绑定方法
console.log(e) //打印获取用户手机号码code
wx.cloud.callFunction({ //连接云函数
name:'getPhone', // 云函数名称
data:{
cloudID:e.detail.cloudID //向后台传递cloudID令牌
}
}).then(res=>{
console.log(res.result.list[0].data.phoneNumber) //从云函数返回正常的手机号码
console.log(res.result.list[0].data.watermark.appid)
}).catch(err=>{
console.log(err)
})
},
css: /* 自定义弹出层 */
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.top-img{
justify-content: center;
background-color: #2B8C82;
border-radius: 18rpx 18rpx 0 0;
}
.top-img>image{
transform: translateY(-60rpx);
}
.login {
width: 580rpx;
border-radius: 20rpx;
background-color: #fff;
padding-bottom:40rpx;
box-sizing: border-box;
}
.title{
text-align: center;
margin: 20rpx 0;
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.body{
font-size: 24rpx;
color: #666666;
margin: 15rpx 0;
line-height: 45rpx;
padding: 0 40rpx;
}
.btn{
font-size: 26rpx;
background-color: #2B8C82;
box-shadow: 0rpx 0rpx 20rpx #2B8C82;
color: white;
width: 80%;
margin: 20rpx auto;
border-radius: 100rpx;
}
云函数代码：// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const res = await cloud.getOpenData({
list:[event.cloudID]
})
return res
}
