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

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

0 引言

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

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

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

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

1.1 需求分析

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

1.2 概要設(shè)計

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

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

（2）日記廣場方便分享個人日記以及查看好友日記；

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

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

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

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

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

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

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

2.2 平臺主要功能設(shè)計

2.2.1 安全的登錄界面

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

2.2.2 可分享的日記廣場

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

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

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

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

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

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

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

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

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

2.3.2 小程序部署過程

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

小程序的基本部署過程如下。

第一步：新建一個小程序的項目目錄wechat-miniprogram-demo。

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

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

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

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

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

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

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

第六步：啟動小程序開發(fā)工具, 然后將項目目錄wechat-miniprogram-demo導(dǎo)入, 并查看執(zhí)行情況。

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

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

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

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

圖2 小程序通信模型圖

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

2.4 平臺后端設(shè)計與實現(xiàn)

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

主要特性：

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

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

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

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

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

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

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

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

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

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

3 測試報告

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

圖3 錄頁面

圖4 發(fā)布頁面

圖5 好友頁面

圖6 評論頁面

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

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

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

4 結(jié)束語

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