微信小程序示例 - 一筆到底

微信小程序提供了一套在微信上運行小程序的解決(jue) 方案，有比較完整的框架、組件以及 API，在這個(ge) 平台上麵的想象空間很大。

微信的定位並不是 HTML5，這裏很多人都有誤解。在一些實現上，並不能想當然地用 HTML5 的思路來思考。比如，微信的請求接口 wx.request並不支持 cookie 傳(chuan) 遞，所以會(hui) 話層不能使用傳(chuan) 統的 Session 方式。

這篇文章分享一個(ge) 簡單的畫圖應用，使用自己新鮮出爐的小程序會(hui) 話管理能力來判斷並當前用戶的身份。

小程序非常簡單，使用 Canvas 繪圖後，把序列化的 actions 提交給服務器保存。下次加載的時候，再列出用戶曾經繪製過的圖。

部署和運行

拿到了本小程序源碼的朋友可以嚐試自己運行起來。

整體架構

1. 準備域名和證書

在微信小程序中，所有的網路請求受到嚴(yan) 格限製，不滿足條件的域名和協議無法請求，具體(ti) 包括：

隻允許和在 MP 中配置好的域名進行通信，如果還沒有域名，需要注冊一個。
網絡請求必須走 HTTPS 協議，所以你還需要為你的域名申請一個證書。

域名注冊(ce) 好之後，可以登錄微信公眾(zhong) 平台配置通信域名了。

2. 雲主機和鏡像部署

一筆到底的服務器運行代碼和配置已經打包成騰訊雲(yun) CVM 鏡像，大家可以直接使用。

騰訊雲(yun) 用戶可以免費領取禮包，體(ti) 驗騰訊雲(yun) 小程序解決(jue) 方案。

鏡像已包含所有小程序的服務器環境與(yu) 代碼，需要體(ti) 驗其它小程序的朋友無需重複部署

3. 配置 HTTPS

鏡像中已經部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、證書(shu) 、私鑰。

配置完成後，即可啟動 nginx。

nginx

4. 域名解析

我們(men) 還需要添加域名記錄解析到我們(men) 的雲(yun) 服務器上，這樣才可以使用域名進行 HTTPS 服務。

在騰訊雲(yun) 注冊(ce) 的域名，可以直接使用雲(yun) 解析控製台來添加主機記錄，直接選擇上麵購買(mai) 的 CVM。

解析生效後，我們(men) 在瀏覽器使用域名就可以進行 HTTPS 訪問。

5. 配置雲存儲 Redis

會(hui) 話管理依賴 Redis 進行作為(wei) 緩存管理，開發者可以選擇自行搭建 Redis 服務或者直接購買(mai) 雲(yun) 存儲(chu) Redis 服務。

6. 配置雲數據庫 MongoDB

一筆到底小程序使用 MongoDB 來存儲(chu) 用戶繪製的圖像路徑，要運行小程序開發者需要自行搭建 MongoDB 服務或者直接購買(mai) 雲(yun) 數據庫 MongoDB。

7. 啟動一筆到底示例 Node 服務

在鏡像的 nginx 配置中（/etc/nginx/conf.d），已經把/applet/session的請求轉發到 https://127.0.0.1:5757處理。我們(men) 需要把 Node 服務運行起來。Node 代碼部署在目錄/data/release/qcloud-applet-session下。

進入該目錄：

cd /data/release/qcloud-applet-session

在該目錄下有個(ge) 名為(wei) config.js的配置文件（如下所示），根據注釋將appId、appSecret、redisConfig、mongoConfig修改成自己的配置。

module.exports = { port: '5757', ROUTE_BASE_PATH: '/applet', // 微信小程序 App ID appId: '', // 微信小程序 App Secret appSecret: '', // Redis 配置 // @see https://www.npmjs.com/package/redis#options-object-properties redisConfig: { host: '', port: '', password: '', }, // MongoDB 配置 // @see https://www.qcloud.com/doc/product/240/3979 mongoConfig: { username: '', password: '', host: '', port: '', query: '?authMechanism=MONGODB-CR&authSource=admin', database: 'qcloud-applet-session', },};

一筆到底示例使用 pm2 管理 Node 進程，執行以下命令啟動 node 服務：

pm2 start process.json

實現

會(hui) 話層實現

會(hui) 話層實現包含兩(liang) 個(ge) 部分：

服務器端：https://github.com/CFETeam/weapp-session
客戶端：https://github.com/CFETeam/weapp-session-client

我們(men) 的 Demo 直接使用這兩(liang) 個(ge) 倉(cang) 庫，可以快速地擁有會(hui) 話層的能力。

會(hui) 話層的實現和傳(chuan) 統 Cookie 的實現方式類似，都是在 Header 上使用特殊的字段跟蹤。一個(ge) 請求的完整流程如下：

客戶端（微信小程序）發起請求 request
weapp-session-client 包裝 request
- 首次請求
  - 調用 wx.login() 和 wx.getUserInfo() 接口獲得 code、rawData 和 signature
  - requset 的頭部帶上 code、rawData 和 signature
  - 保存 code 供下次調用
- 非首次請求
  - request 的頭部帶上保存的 code
服務器收到請求 request，中間件從頭部提取 code、rawData 和 signature 字段
- 如果 code 為空，跳到第 4 步
- 如果 code 不為空，且 rawData 不為空，需要進行簽名校驗
  - 使用 code，appid、app_secret 請求微信接口獲得 session_key 和 openid
    - 如果接口失敗，響應 ERR_SESSION_KEY_EXCHANGE_FAILED
  - 使用簽名算法通過 rawData 和 session_key 計算簽名 signature2
  - 對比 signature 和 signature2
    - 簽名一致，解析 rawData 為 wxUserInfo
      - 把 openid 寫入到 wxUserInfo
      - 把 (code, wxUserInfo) 緩存到 Redis
      - 把 wxUserInfo 存放在 request.$wxUserInfo 裏
      - 跳到第 4 步
    - 簽名不一致，響應 ERR_UNTRUSTED_RAW_DATA
- 如果 code 不為空，但 rawData 為空，從 Redis 根據 code 查詢緩存的用戶信息
  - 找到用戶信息，存放在 request.$wxUserInfo 字段裏，跳到第 4 步
  - 沒找到用戶信息（可能是過期），響應 ERR_SESSION_EXPIRED
request 被業務處理，可以使用 request.$wxUserInfo 來獲取用戶信息（request.$wxUserInfo 可能為空，業務需要自行處理）