【微信小程序】知乎视频查看

初版作了知乎视频保存视频到本地相册的功能。进一步咱们能够作一个加强功能，支持视频查看。

用户在登陆状态下载过的知乎视频，能够在个人浏览

或者查看历史记录

在线查看视频

这个功能的核心实际上是用户身份标识的获取，由于咱们只要拿到了用户标识，相应用户下载过的视频就能够和用户标识绑定，存储到数据库中。当用户下次再进入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在有效登陆时间内依然能够直接使用用户标识。