“日廣習慣”小程序設計與實現

崔旭，黑大任，康嘉，張曉賢

摘要：隨著手機、平板電腦等電子產品的不斷發展及其在青少年中的廣泛使用，青少年越來越難以養成健康的生活作息。為了讓更多的青少年形成健康的生活習慣，使用 Vue.js技術構建了一個穩定的、用戶體驗友好的微信小程序。該小程序采用運行在 Docker 容器中的 NodeJS 來提供 Restful風格 API，美觀易用，能夠很好地幫助用戶循序漸進地養成良好的生活習慣。

關鍵詞： Vue.js;微信小程序; NodeJS;習慣養成

中圖分類號：TP311? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）34-0091-02

當前，很多大學生經常熬夜、缺乏理財意識，導致生活無規律、肆意透支資產等問題?！叭諒V習慣”App針對上述問題并結合大學生學習生活實際，使用游戲化的方式，為用戶提供全面的、趣味的習慣養成功能，幫助大學生養成良好的生活作息習慣，并獲得較好的理財能力。

1 系統設計

1.1 功能設計

本系統為大學生規劃了規律作息、運動、閱讀、理財等習慣，并把各種習慣分成不同的階段， 每一個階段對應一個章節， 各個章節之間彼此依賴。

第一章：決心。幫助用戶養成良好的作息習慣，使用戶在工作時間保持頭腦清醒， 提高工作效率。

第二章：蝶蛹。借助運動， 冥想等幫助用戶進一步提高工作效率。跑步可以改善用戶的注意力， 優化大腦的運行機制;而冥想可以幫助用戶形成良好的思維習慣。

第三章：化繭。解鎖自定義習慣， 允許用戶設置自己需要的習慣.

第四章：成蝶。為用戶設計了在社會生活中的一些必備技能， 比如記賬、儲蓄等， 幫助用戶形成社會思維。

前面兩章為后面的習慣養成提供了實現的基礎。另外相關的章節也會不斷地進行更新。

1.2 界面設計

針對大學生這樣較為年輕的群體， 文章根據 material design 規范設計了一套較為美觀的現代交互界面。設計原型如圖1所示。

2 技術實現

2.1 前端技術實現

1）前端整體設計

前端采用 mpvue 框架， mpvue 基于 Vue.js， 由美團團隊進行開發并開源。借助 Vue.js， 可以較好地應用 MVVM 客戶端架構將數據和邏輯從交互層中分離出來， 項目同時對用戶界面元素進行組件化處理。

2） 組件規劃

借助 mpvue 對 Vue.js 原生語法的支持， 項目得以在小程序中通過 Vue 語法實現組件化， 提高代碼復用的能力， 同時由于 Vue 組件之間彼此隔離， 也更加方便進行 Debug。

小程序主體由三個頁面組成， 分別是：今日、目標、我&朋友。根據這三個頁面設計了一系列組件。

3）集中式狀態管理

為了更好地實現組件之間的數據交換，使用 vuex 來進行前端組件之間的狀態管理。通過 vuex 可以讓組件之間在傳統的事件/Props方式傳遞數據之外， 使用集中式存儲前端中所有組件的狀態。vuex 把所有的數據放在一處， 方便所有組件進行訪問， 解決了同級組件以及多層組件之間的信息傳遞問題。

4）前后端通訊

前端使用 Axios 庫與后端進行通訊，可以在前端和后端提供更加統一的代碼風格。 由小程序請求后端服務器以及由服務器請求微信開放接口， 都可以使用同一套方案進行實現， 大大降低了維護成本。

5）微信原生接口

系統使用微信原生 API，實現微信好友直接分享、微信登錄以及數據離線存儲等功能。

小程序在登錄時會調用 wx.setStorageSync 來將數據進行同步寫入到緩存，將用戶 token 存儲在本地。 每次在小程序運行時就會使用 wx.getStorageSync嘗試讀取， 之后與服務器進行通訊;使用微信緩存讀寫接口， 對當日的習慣養成狀態進行存儲， 加快加載速度， 同時減少對服務器的請求， 減少服務器的壓力。小程序內置分享功能， 點擊“分享”按鈕， 小程序將會調用 wx.shareAppMessage， 拉起微信原生通訊錄界面， 實現小程序轉發。

6） ES6 代碼翻譯

由于微信小程序對于 ECMAScript 262 標準的 JS 代碼支持欠佳， 為了保證使用 ES6 書寫的代碼能夠正常在小程序運行環境中執行， 我們要使用 Babel 來將 ES6 代碼翻譯成 ES5 標準。

7） 前端代碼編譯和壓縮

為了使針對 web 環境設計的 Vue.js 程序能夠運行在微信小程序的運行環境中， 前端項目使用 Webpack 對項目源碼進行進一步的優化和翻譯。

2.2 后端技術實現

后端整體采用 Linux + Nginx + MongoDB + Express 的類 MEAN 技術棧， 并且大量應用容器技術，支持動態部署。

1） API 設計與實現

API 使用 Express 實現。 Express 是一套基于 NodeJS 實現的輕量級 Web App 開發框架， 可用于構建高性能的后端 API。系統使用 MongoDB 作為主數據庫進行數據存儲，使用 Mongoose 來設定 Schema， 之后進行存儲， 分成 章節信息、 用戶日記、 用戶好友、 章節內容、用戶信息等。

2） API 保護和數據驗證

為了防止類似注入這類的攻擊， 程序使用多重方式對從 API 傳來的數據進行驗證。在前端使用 Validator 來對用戶輸入的數據的長度和類型進行規定;在后端從接口收到數據之后， 后端會首先調用 JOI， 對數據的格式進行驗證， 不合規范的數據將被丟棄， 并且由接口返回錯誤;在 JOI 校驗之后， 數據在被數據庫存儲之前， 還會使用 mongoose 內置的校驗器對數據進行校驗， 不合規范的數據將不會被存儲;前后端之間通訊的數據使用 HTTPS 進行傳輸， 防止服務端和小程序之間的通訊被第三方非法獲取。

3） 用戶驗證

系統使用 JWT 和 Bcrypt 對 API 進行用戶驗證和保護。

Bcrypt 用于密碼存儲。Bcrypt 滿足了 MD5 和 salt 的所有優點， 并且可以實現每一條記錄都有單獨的 salt， 同時 Bcrypt 計算比 MD5 慢幾百倍，且支持多輪加密。黑客即使獲取了整個數據庫，也無法使用字典進行暴力匹配。

項目使用 JWT 來保持用戶的登錄狀態，相比傳統的 session 方式，使用 JWT 來進行用戶認證可以無需在前后端同時存儲 session ID，減少服務器壓力。token 被存放在微信小程序緩存中，也可以防止被惡意獲取，進行 CSRF 攻擊。

小程序支持使用兩種方式進行登錄：微信賬號登錄，賬號密碼登錄。

4） 部署和 Logger

為了便于進行運維，使用 Docker 來對項目進行部署， 同時使用 Swarm 來進行集群管理。將后端的 Nginx， Nodejs環境以及 MongoDB 數據庫進行了容器化部署。在 NodeJS 容器中為了方便管理和記錄日志，使用 PM2 進行部署。

3 結束語

本系統采用Vue.js 和 NodeJS 等技術，使用游戲化的方式設計并實現了幫助用戶養成良好生活習慣的App。本系統具有易用性和穩定性， 為用戶帶來良好體驗。

參考文獻：

[1] 金峰.基于微信小程序的家用物聯網系統開發[D].杭州：浙江大學，2019.

[2] 王璐，崔保磊，潘紅霞，等.基于Vue.js的在線設計開放平臺研究與實現[J].信息技術與信息化，2019（11）：168-170.

【通聯編輯：代影】