使用云函数获取手机号码

前端代码：

最终效果

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
}