vue3 uniapp微信登录

根据最新的微信小程序官方的规定,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

相关推荐

  1. vue 扫码登录

    2024-04-20 16:26:03       46 阅读
  2. 使用uniApp+vue3+Vite4+pinia+sass技术栈构建小程序

    2024-04-20 16:26:03       34 阅读
  3. 小程序uniapp+vue3+ts+pinia的环境搭建

    2024-04-20 16:26:03       20 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-04-20 16:26:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-20 16:26:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-20 16:26:03       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-20 16:26:03       20 阅读

热门阅读

  1. Spring Cloud 面试题(一)

    2024-04-20 16:26:03       12 阅读
  2. 代码随想录 day44 第九章 动态规划 part06

    2024-04-20 16:26:03       14 阅读
  3. Spring框架中的11种设计模式(设计模式之美)

    2024-04-20 16:26:03       14 阅读
  4. 【LeetCode热题100】【贪心算法】划分字母区间

    2024-04-20 16:26:03       10 阅读
  5. vue admin pro 角色不同显示不同页面

    2024-04-20 16:26:03       14 阅读
  6. 【LeetCode热题100】【图论】岛屿数量

    2024-04-20 16:26:03       10 阅读
  7. 2-内核开发-第一个内核Hello模块开发案例

    2024-04-20 16:26:03       12 阅读
  8. Avi Wigderson:理论计算科学的先驱者与图灵奖得主

    2024-04-20 16:26:03       14 阅读
  9. 五个关于CSS3的常见面试题及其答案

    2024-04-20 16:26:03       12 阅读