基于微信小程序的日記記錄平臺的設計與開發*

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

（南京郵電大學 計算機學院、軟件學院、網絡空間安全學院, 江蘇 南京 210023）

0 引言

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

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

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

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

1.1 需求分析

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

1.2 概要設計

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

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

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

（3）實名認證與通訊錄功能方便與好友的分享與聯絡；

（4）關鍵詞屏蔽功能保護系統健康穩定運行。

除以上功能外, 小程序還具有精美、簡潔的界面設計。借此全方位滿足用戶對于日記類小程序實用性與趣味性的雙重需求。

2 系統詳細設計

2.1 平臺總體框架結構

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

圖1 日記系統框架圖

2.2 平臺主要功能設計

2.2.1 安全的登錄界面

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

2.2.2 可分享的日記廣場

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

2.2.3 聯系緊密的通訊錄

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

2.2.4 健康穩定的關鍵字屏蔽

為了提升系統安全性, 平臺設置了關鍵字過濾功能, 對于敏感字符進行過濾, 確保系統的健康穩定運行。

2.3 微信小程序端功能實現

2.3.1 微信小程序的文件結構

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

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

2.3.2 小程序部署過程

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

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

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

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

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

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

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

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

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

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

第六步：啟動小程序開發工具, 然后將項目目錄wechat-miniprogram-demo導入, 并查看執行情況。

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

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

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

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

圖2 小程序通信模型圖

每個小程序一般都具有多個用戶界面, 所以在渲染層上具有很多個WebView。這兩條線程之間的聯系通過小程序進程在Native 側進行中轉, 并且邏輯層網絡請求的發送也是通過Native側進行轉發。

2.4 平臺后端設計與實現

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

主要特性：

（1）完全響應式布局（支持電腦、平板、手機等所有主流設備）；

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

（3）支持多數據源, 簡單配置即可實現切換；

（4）支持按鈕及數據權限, 可自定義部門數據權限；

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

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

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

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

（9）完善的日志記錄體系簡單注解即可實現支持服務監控, 數據監控、緩存監控功能。

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

3 測試報告

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

圖3 錄頁面

圖4 發布頁面

圖5 好友頁面

圖6 評論頁面

本次測試報告主要內容大致分為測試范圍、測試結論兩部分。

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

（2）測試結論：基于微信小程序的日記記錄平臺的設計與開發項目, 開展了從能力、穩定性、安全、可信度、性能等五大層面的充分、嚴謹、合理的檢測。檢測結果顯示, 本項目完成并實現了日記記錄的基本要求, 在此基礎上各項功能均實現, 其檢測質量滿足了設計與上線標準。

4 結束語

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