微信小程序云开发入门-快速获取手机号

一、前言

很多时候，我们需要获取用户的手机号码，一般是由用户自己输入，然后我们需要保证手机号的准确性比较高的话，可能还需要搭配一个验证码的功能来确保一定的准确性。这样实现起来的开发成本以及用户体验感都不是最佳的，毕竟于开发者而言，需要承担验证码的费用以及代码的开发；于用户来说，需要手动输入自己的手机号码然后再等待验证码的过来等。

本文主要基于微信小程序云开发去实现快速获取用户绑定微信的手机号，可以很大程度的解决上述的痛点。

二、实现的效果

开始实现之前，先看看效果。

三、实现代码

wxml

<view>你的手机号码是：{{userPhone}}view>
<button type="primary" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">快速获取手机号button>

js

async getPhoneNumber(res) {
    console.log(res)
    const errMsg = res.detail.errMsg
    if (errMsg != "getPhoneNumber:ok"){
      wx.showToast({
        title: '授权失败',
        icon: 'error'
      })
      return
    }
    const cloudId = res.detail.cloudID
    const cloudIdList = [cloudId]
    wx.showLoading({
      title: '获取中',
      mask: true
    })
    const cloudFunRes = await wx.cloud.callFunction({
      name: "getOpenData",
      data: {
        cloudIdList
      }
    })
    const jsonStr = cloudFunRes.result.dataList[0].json
    const jsonData = JSON.parse(jsonStr)
    const phoneNumber = jsonData.data.phoneNumber
    console.log(phoneNumber)
    this.setData({
      userPhone: phoneNumber
    })
    wx.hideLoading({
      success: (res) => {},
    })
  },

云函数：getOpenData

index.js

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event) => {
  const wxContext = cloud.getWXContext()
  const openid = wxContext.OPENID
  const cloudIdList = event.cloudIdList
  try {
    const result = await cloud.openapi.cloudbase.getOpenData({
      openid: openid,
      cloudidList: cloudIdList
    })
    return result
  } catch (err) {
    return err
  }
}

config.json

这个很重要，需要配置一下云函数的权限。

{
  "permissions": {
    "openapi": [
      "phonenumber.getPhoneNumber"
    ]
  }
}

四、最终效果

五、常规结语

分享的是思维不是技术。所以很多地方写得并不是很严谨，仅仅是把逻辑跑了一遍。（大佬们手下留情，谢谢）

实际开发中的其他逻辑就不写了，这里只是最简单的实现。

有任何疑问可以在评论区留下。我每天都会进行回复，私聊不回。（为了刷积分）

以上均是本人开发过程中的一些经验总结与领悟，如果有什么不正确的地方，希望大佬们评论区斧正。

最后！！！不管这篇文章对你有没有用，既然都看到最后了。
赞一个！！！
当然，顺带收藏就最好了。
欢迎转载，原创不易，转载请注明出处✍。

如果你对小程序开发有兴趣或者正在学习小程序开发，可以关注我。每一篇都是原创，每一篇都是干货噢~。
————————————————
版权声明：本文为CSDN博主「super–Yang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。