小程序获取用户手机号有一些限制:
- 目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体),也就是只有国内认证的企业账号才可以使用。
- 必须通过
button
的点击触发,包括头像、客服这些都需要通过button
的点击来触发获取。 - 需先调用
wx.login
接口获取code
,后端通过code
调用auth.code2Session
获取到session_key
,再对获取到的encryptedData
进行解密获取到手机号。
详细介绍可以看下官网文档获取手机号
在点击获取手机号按钮之前需要先调用wx.login
,code
是有时效的,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创建之后不可修改,这里环境名称官方文档建议test
和release
方便区分的开发环境和生产环境名称。
不使用云服务创建的小程序如何使用云开发
首先根目录下创建两个文件夹,cloudfunctions
和miniprogram
,其他名称也可以。
然后把之前小程序目录下文件,除了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()
,如果需要获取openId
和unionId
可以直接使用这个云函数,我们修改成获取手机号的云函数,修改之后一定要右键上传并部署。
在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()