微信小程序的注册和登录 ——学习记录

今天学习了微信小程序的登录注册，下面就是把我的思路以及做法写下来。

前提：本案例是配合API工厂的后台接口实现的

一、流程图（看一张流程图来了解怎么实现登录注册）

前端开发需要做的任务就是从小程序到开发者服务器这一条线路的工作流程,
开发者服务器到微信接口服务是后台人员的解密拿openid和session_key的工作。

首次登录：

1、首先需要调用小程序api接口 wx.login() 获取 临时登录凭证code ，这个code是有过期时间的。
2、将这个code回传到开发者服务器（就是请求开发者服务器的登录接口，通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等）。
3、拿到开发者服务器传回来的会话密钥（session_key）之后，前端要保存wx.setStorageSync(‘sessionKey’, ‘value’)
注：其实说白了就是，在微信接口也就是后台，拿到我们需要的coke,iv,appecrct,并将它保存在开发者服务器，获取到coke等信息后并判断其是否过期，然后就是调用封装好的接口。

再次登录的时候，就要判断存储的session_key是否过期了：

1、获取缓存中的session_key，wx.getStorageSync(‘sessionKey’)
2、如果缓存中存在session_key，那么调用小程序api接口wx.checkSession()来判断登录态是否过期，回调成功说明当前 session_key 未过期，回调失败说明 session_key 已过期。登录态过期后前端需要再调用 wx.login()获取新的用户的code，然后再向开发者服务器发起登录请求。
3、一般在项目开发，开发者服务器也会对用户的登录态做过期限制，所以这时在判断完微信服务器中登录态如果没有过期之后还要判断开发者服务器的登录态是否过期。（请求开发者服务器给定的接口进行请求判断就好）。
4、无论是微信服务器过期了还是开发者服务器登录态过期了，都要像首次登录那样开始三步骤。所以注意封装代码。

二、效果视频

二、代码实现

首先是给页面加上一个弹出层，在弹出层上有一个点击允许的按钮和暂不登录的按钮。（注意，在这里我的弹出层是一个组件）
组件：（文件夹名：xhy_user_dialog下有四个文件，分别是.wxss、.wxml、js、json）
在.wxml文件

<button type="primary"  open-type="getUserInfo" bindgetuserinfo="getUserinfo">允许</button>
<button type="default" catchtap="getUserinfo">暂不登录</button>

js组件

思路：给这两个按钮一个点击事件，允许这个按钮因为有open-type这个事件，所以这两个按钮可以设置同一个事件，但是获取的数据有一点不太一样。因此可以同时用一个事件。

// components/xhy_user_dialog/xhy_user_dialog.js
Component({
   
  /**
   * 组件的属性列表
   */
  properties: {
   
    "img":{
   
      type:String,
      value:"/assets/user.png"
    },
    "impower":{
   
      type:String,
      value:"授权登录"
    },
    "impower1":{
   
      type:String,
      value:"请授权小程序登录"
    },
    "impower2":{
   
      type:String,
      value:"我们不会公布您的这些信息"
    },
    "impower3":{
   
      type:String,
      value:"只是为了给您提供更好的服务"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
   
    isShow:true,//这个是判断那个弹出层是否让它出现，默认是显示的
  },
  //组件与页面相关的生命周期
  pageLifetimes:{
   
    //判断进入页面的弹出框是否显示
    // show 方法就是 页面被展示
    show(){
   
      //拿到的是本地的数据
      const token = wx.getStorageSync('token')
      consol