基于微信小程序的日記記錄平臺(tái)的設(shè)計(jì)與開(kāi)發(fā)*

羅煒林, 李 甜, 狄思曉, 余 瀚

（南京郵電大學(xué) 計(jì)算機(jī)學(xué)院、軟件學(xué)院、網(wǎng)絡(luò)空間安全學(xué)院, 江蘇 南京 210023）

0 引言

微信小程序是騰訊公司于2017年1月發(fā)布的微信應(yīng)用平臺(tái), 是一種不需要下載安裝即可使用的應(yīng)用。微信官方對(duì)小程序的功能描述是它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想[1］。微信小程序與互聯(lián)網(wǎng)站、APP 相比具有以下優(yōu)勢(shì)：（1）大量節(jié)省用戶手機(jī)空間, 無(wú)需下載, 用完即走, 應(yīng)用退出后, 系統(tǒng)會(huì)立即釋放內(nèi)存。（2）微信小程序獲取方便, 通過(guò)搜一搜或掃一掃即可找到。（3）微信小程序開(kāi)發(fā)成本低, 技術(shù)門(mén)檻低[2］。

隨著小程序的不斷更新迭代, 功能的逐步增多、開(kāi)發(fā)數(shù)量的增值、使用場(chǎng)景的不斷增多, 使得小程序的終端用戶不斷攀升。2017～2022年我國(guó)小程序日活躍用戶數(shù)總體呈逐年增長(zhǎng)態(tài)勢(shì), 阿拉丁研究院基于小程序數(shù)據(jù)庫(kù)和公開(kāi)資料測(cè)算, 2022年H1期間, 微信、支付寶、抖音、快手等多個(gè)平臺(tái)小程序數(shù)量累計(jì)超過(guò)750萬(wàn), 日活躍用戶超過(guò)7.8億。2022 年1 月17 日, 阿拉丁研究院正式發(fā)布《2021 年度小程序互聯(lián)網(wǎng)發(fā)展白皮書(shū)》（以下簡(jiǎn)稱白皮書(shū)）。據(jù)白皮書(shū)統(tǒng)計(jì), 微信小程序開(kāi)發(fā)者突破300萬(wàn), DAU超過(guò)4.5億, 小程序成為互聯(lián)網(wǎng)商業(yè)的重要陣地。其中, 微信小程序的使用范圍廣, 可以跨平臺(tái)訪問(wèn)；小而快, 快速的訪問(wèn)帶來(lái)更好的體驗(yàn)；靈活性強(qiáng), 可以在微信, 在App各種環(huán)境下打開(kāi)使用；推廣速度快, 可以直接分享[3］。

隨著時(shí)代和技術(shù)的高速發(fā)展, 現(xiàn)代人更加渴望移動(dòng)與便捷, 正是這樣促進(jìn)了微信小程序的進(jìn)一步開(kāi)發(fā)。由此應(yīng)運(yùn)而生的日記類小程序, 既可以滿足年輕人對(duì)更加簡(jiǎn)單、省時(shí)、省力的高效記事的要求, 也囊括了小程序自身輕巧方便的優(yōu)點(diǎn), 并依托微信、支付寶等這樣的用戶群分布廣、打開(kāi)小程序的頻率多、時(shí)間長(zhǎng)的生態(tài)系統(tǒng), 實(shí)現(xiàn)用戶隨手記日記的需求。

1 基于微信小程序的日記記錄平臺(tái)的需求分析及概要設(shè)計(jì)

1.1 需求分析

日記是一個(gè)適應(yīng)性極強(qiáng)的結(jié)構(gòu)體, 在時(shí)光的長(zhǎng)河中, 它可以適應(yīng)人們的多種生活需求：信仰和文化、社交聯(lián)系、心理治療、科學(xué)資料搜集、文學(xué)研究和哲理思考等。日記能夠給寂寞的旅人帶來(lái)陪伴, 同時(shí)在生命的旅途中, 在自己沒(méi)有任何力量的時(shí)候, 日記能夠帶來(lái)一位專注的聆聽(tīng)者。日記在某種意義上見(jiàn)證了歷史, 保留了個(gè)人或家庭歷史的關(guān)鍵時(shí)刻。日記的比特化代表了對(duì)當(dāng)代社會(huì)的必要適應(yīng)。

1.2 概要設(shè)計(jì)

基于小程序的日記平臺(tái)的設(shè)計(jì)與開(kāi)發(fā)是集實(shí)用性與趣味性為一體的項(xiàng)目。雖然已經(jīng)有備忘錄等相關(guān)應(yīng)用能夠解決人們對(duì)于記錄的需求, 但形式單一, 毫無(wú)趣味性與互動(dòng)性。經(jīng)過(guò)小組成員調(diào)查發(fā)現(xiàn), 目前市場(chǎng)上關(guān)于日記類小程序數(shù)量較多, 但產(chǎn)品同質(zhì)化嚴(yán)重, 基本功能也大致相同, 主要為文字記錄、圖片上傳等, 軟件區(qū)別度不大。除此, 還對(duì)目前市面上其他的日記類微信小程序進(jìn)行了測(cè)評(píng), 測(cè)評(píng)結(jié)果是大部分小程序或多或少都會(huì)存在一些功能不完善的地方。針對(duì)測(cè)評(píng)結(jié)果, 對(duì)日記記錄小程序進(jìn)行了專項(xiàng)優(yōu)化, 并設(shè)置了以下功能：

（1）登錄驗(yàn)證界面加強(qiáng)日記的安全性與隱私性；

（2）日記廣場(chǎng)方便分享個(gè)人日記以及查看好友日記；

（3）實(shí)名認(rèn)證與通訊錄功能方便與好友的分享與聯(lián)絡(luò)；

（4）關(guān)鍵詞屏蔽功能保護(hù)系統(tǒng)健康穩(wěn)定運(yùn)行。

除以上功能外, 小程序還具有精美、簡(jiǎn)潔的界面設(shè)計(jì)。借此全方位滿足用戶對(duì)于日記類小程序?qū)嵱眯耘c趣味性的雙重需求。

2 系統(tǒng)詳細(xì)設(shè)計(jì)

2.1 平臺(tái)總體框架結(jié)構(gòu)

用戶登錄完成后, 可以查看日記和好友, 日記權(quán)限分為僅自己可見(jiàn)、好友可見(jiàn)、所有人可見(jiàn)及自定義, 按照需要發(fā)布日記信息, 供各用戶查看；好友信息可以進(jìn)行好友的新增和刪除, 可在日記廣場(chǎng)新增好友。日記系統(tǒng)框架如圖1所示。

圖1 日記系統(tǒng)框架圖

2.2 平臺(tái)主要功能設(shè)計(jì)

2.2.1 安全的登錄界面

平臺(tái)對(duì)登錄界面的設(shè)計(jì)以安全為重心, 主要設(shè)計(jì)了：（1）用戶可以通過(guò)獲取微信手機(jī)號(hào)碼默認(rèn)登錄, 完成后需進(jìn)行實(shí)名操作才可以使用小程序, 實(shí)現(xiàn)安全的用戶登錄；（2）通過(guò)填寫(xiě)昵稱、姓名、身份證號(hào)碼、出生年月、上傳頭像以及發(fā)送短信驗(yàn)證碼進(jìn)行實(shí)名校驗(yàn)。

2.2.2 可分享的日記廣場(chǎng)

平臺(tái)針對(duì)日記的交互以及分享設(shè)計(jì)了：（1）對(duì)于在線發(fā)布我的日記時(shí)可以選擇是否公開(kāi)、針對(duì)特定的人公開(kāi)、僅自己可見(jiàn)等權(quán)限, 可以添加圖片、文字或者視頻等信息；（2）對(duì)于分享后的個(gè)人日記即發(fā)布至日記廣場(chǎng), 日記廣場(chǎng)中實(shí)現(xiàn)日記的分享與交互, 查看所有好友分享的日記和本平臺(tái)中公開(kāi)的日記信息, 可以進(jìn)行點(diǎn)贊和評(píng)論。

2.2.3 聯(lián)系緊密的通訊錄

平臺(tái)針對(duì)好友功能進(jìn)行了完善的設(shè)計(jì)主要體現(xiàn)在：（1）在個(gè)人中心中, 除了查看和編輯基本信息外, 可實(shí)時(shí)對(duì)自己的信息維護(hù)；（2）在維護(hù)自身信息的前提下設(shè)置通訊錄, 可添加好友、查看我的好友信息和日記信息, 基于實(shí)名認(rèn)證的通訊錄功能使得更方便與好友進(jìn)行分享與聯(lián)絡(luò)。

2.2.4 健康穩(wěn)定的關(guān)鍵字屏蔽

為了提升系統(tǒng)安全性, 平臺(tái)設(shè)置了關(guān)鍵字過(guò)濾功能, 對(duì)于敏感字符進(jìn)行過(guò)濾, 確保系統(tǒng)的健康穩(wěn)定運(yùn)行。

2.3 微信小程序端功能實(shí)現(xiàn)

2.3.1 微信小程序的文件結(jié)構(gòu)

微信小程序項(xiàng)目的結(jié)構(gòu)分成2層：描述整體程序的頂層app 腳本及描述各個(gè)頁(yè)面的page 腳本。微信小程序具有典型的目錄結(jié)構(gòu), 且該目錄結(jié)構(gòu)具有簡(jiǎn)潔的特點(diǎn), 分布位置一般在項(xiàng)目目錄下, 其中包含2個(gè)目錄即pages 目錄和utis 目錄, 以及3 個(gè)應(yīng)用文件app.js、app.json、app.wxss。pages目錄下面存放小程序各個(gè)展示頁(yè)面, 每個(gè)頁(yè)面一個(gè)目錄, 一般包含2～4個(gè)文件, 分別是js、.yxml、.WXxss、.json。其中pages 目錄存放由index與logs這兩個(gè)頁(yè)面的構(gòu)成文件。每個(gè)頁(yè)面都是一個(gè)目錄, 目錄名稱就是唯一的頁(yè)面名稱[4］。

而小程序和一般網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)之間有相同之處也有不同之處, 主要表現(xiàn)為：小程序的主流編寫(xiě)方式為JavaScript, 與一般網(wǎng)頁(yè)開(kāi)發(fā)方式相比有較大的共通之處。網(wǎng)頁(yè)編程使用的是HTML+CSS+JS 這樣的組合方式, 其中HTML 主要用于說(shuō)明當(dāng)前這個(gè)網(wǎng)頁(yè)的基本結(jié)構(gòu), CSS 主要用于說(shuō)明網(wǎng)頁(yè)的基本樣式, JS 主要是用于處理整個(gè)網(wǎng)頁(yè)與客戶之間的互動(dòng)。同理, 在小程序開(kāi)發(fā)中WXML扮演的也是類似于HTML的角色, 但比HTML更加簡(jiǎn)易, 主要表現(xiàn)在小程序便簽的簡(jiǎn)化與規(guī)范方面；WXSS 則扮演的是類似于CSS 的角色, 但是對(duì)CSS進(jìn)行了修改和拓展；JS 邏輯交互只使用到了JavaScript的核心部分。

2.3.2 小程序部署過(guò)程

小程序研發(fā)流程中, 要針對(duì)的是iOS 和Android 這兩個(gè)操作系統(tǒng)的微信客戶端, 并且需要作為輔助開(kāi)發(fā)的小程序開(kāi)發(fā)者工具。小程序的開(kāi)發(fā)人員必須通過(guò)獲得小程序帳號(hào)、安裝小程序開(kāi)發(fā)者工具、配置項(xiàng)目等過(guò)程。

小程序的基本部署過(guò)程如下。

第一步：新建一個(gè)小程序的項(xiàng)目目錄wechat-miniprogram-demo。

第二步：在這些項(xiàng)目里, 新增了一種腳本文檔app.js。該腳本可以用來(lái)對(duì)某個(gè)小項(xiàng)目執(zhí)行初始化。app.js中有一行代碼：App（{}）;

上面代碼中, App（）既為小程序的開(kāi)發(fā)原生所提供, 同時(shí)也是一種函數(shù), 表示可以新建一個(gè)小程序開(kāi)發(fā)實(shí)例。它的參數(shù)是一種配置對(duì)象, 可以用來(lái)設(shè)定小程序開(kāi)發(fā)實(shí)例的行為屬性。因?yàn)樵搰L試不需要任何參數(shù)所以為空。

第三步：新增了一個(gè)配置文件app.json, 記錄項(xiàng)目一系列的靜態(tài)配置, json文件的主要內(nèi)容必須包含一個(gè)pages屬性, 并且需要說(shuō)明小程序項(xiàng)目包含了什么頁(yè)面。

上面的示例代碼中, pages 屬性是一個(gè)數(shù)組, 數(shù)組的每一個(gè)項(xiàng)都是一個(gè)頁(yè)面。上述例子中的小程序僅僅包含了一個(gè)頁(yè)面, 只有pages/home/home 這一項(xiàng)且作為一種三層的文檔路徑, 每個(gè)網(wǎng)頁(yè)都位于pages 子目錄里。實(shí)際開(kāi)發(fā)中頁(yè)面的數(shù)量可以進(jìn)行補(bǔ)充。

第四步：新建pages/home 子項(xiàng)目, 之后, 就在當(dāng)前項(xiàng)目中新增一個(gè)腳本home.js。這個(gè)腳本文件的內(nèi)容包括：Page（{}）;

Page（）由小程序開(kāi)發(fā)原生提出, 這是一種用來(lái)初始化某個(gè)頁(yè)面實(shí)例的參數(shù)。它的參數(shù)是一種配置對(duì)象, 可以用來(lái)設(shè)定當(dāng)前網(wǎng)頁(yè)的所有行為屬性。這也是一種空對(duì)象, 表示不設(shè)定的任何屬性。

第五步：在pages/home 目錄中新建一個(gè)home.wxml文件。WXML是微信頁(yè)面的標(biāo)簽語(yǔ)言, 類似于標(biāo)準(zhǔn)HTML語(yǔ)言, 用來(lái)表示一個(gè)小程序中的頁(yè)面。

第六步：?jiǎn)?dòng)小程序開(kāi)發(fā)工具, 然后將項(xiàng)目目錄wechat-miniprogram-demo導(dǎo)入, 并查看執(zhí)行情況。

微信小程序基于微信載體, 適用于所有微信平臺(tái)的雙線程模式, 小程式的渲染層和邏輯層分開(kāi), 且分別被兩個(gè)線程控制：

（1）渲染層的界面采用WebView技術(shù)來(lái)渲染；

（2）邏輯層通常使用如JSCore或者V8等JS引擎來(lái)執(zhí)行JavaScript代碼。

小程序通信模型如圖2所示。

圖2 小程序通信模型圖

每個(gè)小程序一般都具有多個(gè)用戶界面, 所以在渲染層上具有很多個(gè)WebView。這兩條線程之間的聯(lián)系通過(guò)小程序進(jìn)程在Native 側(cè)進(jìn)行中轉(zhuǎn), 并且邏輯層網(wǎng)絡(luò)請(qǐng)求的發(fā)送也是通過(guò)Native側(cè)進(jìn)行轉(zhuǎn)發(fā)。

2.4 平臺(tái)后端設(shè)計(jì)與實(shí)現(xiàn)

該管理系統(tǒng)使用經(jīng)典技術(shù)組成（Spring Boot、Spring Security、MyBatis、Jwt、Vue）, 內(nèi)部模塊組成有：多項(xiàng)管理、多項(xiàng)授權(quán)、選項(xiàng)、代碼生成等。在線定時(shí)的任務(wù)分配, 支持集群, 支持更多的數(shù)據(jù)源, 并支持分布式事務(wù)。

主要特性：

（1）完全響應(yīng)式布局（支持電腦、平板、手機(jī)等所有主流設(shè)備）；

（2）強(qiáng)大的一鍵生成功能（包括控制器、模型、視圖、菜單等）；

（3）支持多數(shù)據(jù)源, 簡(jiǎn)單配置即可實(shí)現(xiàn)切換；

（4）支持按鈕及數(shù)據(jù)權(quán)限, 可自定義部門(mén)數(shù)據(jù)權(quán)限；

（5）對(duì)常用js插件進(jìn)行二次封裝, 使js代碼變得簡(jiǎn)潔, 更加易維護(hù)；

（6）完善的XSS防范及腳本過(guò)濾, 徹底杜絕XSS攻擊；

（7）Maven多項(xiàng)目依賴, 模塊及插件分項(xiàng)目, 盡量松耦合, 方便模塊升級(jí)、增減模塊；

（8）國(guó)際化支持、服務(wù)端及客戶端支持；

（9）完善的日志記錄體系簡(jiǎn)單注解即可實(shí)現(xiàn)支持服務(wù)監(jiān)控, 數(shù)據(jù)監(jiān)控、緩存監(jiān)控功能。

后臺(tái)包含日記管理和好友管理兩大模塊, 日記管理可對(duì)好友日記進(jìn)行查看管理, 好友模塊可對(duì)好友信息進(jìn)行查看管理。

3 測(cè)試報(bào)告

功能測(cè)試即測(cè)試微信小程序設(shè)計(jì)是否符合功能需求[5］。后臺(tái)開(kāi)發(fā)編程中使用Java Script 實(shí)現(xiàn)了主要的系統(tǒng)搭建, 前臺(tái)則是使用微信開(kāi)發(fā)者工具, 通過(guò)自身攜帶的調(diào)試頁(yè)面進(jìn)行了系統(tǒng)調(diào)整與測(cè)試[6］。開(kāi)發(fā)人員針對(duì)小程序的登錄功能、發(fā)布功能、好友功能、評(píng)論功能4 個(gè)主要功能進(jìn)行測(cè)試, 并截取進(jìn)行記錄。功能展示圖如圖3～6所示。

圖3 錄頁(yè)面

圖4 發(fā)布頁(yè)面

圖5 好友頁(yè)面

圖6 評(píng)論頁(yè)面

本次測(cè)試報(bào)告主要內(nèi)容大致分為測(cè)試范圍、測(cè)試結(jié)論兩部分。

（1）測(cè)試范圍：UI 測(cè)試、權(quán)限測(cè)試、易用性測(cè)試、性能測(cè)試、兼容性測(cè)試、功能測(cè)試、異常測(cè)試。其中以日記記錄小程序的主要功能為主, 即針對(duì)登錄功能、發(fā)布功能、好友功能、評(píng)論功能進(jìn)行測(cè)試, 測(cè)試結(jié)果均為通過(guò)。

（2）測(cè)試結(jié)論：基于微信小程序的日記記錄平臺(tái)的設(shè)計(jì)與開(kāi)發(fā)項(xiàng)目, 開(kāi)展了從能力、穩(wěn)定性、安全、可信度、性能等五大層面的充分、嚴(yán)謹(jǐn)、合理的檢測(cè)。檢測(cè)結(jié)果顯示, 本項(xiàng)目完成并實(shí)現(xiàn)了日記記錄的基本要求, 在此基礎(chǔ)上各項(xiàng)功能均實(shí)現(xiàn), 其檢測(cè)質(zhì)量滿足了設(shè)計(jì)與上線標(biāo)準(zhǔn)。

4 結(jié)束語(yǔ)

文章是以相關(guān)用戶的需求為出發(fā)點(diǎn), 通過(guò)研究與調(diào)查各類已有日記平臺(tái)特點(diǎn)的基礎(chǔ)上設(shè)計(jì)與開(kāi)發(fā)微信小程序。項(xiàng)目采用結(jié)構(gòu)化的軟件設(shè)計(jì)方法, 即自頂向下、逐步求精, 傳統(tǒng)的軟件開(kāi)發(fā)生命周期與敏捷開(kāi)發(fā)相結(jié)合, 框架和組件都采用的是微信原生的框架與組件[7］。采用WXML、WXSS、JavaScript等前端技術(shù), 通過(guò)利用小程序所具有的云開(kāi)發(fā)功能弱化了后端和運(yùn)維, 同時(shí)通過(guò)數(shù)據(jù)庫(kù)、云函數(shù)、云調(diào)用等, 實(shí)現(xiàn)了對(duì)數(shù)據(jù)的管理和平臺(tái)的維護(hù), 實(shí)現(xiàn)了微信小程序用戶前端與服務(wù)器的交互與結(jié)合。將微信小程序應(yīng)用于日記的記錄, 既實(shí)現(xiàn)了用戶便捷記錄的需求, 又使日記的記錄通過(guò)互聯(lián)網(wǎng)技術(shù)和信息化的手段[8］變得更加具有科學(xué)性和趣味性。