微信小程序授权微信手机号踩坑，第一次无法获取到手机号，第二次成功的解决方案

开发工具：uniApp

使用场景：点击按钮一键获取微信用户号手机号，并进行登录。

过程解析：

要获得手机号，前端需要实现以下的代码：

<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="default">微信一键登录</button>

写好了以上内容，我们就需要通过回调函数getPhoneNumber来获得返回给我们的信息，通过以下的代码我们可以发现，系统返回了一个对象数据。其中包含的encryptedData、iv就是我们想要的信息。通过这个信息再配合uni.login(res)返回给我们的code，再传给后台，后台通过sessionKey进行解密，通过接口就可以拿到我们想要的手机号了。

getPhoneNumber(e){console.log(e.detail)
},

我们继续完善一下上面的js代码：

getPhoneNumber(e){console.log(e.detail)uni.login({success: (res) => {if(e.detail.errMsg == "getPhoneNumber:ok"){_this.$reqHttp({url:'/user/wx-login',data:{code:res.code,iv:e.detail.iv,encryptedData:e.detail.encryptedData,},success:(res) => {if(res.data.success){//成功时候的要做的动作}else{}},})}else{_this.$message("微信登录授权失败")}},fail: () => {_this.$message("微信登录授权失败")}})}

通过以上代码，我们理论上会获取到微信用户的手机号。但是，第一次无法获取到。主要原因是在回调中调用 uni.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。

那么现在已经找到原因了，我们再将上面的改写一下。

onload(){uni.login(res){uni.setStorageSync('wxcode',res.code)}
},
methods:{
getPhoneNumber(e){console.log(e.detail)uni.login({success: (res) => {if(e.detail.errMsg == "getPhoneNumber:ok"){_this.$reqHttp({url:'/user/wx-login',data:{code:res.code,iv:e.detail.iv,encryptedData:e.detail.encryptedData,},success:(res) => {if(res.data.success){//成功时候的要做的动作uni.setStorageSync('wxcode',res.code)}else{}},})}else{_this.$message("微信登录授权失败")}},fail: () => {_this.$message("微信登录授权失败")}})}
}

参考资料：https://blog.csdn.net/hl18730262380/article/details/89671346

微信小程序授权微信手机号踩坑，第一次无法获取到手机号，第二次成功的解决方案相关推荐

java微信小程序授权微信登录获取手机号
微信小程序获取手机号流程 1.先调用微信登录wx.login()获取code,通过code在后台获取session_key和openid(为了安全方面的原因,请不要直接使用这些信息作为你小程序的用户标 ...
微信小程序插件下发优惠券踩坑
辛辛苦苦摸索一天多,一把辛酸泪. <send-coupon @click='bindsendcoupon()' :send_coupon_params="send_coupon_par ...
微信小程序项目转uniapp踩坑日记
本文目录一.前言二.转换方式三.后语四.其他:node报错 1.包默认C盘存放,而不是安装目录E盘 2.正确的环境变量添加 3.npm install 命令报错 4.npm install - ...
微信小程序wepy框架+minui踩坑之路
近期项目涉及微信小程序,鉴于原生小程序文件结构过于复杂,决定使用wepy框架开发 wepy框架类似Vue的MVVM开发模式,并且支持promise与ES7 asnyc异步函数,记录一下项目开发过程中 ...
微信小程序录制视频方法踩坑总结
** 工作中需要微信小程序实现录制15s视频上传,部分用户反馈无法录制视频的问题,所以在此总结一下经验 ** 下面这张图片这是问题的表现,部分机型用户松开拍摄时提示未完成拍摄,导致无法上传视频. 上面 ...
微信小程序真机调试踩坑
今天调试微信小程序的时候,发现我的手机(红米)调试微信小程序时功能正常,为了测一下兼容性,借了同事的苹果手机来调试,结果发现不能正常进去调试页面,扫码之后白屏.我以为是安卓系统和IOS系统的问题,我查 ...
微信小程序短剧开发技术踩坑指南仿抖音快手小视频
1.Video组件微信官方文档地址: https://developers.weixin.qq.com/miniprogram/dev/component/video.html uniapp官方文档 ...
微信小程序和webview通信踩坑（表单篇）
背景为了适配多端小程序,通用的功能一般采用webview的方式引入小程序,这次的移动管理端也不例外. 需求 h5表单的地图选择功能.如下所示: 可行性分析方案: 引入第三方地图使用微信sdk的地 ...
【微信小程序】 wx.onBluetoothDeviceFound 安卓机第一次可以连接蓝牙设备，第二次搜索不到问题
问题: wx.onBluetoothDeviceFound 安卓机第一次可以连接蓝牙设备,第二次搜索不到问题原因: wx.onBluetoothDeviceFound这个方法只能找到新的蓝牙设备,之 ...

微信小程序授权微信手机号踩坑，第一次无法获取到手机号，第二次成功的解决方案

微信小程序授权微信手机号踩坑，第一次无法获取到手机号，第二次成功的解决方案相关推荐

最新文章

热门文章