微信小程序实现一键登录

2025-06-12 发布在行业资讯7

本文实例为大家分享了微信小程序实现手机号登录的具体代码，供大家参考，具体内容如下

项目需求

点击按钮获取用户电话号码绑定到后台，登录。

实现思路

1、使用微信开放功能为获取用户手机号的button按钮绑定点击事件为获取用户授权。2、如果获取用户手机号授权成功调用微信登录接口获取code。3、用获取到的code去调用后台接口获取到用户的openid。4、code+openid去调用后台写的小程序自动登录接口获取到access_token，至此登录功能完成。5、查询用户是否绑定过手机号，未绑定就去调用绑定手机号的接口。绑定过就直接提示登录成功，根据自己项目需求跳转页面，我是直接返回到上一页。

关键代码

<button open-type="getPhoneNumber" class="button" bindgetphonenumber="author"> <image class="button-img" src="../../assets/images/wx_icon@2x.png"></image> <text>微信一键授权登录</text> </button> // wxss @import '../../common.less'; .button { width: 80%; height: 88rpx; display: flex; background: @baseColor1; color: #fff; font-size: 30rpx; border: none; border-radius: 44rpx; justify-content: center; align-items: center; font-weight: 400; margin: 254rpx auto 74rpx; .button-img { width: 56rpx; height: 40rpx; margin-right: 6rpx; } } // login.js /** * 用户点击一键授权登录按钮 */ author(e) { if (e.detail.errMsg === 'getPhoneNumber:ok') { this.login(e); } }, /** * 用户登录 */ login(e) { let that = this; // 微信获取登录code wx.login({ success(res1) { if (res1.code) { wx.setStorageSync('code', res1.code); // 后台获取用户openid app.api.user.getOpenID({ code: res1.code }).then(res2 => { if (res2.code === 2000) { wx.setStorageSync('openid', res2.data.openid); wx.setStorageSync('session_key', res2.data.session_key); // 后台小程序自动登录 app.api.user.autologin({ openid: res2.data.openid, code: res1.code }).then(res3 => { if (res3.code === 2000) { // 至此登录完成 wx.setStorageSync('access_token', res3.data.access_token) // 查询用户是否绑定过手机号 app.api.user.info().then(res4 => { if (res4.code === 2000) { if (res4.data.bind === 2) { app.toast('登录成功', 'none'); that.goBack(); } else { // 未绑定手机号，去绑定 that.getPhoneNumber(e); } } else { app.toast(res4.msg, 'none'); } }) } else { app.toast(res3.msg, 'none'); } }) } else { app.toast(res2.msg, 'none'); } }) } else { app.toast('登录失败！' + res1.errMsg); } } }) }, /** * 绑定用户手机号 */ getPhoneNumber(e) { // 判断session是否失效 app.check.session((res) => { let token = wx.getStorageSync('access_token'); let session_key = wx.getStorageSync('session_key'); app.api.user.bindphone({ token, session_key, encryptedData: e.detail.encryptedData, iv: e.detail.iv }).then(res => { if (res.code === 2000) { app.toast('绑定成功', 'none'); this.goBack(); } else { app.toast(res.msg, 'none'); } }).catch(err => { app.toast('绑定手机号失败', 'none'); }) }, this.getPhoneNumber, e) } // utils/check.js let api = require('../api/index'); let toast = require('./toast'); let check = {}; /** * session是否过期 * @param {function} success seesion_key未过期时调用的方法 * @param {function} error seesion_key过期时调用的方法 * @param {eventhandle} e getPhoneNumber传参 */ check.session = (success, error, e) => { wx.checkSession({ //session_key 未过期，并且在本生命周期一直有效 success, fail() { // session_key 已经失效，需要重新执行登录流程 wx.login({ success(res1) { if (res1.code) { wx.setStorageSync('code', res1.code); // 后台获取用户openid api.user.getOpenID({ code: res1.code }).then(res2 => { if (res2.code === 2000) { wx.setStorageSync('openid', res2.data.openid); wx.setStorageSync('session_key', res2.data.session_key) // 后台小程序自动登录 api.user.autologin({ openid: res2.data.openid, code: res1.code }).then(res3 => { if (res3.code === 2000) { wx.setStorageSync('access_token', res3.data.access_token) error(e); } }) } }) } else { toast('登录失败！' + res.errMsg); } } }) } }) } module.exports = check;