主题活动答题小程序如何获取手机号,并且每个手机号仅限参加1次

背景

是这样的,我前段时间不是接了一个知识竞赛在线答题的小程序的项目需求嘛。其中,有一项活动规则是这样的,信息录入:每位参赛者,需填写公司名称、姓名、手机号(微信授权验证方式,每人仅限参加1次)。接下来,我们一起看看如何一步步实现。

查看文档

主题活动答题小程序如何获取手机号,并且每个手机号仅限参加1次_第1张图片

主题活动答题小程序如何获取手机号,并且每个手机号仅限参加1次_第2张图片

由此可知,是通过微信小程序的开放能力获取的。

获取手机号


获取微信用户绑定的手机号,需先调用wx.login接口。

因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发。

注意:目前该接口针对非个人开发者,且完成了认证的小程序开放(不包含海外主体)。需谨慎使用,若用户举报较多或被发现在不必要场景下使用,微信有权永久回收该小程序的该接口权限。

使用方法

需要将 button 组件 open-type 的值设置为 getPhoneNumber,当用户点击并同意之后,可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据, 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

代码实现

`getPhoneNumber (e) {

console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)

}`

敏感数据对应的云 ID,开通云开发的小程序才会返回,可通过云调用直接获取开放数据。

在小程序获取到cloudID之后发起调用获取:

`wx.cloud.callFunction({
name: 'getPhoneNumberData',
data: {

weRunData: wx.cloud.CloudID(cloudID), // 这个 CloudID 值到云函数端会被替换
obj: {
  shareInfo: wx.cloud.CloudID(cloudID), // 非顶层字段的 CloudID 不会被替换,会原样字符串展示
}

}
})`

获取得到的开放数据为以下 json 结构:

`{

"phoneNumber": "13580006666",
"purePhoneNumber": "13580006666",
"countryCode": "86",
"watermark":
{
    "appid":"APPID",
    "timestamp": TIMESTAMP
}

}`

效果截图

主题活动答题小程序如何获取手机号,并且每个手机号仅限参加1次_第3张图片

主题活动答题小程序如何获取手机号,并且每个手机号仅限参加1次_第4张图片

总结

获取手机号的前置条件是小程序账号必须是企业主体认证类型的,不然的话不能调用哦。调用的话,是需要通过将button组件open-type的值设置为getPhoneNumber ,然后服务端获取开放数据,即可。

你可能感兴趣的:(前端,vue.js,css3,html5)