vue3 uniapp微信登录

原创已于 2024-04-14 22:31:57 修改 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信

于 2024-04-14 22:31:52 首次发布

本文介绍了微信小程序官方关于uniapp中getUserInfo方法的新规定，不再直接返回用户头像、昵称和手机号。开发者需通过code获取openid等信息，通过后台接口进行登录并使用pinia存储token以实现持久化。

根据最新的微信小程序官方的规定，uniapp中的uni.getUserInfo方法不再返回用户头像和昵称、以及手机号

首先，需获取appID，appSecret，如下图

先调用uni.getUserInfo方法获取code，然后调用后台的api，传入code，换取登录信息比如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存入本地即可

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