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

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

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

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

小程序非常簡單，使用 Canvas 繪圖后，把序列化的 actions 提交給服務(wù)器保存。下次加載的時候，再列出用戶曾經(jīng)繪制過的圖。

部署和運行

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

整體架構(gòu)

1. 準備域名和證書

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

• 只允許和在 MP 中配置好的域名進行通信，如果還沒有域名，需要注冊一個。
• 網(wǎng)絡(luò)請求必須走 HTTPS 協(xié)議，所以你還需要為你的域名申請一個證書。

域名注冊好之后，可以登錄微信公眾平臺配置通信域名了。

2. 云主機和鏡像部署

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

騰訊云用戶可以免費領(lǐng)取禮包，體驗騰訊云小程序解決方案。

鏡像已包含所有小程序的服務(wù)器環(huán)境與代碼，需要體驗其它小程序的朋友無需重復部署

3. 配置 HTTPS

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

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

nginx

4. 域名解析

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

在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機記錄，直接選擇上面購買的 CVM。

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

5. 配置云存儲 Redis

會話管理依賴 Redis 進行作為緩存管理，開發(fā)者可以選擇自行搭建 Redis 服務(wù)或者直接購買云存儲 Redis 服務(wù)。

6. 配置云數(shù)據(jù)庫 MongoDB

一筆到底小程序使用 MongoDB 來存儲用戶繪制的圖像路徑，要運行小程序開發(fā)者需要自行搭建 MongoDB 服務(wù)或者直接購買云數(shù)據(jù)庫 MongoDB。

7. 啟動一筆到底示例 Node 服務(wù)

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

進入該目錄：

cd /data/release/qcloud-applet-session

在該目錄下有個名為config.js的配置文件（如下所示），根據(jù)注釋將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 進程，執(zhí)行以下命令啟動 node 服務(wù)：

pm2 start process.json

實現(xiàn)

會話層實現(xiàn)

會話層實現(xiàn)包含兩個部分：

• 服務(wù)器端：https://github.com/CFETeam/weapp-session
• 客戶端：https://github.com/CFETeam/weapp-session-client

我們的 Demo 直接使用這兩個倉庫，可以快速地擁有會話層的能力。

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

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

源代碼

可從 Github 獲取 https://github.com/CFETeam/weapp-session