Vue3 UniApp 微信小程序登录流程与 Pinia 状态管理实现

作者:南栀时间:2026-10-31 13:17:47浏览:367

本文详解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实现微信登录的功能介绍完毕。如需了解更多相关内容,建议查阅本站过往文章或继续浏览后续章节,感谢支持。

作者最新文章