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

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

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

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

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

部署和運(yùn)行

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

整體架構(gòu)

1. 準(zhǔn)備域名和證書

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

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

域名注冊(cè)好之后，可以登錄微信公眾平臺(tái)配置通信域名了。

2. 云主機(jī)和鏡像部署

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

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

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

3. 配置 HTTPS

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

配置完成后，即可啟動(dòng) nginx。

nginx

4. 域名解析

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

在騰訊云注冊(cè)的域名，可以直接使用云解析控制臺(tái)來添加主機(jī)記錄，直接選擇上面購(gòu)買的 CVM。

解析生效后，我們?cè)跒g覽器使用域名就可以進(jìn)行 HTTPS 訪問。

5. 配置云存儲(chǔ) Redis

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

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

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

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

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

進(jìn)入該目錄：

cd /data/release/qcloud-applet-session

在該目錄下有個(gè)名為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 進(jìn)程，執(zhí)行以下命令啟動(dòng) node 服務(wù)：

pm2 start process.json

實(shí)現(xiàn)

會(huì)話層實(shí)現(xiàn)

會(huì)話層實(shí)現(xiàn)包含兩個(gè)部分：

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

我們的 Demo 直接使用這兩個(gè)倉(cāng)庫(kù)，可以快速地?fù)碛袝?huì)話層的能力。

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

1. 客戶端（微信小程序）發(fā)起請(qǐng)求 request
2. weapp-session-client 包裝 request
   • 首次請(qǐng)求
     • 調(diào)用 wx.login() 和 wx.getUserInfo() 接口獲得 code、rawData 和 signature
     • requset 的頭部帶上 code、rawData 和 signature
     • 保存 code 供下次調(diào)用
   • 非首次請(qǐng)求
     • request 的頭部帶上保存的 code
3. 服務(wù)器收到請(qǐng)求 request，中間件從頭部提取 code、rawData 和 signature 字段
   • 如果 code 為空，跳到第 4 步
   • 如果 code 不為空，且 rawData 不為空，需要進(jìn)行簽名校驗(yàn)
     • 使用 code，appid、app_secret 請(qǐng)求微信接口獲得 session_key 和 openid
       • 如果接口失敗，響應(yīng) ERR_SESSION_KEY_EXCHANGE_FAILED
     • 使用簽名算法通過 rawData 和 session_key 計(jì)算簽名 signature2
     • 對(duì)比 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