uni-app微信小程序一键登录

原创已于 2025-09-01 17:28:19 修改 · 598 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信小程序 #小程序

于 2025-08-30 09:20:16 首次发布

前言

实现微信一键登录的流程:
① 微信小程序口端获取临时凭证code(code只能被消费一次)② 将code交给后端
③ 后端拿到code，向微信服务器Q发起请求，拿到openid(openid代表微信用户在一个小程序中的唯一标识，另外拓展一下unionid代表微信用户在企业中的唯一标识)
④ 后端查询数据库是否存在这个openid，存在则登录，返回token,不存在则注册账号，登录，返回token

流程图

主要使用如下方法

1、uni.getUserInfo()获取到用户的头像、昵称、手机号等信息，不过手机号需要企业身份才可以

uni.getUserInfo({
provider: 'weixin',
success: function(info) {

获取用户信息成功
console.log(info.userInfo)
}
})

2、通过uni.login() 拿到临时凭证code

uni.login({
provider: 'weixin',
success: function (loginRes) {
   //   打印临时凭证
   console.log(loginRes.code)
   }
});

核心代码

<button class="submit-btn" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"> 一键授权登录 </button>

/**
* 获取用户手机授权
* @param e 手机号授权事件对象
*/
const getPhoneNumber = async (e) => {
if (e.detail.errMsg !== 'getPhoneNumber:ok') return false

// 第一步

uni.getUserProfile({
desc: '获取你的昵称、头像、地区及性别',
success: (res) => {

                // 第二步

                uni.login({
                  provider: 'weixin',
                success: (res) => {
                if (res.code) {

                                const requestParams= {
                                    code: userCode as string,
                                    phoneCode: params.phoneCode,
            avatarUrl: params.wxUser?.avatarUrl, // 微信头像
                                  encryptedData: params.encryptedData,
  iv: params.iv,
sex: params.wxUser?.gender,
userName: params.wxUser?.nickName,
                                 }

// 第三步调用后端接口 ...

                } else {
                uni.showToast({
                  title: res.errMsg,
                  icon: 'none',
                  duration: 2000,
                  })
                  }
                },
                  fail: () => {
                  reject(new Error())
                  },
          })

},
fail: () => {
showToast('您拒绝了请求，暂时不能正常使用小程序', 'none')
},
})
}