微信小程序登陆流程详详详解 看这一篇就够了
小程序的登陆流程不同于网页端的登陆，步骤多较繁琐，这里主要讨论前端的具体实现。
一. 登陆流程详解
微信官方的流程图
- 这个时序图信息量很多，我们把它拆解开来，代码上纵向我们只用关心“前端”，之后重点关心红框里的第一步和第二步，从简单入手。
1. 第一步：code换自定义登陆态
前端：
- 使用微信api wx.login() 获取小程序的登录凭证code
- 通过接口向后端发送code换取自定义登录态比如token，jwt等。
- 如果需要统一微信平台下的身份，如微信公众号，或PC端的微信登陆用户，一般在登陆的同时会调用 wx.getUserInfo() 获取到加密信息，再将加密数据通过后端接口返回给后端，之后拿到用户的openId或是unionId，确认用户身份。
提一下后端工作：
- 拿到code，结合小程序 appId、小程序 appSecret向微信接口服务（微信服务器）发请求，拿到的返回值中有openId和session_key等。这两项，一项是用户唯一标识，一项是会话密钥（用于解密微信的加密数据如手机号等，不是永久有效，所以称之为会话密钥，前端可用wx.checkSession()检测）
- 拿到加密数据，使用上一步保存的session_key进行解密，之后得到有用的开放数据，进行数据储存或返回前端展示。
2. 第二步：储存自定义登陆态
- 使用小程序的数据缓存，保存自定义登录态。
3. 附加的第三步
- 自定义封装wx.request()，发起业务时带上自定义登陆态。
- 在小程序生命周期onLuanch中加上登陆判定，如果登陆过就继续，如果没有登陆过则进行登陆操作等。
二. 上代码
- 笔者单独将登陆作为一个页面，如若无此需求，也可将代码拆分。
login.wxml
- 笔者的小程序是必须要获取用户信息的，所以直接在button授权获取用户信息的触发事件里，写登陆逻辑。
非必要第一时间获取用户信息的小程序可直接在其他地方写登陆逻辑。
<!--login.wxml片段-->
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
login.js
- showToast ()：用wx.showToast()封装的函数，用于提示反馈
- request()：用wx.request()封装的基于promise的函数，可统一处理错误、加入url前缀、带上登录态、权限判定等等。
Page({getUserInfo() {showToast('登陆中...', 'loading')wx.login({success: ({ code }) => {// 1. 拿到code发送给后端request({url: 'https://地址demo/wechat/mini/token',data: { code }}).then(({ result }) => {// 2. 将自定义登录态，例如token储存wx.setStorageSync('token', result.token)wx.getUserInfo({success: data => {// 3. 将加密用户信息发送至后端解密request({url: 'https://地址demo/wechat/mini/userinfo',data: {token: result.token,payload: data},method: 'POST'}).then(({ result }) => {showToast('登陆成功', 'success')// 保存用户信息wx.setStorageSync('userinfo', result)// 跳转页面...})},fail: () => {showToast('请授权用户信息后重试！')}})})},fail() {showToast('网络状况不佳，请检查网络后重试！')}})}
})
request.js
使用wx.request()封装的基于Promise的函数。
const request = ({ url, data = {}, method = 'GET' }) => {return new Promise((resolve, reject) => {wx.request({// 其实可以在这里统一处理url前缀，就不演示了url,data,method,// 一种做法，在header中带上登录态，方式取决于和后端的约定header: {Authorization: wx.getStorageSync('token')},success: res => {if (res.statusCode === 200) {resolve(res.data)} else {// 自定义错误处理 reject()if (res.statusCode === 403) {...} else if (res.statusCode === 401) {...}}},fail: () => {reject()showToast('请求失败，请检查网络后重试！')}})})
}export default request
app.js
如果是必要登录的小程序，可在app.js中去判断登录态和登陆态时效，以跳转登陆。
App({onLaunch() {const token = wx.getStorageSync('token')if (!token) {wx.reLaunch({ url: '/pages/login/login' })}}
})
三. 扩展提升：小朋友，你是不是有很多的问号？
1. 为什么要用wx.login()微信api，为什么不能用户名密码登陆？
- 小程序运行在微信客户端内部，遵循微信的机制就可以获取到用户的很多信息，比如昵称、头像url、性别、省份、城市、国家，以及加密信息openId（同一应用下唯一标识）、unionId（微信平台唯一标识）、手机号、微信号等等。使用wx.login()获取code是拿到这一系列信息的第一步。
2. 用户唯一标识为什么不能用微信号，openId和unionId是什么？
- 微信号在第一次注册微信之后会有一次修改机会，所以不能用微信号作为用户唯一标识。
- openId是用户在同一应用下的唯一标识，换句话说，就是一个用户登陆了小程序，之后用户改了微信号再次登陆或者是其他操作，用户的openId是不变的，可以用来当作唯一标识。
- unionId用微信的原话解释：只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionId是唯一的。
- ps：如果未涉及到微信开放平台的用户同一，即如果只是单一应用，就不用管unionId。
3. 如何判断登陆态过期？
- 后端向前端签发的登录态一般是存在过期时间的。
- 小程序没有浏览器的cookie来进行定时储存。
- 提供一种解决方法，可以让后端在签发登录态时，顺便加上登录态过期时间戳，这样每次打开小程序的onLaunch的时候进行判断，如果快要过期则重新请求刷新登录态。
- 当然也可能或许大概存在用户连续使用小程序24小时或更久不关闭，导致登录态直接过期的情况，针对这种情况，就要特殊处理了，这里不再赘述。
4. 为什么不使用bindgetuserinfo回调的detail来获取用户信息？
- 拿到用户信息必须使用button来触发授权，用户在点击授权之后，一可以从button绑定的bindgetuserinfo回调事件中的e.detail.userInfo拿到，二在授权之后就可以用wx.getUserInfo()随时获取到用户信息。
- 如果不需要解密数据，以上两种二选一。
- 注意：当需要后端解密的时候，顺序很关键，必须要先调用wx.login()拿到code，等同于后端先拿到session_key，再将加密数据给后端解密才能成功。
- 代码里先触发了bindgetuserinfo，如果用回调的detail解密，就等于wx.login()在后，顺序颠倒，则解密失败。所以在这里额外用wx.getUserInfo()来获取用户信息。
博主初来乍到，多多支持，如有错误和疑问，欢迎留言加关注，共同学习进步！
微信小程序登陆流程详详详解 看这一篇就够了相关推荐
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
- 代理后台中间件_Golang Gin 实战（十三）| 中间件详解看这一篇就够了
6000字大章带你死磕Golang Gin中间件 在Gin的整个实现中,中间件可谓是Gin的精髓.一个个中间件组成一条中间件链,对HTTP Request请求进行拦截处理,实现了代码的解耦和分离,并且 ...
- 微信小程序开发工具调试界面鼠标看不见
微信小程序开发工具调试界面鼠标看不见 参考 该贴<模拟鼠标消失> 解决方法: 打开"控制面板",在右上角搜索"鼠标" 点击"鼠标" ...
- 微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
- 微信小程序框架(二)-全面详解（学习总结---从入门到深化）
目录 组件_基础视图 容器 view 文本 text 图片 image 组件_滑块视图容器 基本实现 Swiper常用属性说明 组件_滚动视图区域 水平滚动 垂直滚动 常用属性 组件_icon 图标使 ...
- 微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录 路由_navigateTo 页面跳转 携带参数 返回上一级页面 路由_redirectTo 页面跳转 路由_reLaunch 页面跳转 路由_switchTab 实现 tabbar 页面跳转 交 ...
- 新手微信小程序制作教程步骤详解！
制作微信小程序方法: 1.在微信公众平台上申请一个小程序账号,申请完成之后需要进行微信认证,并且需要缴纳300元的认证费用.如果不缴纳300元的费用,微信小程序商城没有开通支付功能. 2.新建一个空白 ...
- 微信小程序按钮Button使用详解
最近在出微信小程序系列教程 顺手写了点博客 欢迎大家关注 button 用来实现按钮点击效果,本文章效果如下: 1 wxml 文件中 在这里我就放了三个普通的按钮 <view class=&qu ...
- 微信小程序 this和that详解及简单实例
微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报 ...
- 微信小程序系列4——传值详解
前言 在开发程序过程中,会遇到各种各样的传值的情景,例如:页面之间的传值.回调.代理.通知等.而在微信小程序中,传值的方式和Android和iOS的方式有一定的异同. 微信小程序使用的数据传值方式 ...
最新文章
- 什么叫序数_硬质合金是钨钢吗？两者之间有什么区别？
- 中文NER任务简析与深度算法模型总结和实战展示 转 作者原创的不错，很有水平，需要研读
- 2020年 | 云计算发展的5大趋势
- node-sass 下载失败 解决方案
- linux grpc,grpc linux下的编译使用-Go语言中文社区
- 如何分析线程转储– IBM VM
- 【渝粤教育】国家开放大学2018年秋季 1167t环境水利学 参考试题
- Verilog经验总结
- Leetcode每日一题:4.寻找两个有序数组的中位数
- mysql批量导入txt数据_MySQL批量导入Excel、txt数据
- 第一章 ArcGis Server简介
- 6.Exchanger-交换机
- Inception V1-V4
- 数据库备份工具mysqldump重要参数详解
- 颜色的前世今生4·孟塞尔色空间
- 吴文俊应用计算机进行几何定理的证明,吴文俊先生的吴方法怎么用？如何用吴方法证明几何定理？...
- android 投屏 车载,车载投屏怎么连接
- 欢迎清风艾艾在ITPUB博客安家!
- 软考常考的四种设计模式
- 美国主机中的RAID磁盘是什么意思？