微信小程序踩坑之获取手机号
最近在开发小程序遇到这样一个问题, 在用户点击授权后去解密手机号时会出现第一次失败,第二次成功的情况。研究了一段时间,终于找到比较合理的解决方案,在此记录并总结一下,希望可以帮助到大家。
需求描述
在用户点击获取电话按钮后, 将用户在微信内设置的电话解密显示在联系电话输入框内
具体代码
<view class="cu-form-group">
<view class="title text-black">联系电话</view>
<input class="radius" name="mobile" placeholder="请输入联系电话" value="{{detail.mobile}}" bindinput="onInputMobile"></input>
<button bindgetphonenumber="getPhoneNumber" class="cu-btn line-blue sm" openType="getPhoneNumber">获取电话</button>
</view>
首先需要小程序button
组件并设置 openType="getPhoneNumber"
onLoad: async function () {
this.getSessionKey()
},
async getSessionKey() {
const { code } = await wx.login()
const res = await Index.getSessionKey({
code
})
if (res.code == 1) {
this.setData({
session_key: res.data
})
}
},
getPhoneNumber: async function (e) {
if (e.detail.errMsg === "getPhoneNumber:ok") {
const res = await Index.getPhone({
iv: e.detail.iv,
encryptedData: e.detail.encryptedData,
session_key: this.data.session_key
})
if (res.err == 0) {
wx.showToast({
title: '网络有点儿小波动,请点击重试',
icon: 'none'
})
return
}
const detail = this.data.detail
detail.mobile = res.err.phoneNumber
this.setData({
detail
})
} else if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
wx.showModal({
title: '提示',
content: '你已拒绝授权,请重新点击并授权',
showCancel: false,
confirmText: "知道了"
})
}
},
在 onLoad
生命周期内获取登录code
, 并将code
码发送给服务端获取session_key
服务端获取session_key
请参考小程序官方文档。
在用户点击获取电话按钮后, 将session_key
以及获取到的iv
,encryptedData
发送给服务端进行解密。
这样就可以获取到用户的手机号了。
坑
之前我们的方案是, 在用户点击获取电话按钮后, 直接在getPhoneNumber
函数内调用wx.logon()
,将code
,iv
,encryptedData
发送给服务端, 服务端先拿code
获取session_key
, 然后和iv
,encryptedData
结合进行解密,这样做的话就会出现第一次解密失败,然后再次点击按钮调用该解密接口就能成功。 而且隔5-6分钟就又会出现该情况。
当调用wx.checkSession(Object object)
检查登录态是否过期也是一直成功的。
猜测
后来想了一下,为什么在getPhoneNumber
函数内调用wx.login
, 然后服务端拿code
换session_key
,并结合iv
,encryptedData
解密不行呢?而把wx.login
放进onLoad
内获取session_key
就可以呢?
我想应该是在wx.login
调用时会刷新微信服务器的session_key
,直接在getPhoneNumber
调wx.login
,或许微信服务器还没来得及刷新,服务端就拿着进行解密, 解密时用的还是上次过期的session_key
,所以只有第二次以后才能成功。而wx.login
放到onload
内,就能来的及session_key
了。
微信小程序踩坑之获取手机号的更多相关文章
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序踩坑- tabBar.list[3].selectedIconPath 大小超过 40kb
重新启动微信小程序编辑器的时候遇到了这样的一个问题: tabBar.list[3].selectedIconPath 大小超过 40kb 微信小程序开发的过程之中总会出现这样或者那样的错误,需要我们耐 ...
- 微信小程序踩坑日记1——调用微信授权窗口
0. 引言 微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口.需要用户主动点击按钮,触发授权窗口. 那么,在我实践过程中,出现了以下问题. . 无法弹出授权窗口 . 希望在用户已经授权 ...
- 微信小程序踩坑之前端问题处理篇
近期完成了一个小程序,自己做的前后端开发.真是惨哭我了o(╥﹏╥)o,下面几点希望大家可以避雷. 首先,想先介绍一下我遇到问题的解决思路: 1.先在postman调试接口,看数据获取是否正常, 2.在 ...
- 微信小程序踩坑
微信小程序自定义属性data-xx使用注意事项 data-xx采用驼峰式命名时,数据传递打印显示(以jxsName与jxsname打印显示对比) data-xx全小写命名时,数据传递打印显示
- 微信小程序踩坑记
1:微信小程序之去掉横向滑动滚动条 /** 去除横向滚动条 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } 2: ...
- 微信小程序踩坑之一[thist]使用技巧
刚上手小程序 时,习惯把this当成jquery中的$(this)来用,实际上这两个还是有差别的 在页面方法中调用其他方法,一般是用this.function(),直接调用小程序 的方法或函数则是用w ...
- 微信小程序踩坑之一[wx.request]请求模式
最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...
- 微信小程序踩坑日记2——实时访问数据库并渲染UI
0. 引言 主要讲讲对于实时访问数据库并渲染UI我的解决方法. 一开始查到了随让小程序是单线程的,但是有一个基本上是封装的worker线程,相当于可以自己自定义(类似于Android开发里的handl ...
随机推荐
- 去除腾讯视频logo水印
打开F12,然后再console中输入下面代码,即可. document.querySelectorAll(".txp_waterMark_pic").forEach(functi ...
- Nginx超详细常用功能演示,够用啦~~~
前言 Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服 ...
- ElasticSearch7使用指导
目录结构: 一.es概述 二.es安装/head插件安装/kibana安装 三.es核心概念 四.IK分词器 五.RestFul操作 六.CRUD(增删改查) 七.Springboot集成es --- ...
- docker容器与容器的关联
可以通过docker run -it -d --link 容器id 镜像id 方式关联 例如,将springboot项目容器与mysql容器相互关联,让springboot容器可以访问到mysql ...
- Django(31)模板中常用的过滤器
模版常用过滤器 在模版中,有时候需要对一些数据进行处理以后才能使用.一般在Python中我们是通过函数的形式来完成的.而在模版中,则是通过过滤器来实现的.过滤器使用的是|来使用. add 将传进来的参 ...
- 从零搭建springboot服务03-redis消息订阅
愿历尽千帆,归来仍是少年 1.所需依赖 <!-- Redis依赖 --> <dependency> <groupId>org.springframework.boo ...
- H5开发基础之像素、分辨率、DPI、PPI
H5开发基础之像素.分辨率.DPI.PPI html5 阅读约 4 分钟 2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小 ...
- vue实例属性之el,template,render--(转载)
转载链接:https://www.cnblogs.com/camille666/p/vue_instance_prop_el_template_render.html 一.el,template,re ...
- 云计算OpenStack核心组件---cinder存储服务(10)
一.cinder介绍 1.Block Storage 操作系统获得存储空间的方式一般有两种: (1)通过某种协议(SAS,SCSI,SAN,iSCSI 等)挂接裸硬盘,然后分区.格式化.创建文件系统: ...
- 手机POS机
资质查询 http://www.pbc.gov.cn/zhengwugongkai/127924/128041/2951606/1923625/1923629/d6d180ae/index4.html ...