小程序账号设置以及request请求的封装

一般开发在小程序时，都会有测试版和正式版，这样在开发时会比较方便。

在开发时。产品经理都会给到测试账号和正式账号，后端给的接口也都会有测试环境用到的接口和正式环境用到的接口。

这里讲一讲我这边如何去做的。

1.在更目录随便命名一个以.js结尾的文件，

2.写入自己环境的选择

这里先用const命名常量，其中ENV_TEST为测试环境，ENV_PRODUCT为正式环境，然后用ENV去设置测试环境还是正式环境，用测试环境，就把const ENV = ENV_PRODUCT注释掉，反之把测试环境注释掉。这里的appid是在小程序中申请账号时得到的。在微信开发者工具修改的话可以在右上角详情里面的appid那里点击修改。

然后我们看ApiBaseUrl，下面那个ApiBaseUrl1不看。你会发现有个if判断，这个判断主要是判断是正式环境还是测试环境，正式环境的话，我们就可以写上协议（https）和域名（类似与192.168.10.107），可以看到我这边测试环境用到的是"https://devapi/"开头，正式环境是"https://api/"开头，后面的端口都是不一样的，所以不写在里面。

最后可以用module.exports将数据暴露出来。（不调用是无法获取到数据的）所以要先引用再获取数据。

下面为request请求封装展示例子：

import md5 from 'blueimp-md5'//请求用MD5加密
import {
  userCache
} from "../../utils/storage/user.js"
const config = require("../../config.js")
const env = config.ENV
const apiBaseUrl = config.ApiBaseUrl
const salt = config.SignatureSalt

class Api {

  constructor() {
    // 从缓存中获取token
    const appUserInfo = userCache.getAppUserInfo()
    if (appUserInfo !== null && appUserInfo.hasOwnProperty('token')) {
      this.token = appUserInfo.token
    } else {
      this.token = null
    }
  }

  request({
    url, // 请求url地址
    data, // 请求数据
    method = "GET", // 请求方式
    header = {}, // 请求头
    timeout = 10000, // 请求超时时间 默认2000毫秒
    dataType = "json", // 返回数据格式
    responseType = "text", // 响应的数据类型
  }) {
 
    // 设置签名
    const timestamp = Math.round(new Date().getTime() / 1000).toString()
    const randomStr = Math.random().toFixed(10).slice(-10)
    const signature = md5(randomStr.toString() + timestamp.toString() + salt)

    let baseHeaders = {
      "content-type": "application/json",
      "CLIENT": "wx-xcx-v1.0.0",
      "TIMESTAMP": timestamp,
      "RANDOMSTR":randomStr,
      "SIGNATURE": signature,
    }
    let headers = Object.assign(baseHeaders, header)//Object.assign合并对象方法

    // 判断登录状态
    if (loginStatus) {
      headers = Object.assign(headers, {
        "Authorization": "jwt " + this.token
      })
    }
    wx.request({
      url: apiBaseUrl + url,
      data: data,
      header: headers,
      timeout: timeout,
      method: method,
      dataType: dataType,
      responseType: responseType,
      success: function (res) {
        const code = res.statusCode
        const data = res.data
        if (code === 200) {
          wx.showToast({
            title: detail,
            icon: 'none',
          })
          return false
        }
        // 判断data是否是对象
        if (data.constructor !== Object && code === 404) {
          wx.showToast({
            title: "接口地址错误",
            icon: 'none',
          })
          return false
        }
        
      },
      fail: function (res) {
        // 处理特殊fail的方法
        if (fail) {
          fail(res);
          return;
        }
        const errMsg = res.errMsg
        if (errMsg.indexOf("timeout") !== -1) {
          wx.showToast({
            title: "超时啦，请稍后再试。",
            icon: 'none',
          })
        } else if (errMsg.indexOf("fail") !== -1) {
          wx.showToast({
            title: "失败啦，请稍后再试。",
            icon: 'none',
          })
        } else {
          wx.showToast({
            title: res.errMsg,
            icon: 'none',
          })
        }
      },
      complete: function (res) {
        wx.hideNavigationBarLoading()
        if (complete) {
          complete(res)
        }
      }
    })
  }

  post(obj) {
    // 判断是对象
    if (Object.prototype.toString.call(obj) !== '[object Object]') {
      throw new Error('obj必须是对象。')
    }
    this.request(Object.assign(obj, {
      method: "POST"
    }))
  }

  get(obj) {
      console.log(obj);
    // 判断是对象
    if (Object.prototype.toString.call(obj) !== '[object Object]') {
      throw new Error('obj必须是对象。')
    }
    this.request(Object.assign(obj, {
      method: "GET"
    }))
  }

  setToken(token) {
    this.token = token
  }

  getToken() {
    return this.token
  }

  removeToken() {
    this.token = null
  }
}

let api = new Api()


class ApiSync {

}

module.exports = {
  api: api
}

上面代码中看到有一个class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

生成类的实例的写法，与 ES5 完全一样，也是使用new命令。前面说过，如果忘记加上new，像函数那样调用Class，将会报错。

可以看到里面写了request（）里面存放着url，data，等wx.request()用到的信息。下面写的是发送请求时携带的签名，主要起到加密作用，防止数据泄露。下面就正式写了一个wx.request()来请求数据，这个不多说什么。

那它到底怎样实现请求数据的，下面我写了一个post和get方法，然后将整个class类放到了api变量里面，然后用用module.exports = {api:api}将它暴露出来，这样在page页面中你要请求数据时要先引入这个封装好的js文件。这里我是将它封装在utils里面的request中的api.js中，这些都是自己创建的并不是小程序自带的。如图：

在page（这里的page页面指的是开发时创建的页面）页面中先要引入api.js,如上面所示，然后要请求数据的话方法如下图（这是post请求，get请求将post改成get即可，其它不变）。可能有人会疑惑为什么这样写，下面讲一下逻辑。

这里用api.post（）或者是api.get（）请求都会到api.js中去执行之前封装的post或者get方法，这样就相当于把这里面api.post()中对象的数据传到api.js中的post方法里面。

上面那个if判断可以不看，看下面的this.request(),这里是将之前的那个request里面的数据和这里的请求方式合并。在上面那个request里面可以看到里面的method写的是GET，但是因为我们用到了Object.assign这个对象合并方法，所以它将之前那个method的数据覆盖了，这就要取了解Object.assign使用方法，这里简单说明一下，当合并多个对象时，对象中出现重复的名称，后面的会覆盖前面的数据。

然后request里面的数据就是要用到的数据，将其直接放到wx.request()里，再用wx.request()去请求数据成功后就可以获取到想要数据了，可以用console.log(obj)打印数据查看。所以本质上还是要用到wx.request()这个发请求，那为什么要绕这么大一个湾呢？

主要还是节省代码量，方便管理。可以将所有要用到的接口写在一个js文件里面，然后暴露，要用到的时候引入调用即可，就像这样。

这里面就不需要写https什么的，因为之前在cofig.js中已经写好了，在api.js中会看到有引入cofig.js，其中的apiBaseUrl就是

然后在wx.request()中有url：apiBaseUrl + url，这里就是整个接口了，示例：https://www.baidu.com/s/gdgd/gdgd，https://www.baidu.com/就是apiBaseUrl，s/gdgd/gdgd就是要封装起来的接口，这种接口肯定不止一个，封装在一起就好管理，也方便找。这里有个查找的小技巧，按键盘的Ctrl建，鼠标放在要查找的接口上会发现变成蓝色并有下划线，点击就会跳转到其具体位置。页面中的wxml中的写的点击事件也可以这样快速查找到具体位置。或者直接复制用Ctrl+f键进行查找。