【微信小程序】知乎視頻查看

初版作了知乎視頻保存視頻到本地相冊的功能。進一步咱們能夠作一個加強功能，支持視頻查看。

用戶在登陸狀態下載過的知乎視頻，能夠在個人瀏覽

或者查看歷史記錄

在線查看視頻

這個功能的核心實際上是用戶身份標識的獲取，由於咱們只要拿到了用戶標識，相應用戶下載過的視頻就能夠和用戶標識綁定，存儲到數據庫中。當用戶下次再進入app，只要經過用戶標識就能夠去數據庫中拿用戶以前下載過的視頻就能夠了。
表結構以下：

CREATE TABLE `wx_user_zhihu_answer` (
  `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT,
  `is_delete` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '軟刪除標識',
  `create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '建立時間',
  `update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新時間',
  `openId_md5` varchar(128) NOT NULL DEFAULT '' COMMENT 'openId md5加密',
  `answer_url` varchar(128) NOT NULL DEFAULT '' COMMENT '知乎回答url',
  PRIMARY KEY (`id`),
  KEY `idx_is_delete` (`is_delete`),
  KEY `idx_openId_md5` (`openId_md5`),
  KEY `idx_answer_url` (`answer_url`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用戶及知乎回答信息';

獲取用戶標識

咱們借鑑微信的例程來設計用戶登陸邏輯
首先按鈕上設置open-type="getUserInfo",可讓用戶自主選擇是否受權小程序。

<button class="login-btn" wx:if="{{!hasUserInfo}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">
  點擊登陸
</button>

當用戶點擊並確認受權，會執行回調的getUserInfo方法

getUserInfo: function(e) {
  app.globalData.userInfo = e.detail.userInfo;
  this.setData({
    userInfo: e.detail.userInfo,
    hasUserInfo: true
  });

  // 登陸
  wx.login({
    success: res => {
      const { code } = res;
      app.globalData.loginInfo.jsCode = code;
      this.fetchUserIdInfo();
      // 發送 res.code 到後臺換取 openId, sessionKey, unionId
    }
  });
  // 獲取用戶信息
  wx.getSetting({
    success: res => {
      if (res.authSetting["scope.userInfo"]) {
        // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
        wx.getUserInfo({
          success: res => {
            const { encryptedData, iv } = res;
            // 能夠將 res 發送給後臺解碼出 unionId
            app.globalData.loginInfo.encryptedData = encryptedData;
            app.globalData.loginInfo.iv = iv;
            this.fetchUserIdInfo();
          }
        });
      }
    }
  });
},
fetchUserIdInfo() {
  const { jsCode, encryptedData, iv } = app.globalData.loginInfo;
  if (!(jsCode && encryptedData && iv)) {
    return;
  }
  wx.request({
    url: userInfoFetchUrl,
    method: "POST",
    data: {
      jsCode,
      encryptedData,
      iv
    },
    header: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    success: res => {
      res = res.data;
      if (res.code === 1) {
        app.globalData.userIdInfo = res.data;
      }
    }
  });
},

getUserInfo能夠獲取用戶的信息，調用wx.login可以拿到code,調用wx.getUserInfo可以拿到encryptedData和iv。

拿到code、encryptedData、iv咱們就能夠調用微信接口以及解碼邏輯拿到用戶的openId和unionId,咱們這部分都放在了後端接口(userInfoFetchUrl)處理，這裏咱們使用openId標識用戶身份，該接口返回的是openId用m5加密後的id。因爲因此身份標識相關的操做都在服務器進行且返回的是md5加密後的值，因此極大提升了用戶信息的安全性。

後端解析用戶標識的邏輯以下

exports.infoFetch = async params => {
  const { jsCode, encryptedData, iv } = params;
  const sessionRes = await axios.get(
    `${jscode2sessionUrl}?appid=${appId}&secret=${appSecret}&js_code=${jsCode}&grant_type=authorization_code`
  );
  const sessionResData = sessionRes.data;
  const sessionKey = sessionResData.session_key;
  const openId = sessionResData.openid;
  const pc = new WXBizDataCrypt(appId, sessionKey);
  const userInfo = pc.decryptData(encryptedData, iv);
  const unionId = userInfo.unionId;
  if (unionId && openId) {
    return {
      openIdMD5: md5(openId),
      unionIdMD5: md5(unionId)
    };
  } else if (openId) {
    return {
      openIdMD5: md5(openId)
    };
  }
  return {};
};

拿到用戶標識後工做基本就完成了。咱們還須要作一些優化，在app.js的onLaunch回調和登陸頁onLoad回調中獲取用戶信息，使得用戶再次打開app在有效登陸時間內依然能夠直接使用用戶標識。