微信小程序云开发获取手机号

2022.09.26更新
云开发开始收费,首月20,后面每月应该是40,如果只是为了获取手机号,目前不建议使用云开发方式获取。


小程序获取用户手机号有一些限制:

  1. 目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体),也就是只有国内认证的企业账号才可以使用。
  2. 必须通过button的点击触发,包括头像、客服这些都需要通过button的点击来触发获取。
  3. 需先调用wx.login接口获取code,后端通过code调用auth.code2Session获取到session_key,再对获取到的encryptedData进行解密获取到手机号。

详细介绍可以看下官网文档获取手机号

在点击获取手机号按钮之前需要先调用wx.logincode是有时效的,session_key也是有时效的,就不能像openId一样获取之后缓存本地了,需要调用wx.checkSession进行登录态检查,以确定是否需要调用wx.login重新获取session_key

这是官方文档服务端获取开放数据第一种方式,这次主要讲的是第二种方式,云调用直接获取开放数据云开发。

我们写小程序或者APP一般都是前后端分离,前端写界面,后端写接口,前端通过调用后端接口进行数据处理,这样各司其职,保证了质量也保证了效率。但是有时候前端人员想写点自己个人的产品,却不会后端开发以及没有服务器,我想很多前端人员都有过这样的想法,前几年研究过LeanCloud的云存储通过rest api直接操作数据库,虽然比直接学习后端开发要简单很多,但学会还是需要不少时间。小程序云开发和LeanCloud的云存储类似,入门要简单很多,文档也挺详细。

新建项目时可以选择小程序·云开发,这样可以直接创建小程序·云开发模板。

新建项目

查看目录会发现和不使用云服务创建的小程序目录有一些区别

云开发目录
小程序目录

区别在于,云开发目录多了cloudfunctions目录,小程序的文件都在miniprogram目录下。
同时project.config.json配置文件中多了云开发的目录配置

"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",

此时云服务还无法使用,点击左上的云开发按钮

云开发

会让你创建环境名称和环境ID,坏境ID创建之后不可修改,这里环境名称官方文档建议testrelease方便区分的开发环境和生产环境名称。

不使用云服务创建的小程序如何使用云开发

首先根目录下创建两个文件夹,cloudfunctionsminiprogram,其他名称也可以。
然后把之前小程序目录下文件,除了project.config.json都拖到miniprogram目录下,在project.config.json配置中添加

"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",

添加之后

{
    "miniprogramRoot": "miniprogram/",
    "cloudfunctionRoot": "cloudfunctions/",
    "description": "项目配置文件",
    "packOptions": {
        "ignore": []
    },

点击左上云开发按钮创建环境,首次开通云环境后,需等待大约 10 分钟方可正常使用云 API。
右键云开发目录会看见当前环境

云开发

在小程序端开始使用云能力前,需在app.js里调用wx.cloud.init方法完成云能力初始化

//app.js
App({
  onLaunch: function () {
    //初始化云开发
    wx.cloud.init({
      traceUser: true
    })
  }
})

cloudfunctions文件夹右键选择新建Node.js云函数,名称我们叫getPhone
新建之后默认会生成获取小程序上下文的云函数cloud.getWXContext(),如果需要获取openIdunionId可以直接使用这个云函数,我们修改成获取手机号的云函数,修改之后一定要右键上传并部署。

getPhone

getPhoneNumber中调用getPhone云函数,小程序端同时支持 Callback风格调用和Promise风格的调用。

   // 获取手机号
    getPhoneNumber: function (event) {      
      let cloudID = event.detail.cloudID //开放数据ID
      
      if (!cloudID) {
        app.showToast('用户未授权')
        return
      }

      //loading
      app.showLoading()

      //获取手机号
      wx.cloud.callFunction({
        name: 'getPhone',
        data: {
          cloudID: cloudID
        }
      }).then(res => {
        app.hideLoading()

        let phone = res.result.list[0].data.phoneNumber

        if (phone) {
          wx.setStorageSync('phone', phone)

          //更新UI
          this.setData({
            phone: phone
          })
        }

        this.triggerEvent('applyTap')
      }).catch(error => {
        app.hideLoading()
        this.triggerEvent('applyTap')
      })
    },

参考

5行代码获取小程序用户手机号
button
获取手机号
服务端获取开放数据
资源环境
初始化
我的第一个云函数
Cloud.getOpenData()

你可能感兴趣的:(微信小程序云开发获取手机号)