小程序云函数获取用户手机号并保存到数据库

话不多说吧，直接上代码

WXML

 wx:if的做用就是根据接口调用的数据判断如果没有验证就显示弹出层，如果已经验证不做处理

<!-- 授权获取手机号 -->
<view class="getphone" wx:if="{
   
   {shoujibtn}}">
   <button class="gettel" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">手机验证，获取更多特权</button>
</view>

WCSS

演示用写的比较简单，只有一个按钮居中在页面加上一个全屏的透明遮罩层

.getphone{width: 750rpx;height: 100vh;background-color:rgba(0, 0, 0, .7);position: fixed;left: 0;bottom: 0;z-index: 99999;color: #fff;}
.gettel{width: 600rpx;height: 80rpx;border-radius: 40rpx;text-align: center;color: #fff;background-color: #ff6600;line-height: 80rpx;margin: -40rpx 0 0 -300rpx;position: absolute;left: 50%;top: 50%;}

JS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    openid:'',
    shoujibtn:false
  },
  currentPageNumber: 1,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    //用户是否登录 登录用户再判断用户是否已经绑定手机验证
    wx.getStorage({
      key: 'openidnew',
      success: res => {  
        console.log("用户已经登录"+ res.data)
        this.setData({
          openid:res.data
        })
        //如果用户已经登录判断是否手机验证，如果没有验证弹出手机验证
        api.get({
          url: 'home/minilist/isphone',
          data: {
            appid: api.API_ID,
            openid:res.data
          },
          success: data => { 
            if(data.data == 0){
              this.setData({
                shoujibtn:true
              })
            }
                                  
          }
        })
      }
    })
  },
  
  //这里调用云函数获取手机号并写进数据库
  getPhoneNumber(e) {
    wx.cloud.callFunction({
      name: 'getMobile',
      data: {
        weRunData: wx.cloud.CloudID(e.detail.cloudID),
      }
    }).then(res => {
      console.log(res.result)
      api.get({
        url: 'home/minilist/savephone',
        data: {
          appid: api.API_ID,
          openid:this.data.openid,
          phone:res.result,
          ptime: util.timenow(1)
        },
        success: data => { 
            this.setData({
              shoujibtn:false
            })                                
        }
      })      
  
    }).catch(err => {
      console.error(err);
    });
  }


})

云函数

建一个getmobile的云函数，index.js里代码如下

// 云函数入口文件
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
 }

效果演示

 

写在后面，后端判断用户是否手机验证以及把手机号保存到数据库的我就不写了，比较简单，这里不做重点讨论