【微信小程序】新版获取手机号码实现一键登录（uniapp语法）(完整版附源码) |
您所在的位置：网站首页 › 微信小程序一直登录中 › 【微信小程序】新版获取手机号码实现一键登录（uniapp语法）(完整版附源码) |
【微信小程序】新版获取手机号码实现一键登录（uniapp语法）(完整版附源码)
|
需求
如图，点击按钮，获取用户手机号实现一键登录，当然，用户也可以自行输入其他手机号进行登录 要想获取用户手机号并不复杂，但由于近几年微信小程序获取手机号的api进行了更新，当前很多帖子使用的仍是旧的方式，先调wx.login()获取code,iv,等等加密数据, 给到后端换取手机号, 现在这里说明的是更新后的获取手机号方式 ps : 现在获取手机号首先需要小程序进行认证, 然后每次调用收费0.03元 简单说明思路 : 1.wx.login() 获取code, 2.步骤1拿到的code发送给服务端换取唯一用户标识openid 3.调getPhoneNumber() 获取phoneCode 4. 步骤3获取的phoneCode和步骤2拿到的openId一起传给服务端获取手机号 5. 完成登录 1. 手机号快速验证组件↓ https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html *这里小小注意一下, uniapp回调写法@getphonenumber, 微信小程序bindgetphonenumber 手机号一键登录2. 在bindgetphonenumber回调中获取code动态令牌 getPhoneNumber(e) { // 在bindgetphonenumber回调中获取code动态令牌 loginFn().then(res => { // 微信登录&服务端获取openid console.log(res, '接口换取的openid') console.log('获取手机号的动态令牌:', e.detail.code) // 动态令牌 getPhoneNumberFn(e.detail.code, res.openid).then(res2 => { // 服务端获取手机号 if (res2.code == 0) { uni.setStorageSync('phoneNumber', res.content.phone_info.phoneNumber) uni.showToast({ title: '登录成功' }) } }) }) },3. login.js 函数封装 : 微信登录 / 服务端获取openid / 服务断获取手机号 // 服务端接口 - 获取openid function queryOpenIdFn(code) { return new Promise(resolve => { queryOpenId({ code }).then(res => { if (res.code !== 0) { console.log('获取openid失败1：', res.msg); return } uni.setStorageSync('openId', res.content.openid) resolve(res.content) }) .catch(err => { console.log('获取openid失败2：', err); }) }) } // 服务端接口 - 获取手机号 function getPhoneNumberFn(phoneCode, openId) { return new Promise(resolve => { getPhoneNumber({ code:phoneCode, openId }).then(res => { if (res.code !== 0) { console.log('获取手机号失败1：', res.msg); return } resolve(res) }) .catch(err => { console.log('获取手机号失败2：', err); }) }) } // 微信api : 微信登录 function loginFn() { return new Promise((resolve, reject) => { uni.login({ success: async (res) => { queryOpenIdFn(res.code).then(res => { resolve(res) }) }, fail: (err) => { console.log('login fail:', err); } }) }) } export { loginFn, getPhoneNumberFn } |
【本文地址】
今日新闻 |
推荐新闻 |