手把手教你做短视频去水印微信小程序（1-封装网络请求&登陆逻辑）

前言

我们先简单封装一个统一的http请求方法，方便之后复用，并写好登陆的方法。

一、网络请求

我们先将域名定义到全局数据中，之后的接口请求全都走相对地址

globalData: {
  userInfo: null,
  hasUserInfo: false,
  apiDomain: 'https://example.com/api', //接口地址
},

封装网络请求，这里我们使用Bearer Token，Restful风格API状态码与http请求状态码一致。

  //全局统一调用接口的方法
  apiRequest: function (options) {
    wx.request({
      url: this.globalData.apiDomain + options.url,
      method: options.method ? options.method : 'GET',
      header: {
        'Authorization': 'Bearer ' + wx.getStorageSync('token'),
        'Accept': 'application/json',
      },
      dataType: 'json',
      data: options.data,
      success: res => {
        switch (res.statusCode) {
          case 200:
            options.success(res);
            break;
          case 401:
            this.toLogin();
            break;
          case 422:
            break;
          case 404:
            wx.showToast({
              title: '请求地址不存在',
              icon: 'none'
            })
            break;
          default:
            wx.showToast({
              title: '出错了～请稍后再试',
              icon: 'none'
            })
        }
      },
      fail: res => {
        if (options.fail) {
          options.fail(res);
        }
      },
      complete: res => {
        if (options.complete) {
          options.complete(res);
        }
      }
    });
  },

二、登陆逻辑

2.1 自动登陆

我们在app.js的onLuanch()阶段执行登陆并获取用户信息，进而获取服务端token

onLaunch: function() {
    this.getUserInfo();
}
/**
 * 登陆并获取用户信息、token
 * 抽出来方便其他含有登陆按钮的页面直接调用该方法
 * @param {*} callback 
 */
getUserInfo: function(callback = null) {
  // 登录
  wx.login({
    success: res => {
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
      var code = res.code;
      // 获取用户信息
      wx.getSetting({
        success: res => {
          if (res.authSetting['scope.userInfo']) {
            // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
            wx.getUserInfo({
              success: res => {
                // 可以将 res 发送给后台解码出 unionId
                this.globalData.userInfo = res.userInfo
                this.globalData.hasUserInfo = true
                if (!this.checkIsLogin()) {
                  this.getToken(code, res.encryptedData, res.iv);
                }

                // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                callback && callback(res);
              }
            })
          }
        }
      })
    }
  });
},

2.2 检查是否服务端登陆

我们定义一个检查是否登陆的方法

 /**
   * 验证登录
   */
checkIsLogin(autoLogin = false) {
  // 从本地存储中获取token
  if (wx.getStorageSync('token') != '') {
    return true;
  }
  if (autoLogin) {
    this.toLogin();
  } else {
    return false;
  }
},

/**
 * 跳转登陆页
 * 这里我们将用户中心页作为登陆页，方便初次拒绝登陆的用户，继续点击登陆
 */
toLogin() {
  wx.navigateTo({
    url: '../mine/mine',
  });
},

由于微信小程序要求开发者必须提供一个opentype为getUserInfo的button来进行登陆授权操作，所以我们办法在js中直接获取用户信息，这里我们将用户中心页的头像作为点击登陆的按钮，所以只要重定向到用户中心页即可。

2.3 获取token

/**
   * 获取token
   */
  getToken(code, encryptedData, iv, callback = null) {
    //调后端接口获取token
    this.apiRequest({
      url: '/login',
      method: 'POST',
      data: {
        'code': code,
        'data': encryptedData,
        'iv': iv
      },
      success: res => {
        // 成功获取后将token存入缓存
        wx.setStorageSync('token', res.data.token);
        callback && callback();
      }
    });
  }

---

总结

我们将网络请求、登陆等全局性的方法封装到app.js中，通过代码复用，可以大大减少我们代码量，同时方便其他页面直接调用。
在后续的页面中，我们将陆续使用它们。

这里我们没有封装api层，因为项目比较小，接口基本不存在复用，所以选择在各页面的函数中调用http请求。同时没有做同步处理，均是异步请求，有需求的同学可自行改进这些方面。

系列文章

• 手把手教你做短视频去水印微信小程序（0-概述）
• 手把手教你做短视频去水印微信小程序（1-封装网络请求&登陆逻辑）
• 手把手教你做短视频去水印微信小程序（2-首页）
• 手把手教你做短视频去水印微信小程序（3-个人中心）
• 手把手教你做短视频去水印微信小程序（4-转换结果页）
• 手把手教你做短视频去水印微信小程序（5-服务端代码）
• 手把手教你做短视频去水印微信小程序（6-广告代码）【待完成】
• 手把手教你做短视频去水印微信小程序（7-Q&A整理）【待完成】

github源码地址

20201221145928601.jpg

欢迎浏览，欢迎star～

• 短视频去水印小程序源码-小程序端
• 短视频去水印小程序源码-服务端（php）【待上传】