“日廣習慣”小程序設(shè)計與實現(xiàn)

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

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

關(guān)鍵詞： Vue.js;微信小程序; NodeJS;習慣養(yǎng)成

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

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

當前，很多大學生經(jīng)常熬夜、缺乏理財意識，導致生活無規(guī)律、肆意透支資產(chǎn)等問題。“日廣習慣”App針對上述問題并結(jié)合大學生學習生活實際，使用游戲化的方式，為用戶提供全面的、趣味的習慣養(yǎng)成功能，幫助大學生養(yǎng)成良好的生活作息習慣，并獲得較好的理財能力。

1 系統(tǒng)設(shè)計

1.1 功能設(shè)計

本系統(tǒng)為大學生規(guī)劃了規(guī)律作息、運動、閱讀、理財?shù)攘晳T，并把各種習慣分成不同的階段， 每一個階段對應一個章節(jié)， 各個章節(jié)之間彼此依賴。

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

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

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

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

前面兩章為后面的習慣養(yǎng)成提供了實現(xiàn)的基礎(chǔ)。另外相關(guān)的章節(jié)也會不斷地進行更新。

1.2 界面設(shè)計

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

2 技術(shù)實現(xiàn)

2.1 前端技術(shù)實現(xiàn)

1）前端整體設(shè)計

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

2） 組件規(guī)劃

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

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

3）集中式狀態(tài)管理

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

4）前后端通訊

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

5）微信原生接口

系統(tǒng)使用微信原生 API，實現(xiàn)微信好友直接分享、微信登錄以及數(shù)據(jù)離線存儲等功能。

小程序在登錄時會調(diào)用 wx.setStorageSync 來將數(shù)據(jù)進行同步寫入到緩存，將用戶 token 存儲在本地。 每次在小程序運行時就會使用 wx.getStorageSync嘗試讀取， 之后與服務(wù)器進行通訊;使用微信緩存讀寫接口， 對當日的習慣養(yǎng)成狀態(tài)進行存儲， 加快加載速度， 同時減少對服務(wù)器的請求， 減少服務(wù)器的壓力。小程序內(nèi)置分享功能， 點擊“分享”按鈕， 小程序?qū){(diào)用 wx.shareAppMessage， 拉起微信原生通訊錄界面， 實現(xiàn)小程序轉(zhuǎn)發(fā)。

6） ES6 代碼翻譯

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

7） 前端代碼編譯和壓縮

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

2.2 后端技術(shù)實現(xiàn)

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

1） API 設(shè)計與實現(xiàn)

API 使用 Express 實現(xiàn)。 Express 是一套基于 NodeJS 實現(xiàn)的輕量級 Web App 開發(fā)框架， 可用于構(gòu)建高性能的后端 API。系統(tǒng)使用 MongoDB 作為主數(shù)據(jù)庫進行數(shù)據(jù)存儲，使用 Mongoose 來設(shè)定 Schema， 之后進行存儲， 分成 章節(jié)信息、 用戶日記、 用戶好友、 章節(jié)內(nèi)容、用戶信息等。

2） API 保護和數(shù)據(jù)驗證

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

3） 用戶驗證

系統(tǒng)使用 JWT 和 Bcrypt 對 API 進行用戶驗證和保護。

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

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

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

4） 部署和 Logger

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

3 結(jié)束語

本系統(tǒng)采用Vue.js 和 NodeJS 等技術(shù)，使用游戲化的方式設(shè)計并實現(xiàn)了幫助用戶養(yǎng)成良好生活習慣的App。本系統(tǒng)具有易用性和穩(wěn)定性， 為用戶帶來良好體驗。

參考文獻：

[1] 金峰.基于微信小程序的家用物聯(lián)網(wǎng)系統(tǒng)開發(fā)[D].杭州：浙江大學，2019.

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

【通聯(lián)編輯：代影】