本文详解Vue3环境下UniApp实现微信小程序登录的完整流程。从获取AppID和Secret开始，介绍如何调用uni.getUserInfo获取code，通过后端接口换取openid及token，并结合Pinia进行状态持久化管理，确保用户登录状态在刷新后依然有效。
微信小程序登录规范与前置准备
依据最新微信小程序官方规范，UniApp框架中的uni.getUserInfo方法已不再直接返回用户头像、昵称及手机号等敏感信息。
实施前，需预先获取应用的AppID与AppSecret，具体位置可参考图示。
获取Code与后端交互流程
流程上，首先调用uni.getUserInfo方法以获取授权code，随后将该code传入后端API接口，从而换取openid等登录凭证。接着，调用后端的账号密码验证或手机验证码登录接口，获取访问令牌（token）并存储至本地。
uni.getUserInfo({
provider: 'weixin',
success: function(info) {
// 获取用户信息成功, info.authResult保存用户信息
uni.login({
provider: 'weixin',
success: function(loginRes) {
console.log(loginRes, '---loginRes')
wxLoginApi({
code: loginRes.code
}).then(res => {
if (res.code === '200') {
loginParamObj.value = res.data;
if (loginParamObj.value.bindStatus === '1') {
//已绑定，直接登录
// userStore.SET_FRESH_TOKEN(res.data.refresh_token)
} else {
// 留在登录页
initLoginStatus.value = true
}
}
})
},
fail: function(err) {
// 登录授权失败
// err.code是错误码
}
});
}
})Pinia状态管理与Token持久化
登录成功后，需结合Pinia状态管理库，将获取到的token持久化存储至本地，以维持用户登录状态。
import {
defineStore
} from 'pinia'
const user = defineStore(
'user', () => {
const token = ref(''); // 登录token
const fresh_token = ref('');
const SET_TOKEN = (value : string) => {
token.value = value
};
const SET_FRESH_TOKEN = (value : string) => {
fresh_token.value = value
};
return {
token,
fresh_token,
}
}, {
unistorage: true // 开启后对 state 的数据读写都将持久化
})
// const user = ()=>{
// }
export default user至此，关于Vue3结合UniApp实现微信登录的功能介绍完毕。如需了解更多相关内容，建议查阅本站过往文章或继续浏览后续章节，感谢支持。