微信小程序开发之——用户登录-登录流程(1)

一 概述

• 新建微信小程序自带用户登录简化
• 小程序登录流程时序

二 新建微信小程序自带用户登录简化

新建的微信小程序默认有用户登录功能，将多余功能去除后，简化如下

2.1 index.wxml

2.2 index.wxss

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}

.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

2.3 index.js

Page({})

2.4 效果图

三 小程序登录流程时序

3.1 登录流程时序

3.2 登录中的三个角色

• 小程序：用户使用的客户端，由于小程序运行在微信之上，因此小程序可以通过API获取微信用户的身份信息
• 开发者服务器：小程序的后端服务器，用于为小程序用户提供服务
• 微信接口服务：微信为开发者服务器提供的接口

3.3 登录流程说明

3.3.1 小程序获取code

• 在小程序中通过wx.login()获取登录凭证code
• code由小程序内部自动生成，每次调用wx.login()获得的code都不同
• code有效期为5分钟，且被微信接口服务验证一次后就会失效

3.3.2 小程序将code发送给开发者服务器

• 在获取code后，使用wx.request()将code发给开发者服务器

3.3.3 开发者服务器通过微信接口服务校验登录凭证

• 开发者服务器将AppId、AppSecret、code发给微信接口服务校验登录凭证
• 如果校验成功，返回session_key和openid等

3.3.4 开发者服务器自定义登录态

• 登录成功后，开发者服务器将openid和session_key保存，然后生词一个自定义登录态的token(令牌)形影给小程序
• 通过token可以查询到openid和session_key
• 小程序下次请求，只要携带token，就可以证明用户已登录

3.4 数据缓存

异步方式

方式	名称	说明
异步	wx.setStorage()	将数据存储到本地缓存中指定的key中
异步	wx.getStorage()	从本地缓存中获取指定key的内容
异步	wx.getStorageInfo()	异步获取当前storage的相关信息
异步	wx.removeStorage()	从本地缓存中移除指定key

同步方式

方式	名称	说明
同步	wx.setStorageSync()	将数据存储到本地缓存中指定的key中
同步	wx.getStorageSync()	从本地缓存中获取指定key的内容
同步	wx.getStorageInfoSync()	获取当前storage的相关信息
同步	wx.removeStorageSync()	从本地缓存中移除指定key

四 参考源码

• 参考源码