第一步:首先是获取用户信息

1.建议使用的技术:wx.getUserProfile(Object object)

wxLogin() {// 第一步是获取微信用户的基本信息wx.getUserProfile({// 描述你获取我手机上的微信app的登录用户的作用desc: "用于完善会员资料",//弹出授权框之后,你点击允许 successsuccess: (res) => {console.log(res);},//弹出授权框之后,你点击取消 fail// fail: (err) => {// }})}

注意:会出现报错情况,或者是点击无法出现弹框情况,一般是可以检查自己开发ID,或者是更改小程序开发的版本,版本过高也是无法显示.

第二步:在授权登录之后,拿到用户信息

解决问题, 怎么让个人中心页面使用我们登录页面的信息

总结: 两个页面怎么共享数据

方法一: vuex

方法二: 存储到本地(localstorage , sessionstorage)

两种方法都可以,根据自己需求进行选用

1.拿到数据之后,我们把用户信息存到本地:wx.setStorageSync(string key, any data)

2.存到本地之后,接下来就是继续登录,拿到微信服务端给的code值

````js
wx.login({success:(res)=>{// 得到code的值}
})````

3.发异步请求,访问后台,请求拿到code值,拿到的值,需要转化成字符串

wx.login({success: async res => {// console.log(res);// 拿到code访问后台接口发请求let data = await api_loginCode({code: res.code});// console.log(data);// 把token存到本地wx.setStorageSync('token', JSON.stringify(data));// 全部做完 跳转到个人中心wx.reLaunch({url: '/pages/personCenter/personCenter'});}});

4.把请求拿回来的token值存到本地中,然后跳转到个人中心页面

// 全部都做完了,跳转到个人中心wx.switchTab({url: '/pages/personCenter/personCenter'})

5.登录完整代码:

methods: {wxLogin() {// 第一步是获取微信用户的基本信息wx.getUserProfile({// 描述你获取我手机上的微信app的登录用户的作用desc: '用于完善会员资料',//弹出授权框之后,你点击允许 successsuccess: res => {// console.log(res);// 把数据存到本地 本地是存的字符串  但是wx.setStorageSync是一个对象wx.setStorageSync('userInfo', JSON.stringify(res.userInfo));// 再次调用微信登录 需要拿到codewx.login({success: async res => {// console.log(res);// 拿到code访问后台接口发请求let data = await api_loginCode({code: res.code});// console.log(data);// 把token存到本地wx.setStorageSync('token', JSON.stringify(data));// 全部做完 跳转到个人中心wx.reLaunch({url: '/pages/personCenter/personCenter'});}});}});}}

第三步:跳转到个人中心页面

1.首先头部页面有两个,一个是未登录,一个是登录,需要根据userInfo信息来渲染

 <!-- 头部有两个 ,一个是登录转态的 --><view class="header" v-if="userInfo.nickName"><image class="userImg" :src="userInfo.avatarUrl" mode=""></image><view class='userInfo'><view @click="exit">退出登录</view></view></view><!-- 未登录状态的 --><view class="header" v-else><image class="userImg" src="../../static/images/personal/personal.png" mode=""></image><view class='userInfo'><view @click="tologin">未登录</view></view></view>

2.跳转到个人中心组件,相当于发送了异步请求,再定义变量,来接收本地存户的信息,拿到的值需要转化成对象形式

async mounted() {let userInfo = wx.getStorageSync('userInfo');// console.log(userInfo);if (userInfo) {// 有值代表登录 有值在转化为对象this.userInfo = JSON.parse(userInfo);// 有值 有登录 在发请求let res = await api_loginToken({token: JSON.parse(wx.getStorageSync('token'))});// console.log(res);this.info = res;} else {// 没有值代表没有登录}},

3.在有值的情况下,要发送请求,是要拿到个人中心,我的资产信息

第四步:退出登录

1.退出登录的话,是要清空用户信息,清空token信息

methods: {// 退出登录  清空本地存储 不能清空所有,只需要清空userInfo和tokengoback() {// wx.clearStorageSync();wx.removeStorageSync('userInfo');wx.removeStorageSync('token');wx.reLaunch({url: '/pages/personCenter/personCenter'});},tologin() {wx.navigateTo({url: '/pages/login/login'});}}

画图进行理解一下,关于小程序授权登录步骤:

小程序授权登录流程详情步骤相关推荐

提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
小程序授权登录流程及操作
小程序授权登录流程的简单分享前言一.判断有没有授权二.授权页面进行授权三.登录流程图总结前言做小程序最必不可少也比较复杂的就是授权登录啥的了.不同的项目会有不同的写法,这里把我之前的一 ...
新版微信小程序授权登录流程及问题汇总（getUserProfile）
问题来源:前不久去面试的时候有面试官问我你有自己的博客啥的吗?只能很尴尬的说没有.其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题,正好现在微信小程序比较流行,就花了两天自己搞了一个 ...
微信小程序授权登录流程
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 微信小程序官方API 说明 ...
小程序微信授权登录服务器异常,微信小程序授权登录流程（强制绑定手机号码）...
本文作为多平台用户登录模块设计的扩展设计,即以手机号作为用户的唯一凭证. (图片摘自 2018.10.30) 小程序与服务器是通过自定义登录态来识别用户身份的,以下简称口令(token). 由于微信未 ...
uniapp微信小程序授权登录流程（代码直接复制可用）
1.写一个点击登录的按钮 <view @tap="login">一键登录</view> 2.写点击事件 login() {wx.getUserInfo({s ...
支付宝小程序授权登录 (Java 后台篇)
支付宝小程序授权登录 (Java 后台篇) 开始 : 实现支付宝小程序授权登录功能, 本文主要是介绍支付宝小程序授权登录流程,与关键登录与处理代码. 流程 : 关键代码 : 1.获取用户信息 /*** ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序授权登录+手机发送验证码+jwt验证接口（laravel8+php）
参考博客小程序授权登录并 laravel7(laravel8) token 应用 - 王越666 - 博客园微信小程序sku商品规格选择器 - 简书微信小程序和 laravel8 实现搜索后分 ...

小程序授权登录流程详情步骤

第一步:首先是获取用户信息

第二步:在授权登录之后,拿到用户信息

第三步:跳转到个人中心页面

第四步:退出登录

小程序授权登录流程详情步骤相关推荐

最新文章

热门文章