之前也看过，老是记不住（还是不懂），今天好好整理一下。

首先是调用wx.login获取到一个code（临时登录凭证，一次性的，有效期短）

• openid是某一个人在某个小程序下的唯一id，换人或者换小程序都会变（其他小程序不能通过这个id认出这个用户）
• unionid就是某个人在不同小程序/公众号的unionid相同，可以用于多端数据合并（比如用户在小程序下单，去公众号查询订单）
• sessionKey是微信登录之后返回的一个临时密钥（给后端），当前端需要用户隐私数据的时候（比如手机号之类的），后端就拿这个密钥解密，解密完了把信息返回给前端

但是官方流程的话，是前端把code给后端，后端拿code+secret（小程序密钥）+appid 去掉微信服务器的接口，获取openid和sessionKey，unionid默认不返回，满足下面两个条件中的一个才会返回。

后端拿openid和sessionKey（+unionid）给微信服务器，返回token，这个token给前端之后还得存储在缓存中wx.setStorageSync

用于后续请求携带着就ok了。

1. 小程序已绑定到微信开放平台账号
   （需在微信开放平台完成绑定）。

2. 用户已关联同一开放平台下的其他应用
   （例如：用户曾登录过同开放平台的公众号、App 或其他小程序）。

其次是在登录之前其实应该得去检查一下token是否存在（wx.getStorageSync('sessionKey')）、登录态是否过期、token是否合法（后两个都是调用后端接口实现的），这三个中的任何一个不满足都要跳到登录的流程

getUserInfo(unionId, token) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://xxxxxxx/api/system/sign/getUserInfo',
        method: 'POST',
        header: {
          'Authorization': 'Bearer ' + token
        },
        data: {
          unionId
        },
        success(res) {
          resolve(res);
        },
        fail(err) {
          reject(err);
        }
      });
    });
  },

之后像这种wx.request的请求就把token放请求头就ok

然后就涉及到请求的问题了，我之前看微信小程序请求这部分的代码分为wx.request和直接request.post / get（貌似wx.request那种冗余了，可以直接用封装好的？）

后者是封装好的，从缓存中读取token放在请求头，...header是可能有自定义的请求头

// utils/request.js

const BASE_URL = 'https://xxxxxxxx/api';

function getAuthHeader() {
  const token = wx.getStorageSync('sessionKey');
  return token ? { Authorization: 'Bearer ' + token } : {};
}

function request(url, method, data, header = {}) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + url,
      method,
      data,
      header: {
        'content-type': 'application/json',
        ...header,
        ...getAuthHeader()
      },
      success(res) {
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else {
          wx.showToast({ title: '网络异常', icon: 'none' });
          reject({ status: 'fail', msg: '网络异常' });
        }
      },
      fail(err) {
        wx.showToast({ title: '网络请求失败', icon: 'none' });
        reject({ status: 'fail', msg: '网络请求失败', error: err });
      }
    });
  });
}

export default {
  get(url, data) {
    return request(url, 'GET', data);
  },
  post(url, data) {
    return request(url, 'POST', data);
  }
};

之后的api里的接口就可以直接简化写：

import request from '../util/request';

export default {
  //支付接口
  prepay(data) {
    return request.post('/shopFront/pay/prepay', data);
  },