劉浩然 劉彬

摘? 要：微信小程序憑借其免安裝、功能多元化、成本低等優(yōu)勢迅速積累大量用戶。為進(jìn)一步探索微信小程序未來發(fā)展趨勢，結(jié)合攀枝花市生態(tài)環(huán)境局相關(guān)業(yè)務(wù)需求進(jìn)行調(diào)研和分析，基于微信小程序B/S結(jié)構(gòu)設(shè)計了一款微信答題小程序。用戶無須安裝該程序即可在線答題，學(xué)習(xí)環(huán)保相關(guān)知識，較好地滿足了攀枝花市生態(tài)環(huán)境局網(wǎng)絡(luò)宣傳環(huán)保知識的業(yè)務(wù)需求。

關(guān)鍵詞：微信小程序;B/S結(jié)構(gòu);小程序設(shè)計

中圖分類號：TP311.5? ? ? 文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2021）01-0028-03

Design and Development of Answering Software Based on WeChat Applet

LIU Haoran，LIU Bin

（Panzhihua University，Panzhihua? 617000，China）

Abstract：WeChat applets rapidly accumulate a large number of users by virtue of its advantages of no installation，diversified functions and low cost. In order to further explore the future development trend of WeChat applets，a WeChat answering applet is designed with the B/S structure of WeChat applets by combining research and analysis with the business needs of Panzhihua Ecological Environment Bureau. Users do not need to install the program to answer questions online and learn environmental protection related knowledge，which better meets the business needs of Panzhihua Ecological Environment Bureau to publicize environmental protection knowledge online.

Keywords：WeChat applet;B/S structure;applet design

0? 引? 言

攀枝花市生態(tài)環(huán)境局現(xiàn)階段主要依靠傳統(tǒng)方法對環(huán)保知識進(jìn)行宣傳推廣，需要工作人員定點(diǎn)宣傳，耗費(fèi)大量的人力財力，效率低下，宣傳效果差，已不適應(yīng)信息化時代的發(fā)展需要。在環(huán)保宣推工作中引入信息化手段可有效解決上述問題。利用微信小程序B/S結(jié)構(gòu)及微信生態(tài)體系，可方便快捷地實(shí)現(xiàn)環(huán)保知識宣傳，且微信小程序具有易實(shí)現(xiàn)、易操作、無紙化以及后臺數(shù)據(jù)可自動化分析等優(yōu)勢，在滿足攀枝花市生態(tài)環(huán)境局業(yè)務(wù)需求的同時，還能更好地提高其業(yè)務(wù)效率，是一種行之有效的現(xiàn)代化環(huán)保宣傳推廣解決方案[1]。

1? 方案結(jié)構(gòu)設(shè)計

本次小程序的設(shè)計基于微信小程序開發(fā)平臺，通過自部署后臺服務(wù)器實(shí)現(xiàn)數(shù)據(jù)加工、整理及分析功能，數(shù)據(jù)庫使用MySQL，接口整體規(guī)范遵循RESTful方式，通過一套統(tǒng)一的接口為客戶端提供服務(wù)，實(shí)現(xiàn)前后端分離開發(fā)，此外，利用微信原生API簡化用戶信息的獲取、本地存儲以及支付等開發(fā)步驟的同時還提高了系統(tǒng)的安全性。

1.1? 系統(tǒng)功能模塊設(shè)計

為使該答題小程序可以實(shí)現(xiàn)宣傳營銷的業(yè)務(wù)需求，本方案設(shè)計了挑戰(zhàn)賽、排行榜、好友對戰(zhàn)、組隊(duì)對戰(zhàn)、闖關(guān)賽、限時賽、知識庫、系統(tǒng)公告及個人中心九個模塊，在答題的基礎(chǔ)上還實(shí)現(xiàn)了社交拓展及其他玩法拓展，即在增加用戶可玩度的同時也確保程序有足夠的社交元素，系統(tǒng)功能結(jié)構(gòu)如圖1所示，系統(tǒng)頁面截圖如圖2所示。

小程序各模塊功能如下：

（1）挑戰(zhàn)賽：隨機(jī)匹配對手，從題庫中隨機(jī)抽取10道題，在限時10秒內(nèi)且題目全回答正確的前提下，按照用戶的答題速度判定得分，速度越快獲得的分?jǐn)?shù)越高，在比賽結(jié)束后優(yōu)勝用戶可以獲得相應(yīng)的積分。

（2）排行榜：排行榜提供實(shí)時查看當(dāng)前用戶積分排名情況的功能，便于用戶實(shí)時查詢當(dāng)前排名信息。

（3）好友對戰(zhàn)：創(chuàng)建一個臨時房間，用戶單擊“邀請好友”按鈕后，頁面會跳轉(zhuǎn)到微信好友拉取界面，確認(rèn)后會給好友發(fā)送小程序鏈接，好友即可進(jìn)入比賽房間進(jìn)行對戰(zhàn)。

（4）組隊(duì)對戰(zhàn)：創(chuàng)建一個臨時房間，隨機(jī)匹配兩個隊(duì)友，以三人一組的形式與另一組進(jìn)行對抗，計分形式不變，各隊(duì)員回答正確后將積分累加計入隊(duì)伍總分中，比賽結(jié)束后評選出獲勝隊(duì)伍，并在結(jié)束界面展示雙方各隊(duì)員的得分情況。

（5）闖關(guān)賽：不限時間，給每一關(guān)設(shè)定10道題，用戶答對的題目越多，獲得的積分越多，若用戶答對的題目過少則不能獲得積分。

（6）限時賽：限定60秒時間，隨機(jī)抽取20道題目，用戶在規(guī)定時間內(nèi)答對的題目越多，獲得的積分越多，若用戶答對的題目過少則不能獲得積分。

（7）知識庫：將題庫分為督察、核安、環(huán)評、監(jiān)測、污防、信息中心、社會常識及其他八個模塊。模塊可自定義設(shè)計，便于用戶根據(jù)模塊進(jìn)行練習(xí)，如果用戶完成練習(xí)的成績優(yōu)秀則可以得到一定的積分獎勵。

（8）系統(tǒng)公告：是用戶查看管理員發(fā)布消息的渠道，為實(shí)現(xiàn)用戶及時看到管理員所發(fā)布最新消息的功能，允許用戶將小程序主頁面的浮動通知作為入口進(jìn)入系統(tǒng)公告。

（9）個人中心：用戶進(jìn)入個人中心后可看到自己在小程序中的用戶編號、答題數(shù)量、正確答題數(shù)量、答題正確率以及當(dāng)前積分等信息，還可看到程序根據(jù)知識庫對知識點(diǎn)進(jìn)行劃分的八個模塊而繪制的雷達(dá)圖，使用戶能更直觀地查看自己對某個知識模塊知識的掌握情況。

1.2? 后臺管理設(shè)計

后臺管理根據(jù)后臺管理人員權(quán)限進(jìn)行設(shè)計如圖3所示，具體包含系統(tǒng)信息、系統(tǒng)公告管理、浮動通知管理、用戶管理、題庫管理、分類管理、頭銜管理、統(tǒng)計報表、系統(tǒng)設(shè)置九個模塊，盡可能地簡化了管理人員通過后臺對程序進(jìn)行維護(hù)的工作。

后臺管理各模塊功能如下：

（1）系統(tǒng)信息：通過正確的管理賬號登錄后臺管理模塊后，管理人員能清楚地查看當(dāng)前系統(tǒng)現(xiàn)階段流量、用戶數(shù)量及服務(wù)器負(fù)荷等信息，并可根據(jù)系統(tǒng)實(shí)況進(jìn)行分析，對可能出現(xiàn)的擁塞情況與安全問題進(jìn)行處理。

（2）系統(tǒng)公告管理：管理人員可以編輯系統(tǒng)公告，使所有的用戶都能通過小程序主頁面中的系統(tǒng)公告模塊及時獲取管理員發(fā)布的信息與通知。

（3）浮動通知管理：小程序的主頁面上方會有一條浮動的消息通知，用于提示用戶查看系統(tǒng)公告或提醒用戶注意賬號安全。

（4）用戶管理：管理人員可以對已注冊的用戶進(jìn)行管理，超級管理員還可以對管理賬號進(jìn)行管理。

（5）題庫管理：管理人員可定期對題庫進(jìn)行更新，同時可對題目出錯的地方進(jìn)行修正，確保答題活動的嚴(yán)謹(jǐn)性。

（6）分類管理：將題目類型劃分為八個子類，便于用戶對薄弱知識點(diǎn)進(jìn)行分類學(xué)習(xí)，同時為個人界面中個人能力雷達(dá)圖的繪制提供便利。

（7）頭銜管理：根據(jù)用戶的活躍度及對知識掌握的等級為用戶參與的限時活動分發(fā)不同的頭銜，使用戶獲得極強(qiáng)的參與感，提高用戶黏性。

（8）統(tǒng)計報表：后臺會對用戶答題數(shù)據(jù)及答題情況進(jìn)行統(tǒng)計，管理人員可通過查看統(tǒng)計報表掌握用戶在各功能模塊之間的停留時間，從而更好地分析各功能模塊之間的差異性及優(yōu)勢。

（9）系統(tǒng)設(shè)置：可通過圖形化設(shè)置改變系統(tǒng)字體大小、頁面動畫效果及頁面音效，管理人員主要根據(jù)用戶的反饋建議進(jìn)行設(shè)置，提高用戶的使用體驗(yàn)。

2? 方案邏輯設(shè)計

2.1? 總體設(shè)計思路

系統(tǒng)總體設(shè)計如圖4所示，答題小程序分為視圖層、邏輯層與系統(tǒng)層三個部分。由于微信小程序自身的獨(dú)特性，視圖層和邏輯層分別為兩個獨(dú)立運(yùn)行的線程，兩個線程間可通過系統(tǒng)層的JSBridge實(shí)現(xiàn)信息的交互。視圖層使用WebView對小程序的各個界面進(jìn)行渲染，如在“排行榜”頁面中使用blockwx：for列表渲染對排名進(jìn)行實(shí)時渲染;邏輯層使用JSCore運(yùn)行JavaScript腳本，通過調(diào)用API實(shí)現(xiàn)多元化功能，具體實(shí)現(xiàn)為修改官方wx.request（）模板中url為自建服務(wù)器地址實(shí)現(xiàn)各類功能的調(diào)用;視圖層與邏輯層之間并不具備直接共享數(shù)據(jù)的通道，事件通過系統(tǒng)層的JSBridge對邏輯層進(jìn)行反饋，并調(diào)用對應(yīng)函數(shù)。

在具體的實(shí)現(xiàn)過程中，由于運(yùn)行平臺不同，對應(yīng)的運(yùn)行環(huán)境也有所不同，iOS中的視圖層由WKWebView進(jìn)行渲染，邏輯層JavaScript代碼在JavaScriptCore中運(yùn)行;Android中的視圖層由XWeb引擎基于Chrome Mobile內(nèi)核渲染，邏輯層JavaScript代碼在V8中運(yùn)行。

2.2? 視圖層設(shè)計

在微信小程序中，視圖層由WXML構(gòu)建頁面，再配合WXSS實(shí)現(xiàn)頁面樣式[2]。利用WXML實(shí)現(xiàn)數(shù)據(jù)綁定、列表渲染、條件渲染，模板、引用、事件綁定功能及簡單的運(yùn)算[3]。具體實(shí)現(xiàn)中，通過視圖層來呈現(xiàn)用戶當(dāng)前積分與各功能標(biāo)簽的屬性，并對用戶的不同選擇進(jìn)行條件渲染，通過事件綁定可將用戶行為反饋到邏輯層中，用戶觸發(fā)事件時就會調(diào)用相應(yīng)的函數(shù)，實(shí)現(xiàn)用戶與小程序的交互。利用WXSS來描述WXML的組件樣式，決定組件的顯示方式，通過開啟樣式補(bǔ)全功能可規(guī)避渲染結(jié)果與開發(fā)過程中視圖表現(xiàn)不一致的問題。

2.3? 邏輯層設(shè)計

微信小程序的邏輯層開發(fā)基于JavaScript，邏輯層主要用于接收相應(yīng)視圖層傳遞的事件請求，通過API和自定義函數(shù)可將處理后的數(shù)據(jù)經(jīng)系統(tǒng)層發(fā)送至視圖層。出于安全方面的考慮，邏輯層不支持動態(tài)執(zhí)行JavaScript代碼，因此考慮通過開啟ES6轉(zhuǎn)ES5功能來對開發(fā)過程中的部分語法差異問題進(jìn)行規(guī)避。

2.4? 系統(tǒng)層設(shè)計

系統(tǒng)層主要為數(shù)據(jù)傳輸與事件觸發(fā)系統(tǒng)，承載小程序依賴的具體操作，如頁面的數(shù)據(jù)緩存、運(yùn)行過程中的文件存儲及使用tbs內(nèi)核等，此外，由于視圖層與邏輯層為兩個獨(dú)立線程，不能直接共享數(shù)據(jù)，因此通過系統(tǒng)層的JSBridge實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)通信，從而在整體上實(shí)現(xiàn)用戶與小程序之間的交互。

2.5? 系統(tǒng)安全設(shè)計

系統(tǒng)安全設(shè)計如圖5所示，從系統(tǒng)登錄、API訪問及數(shù)據(jù)庫三方面進(jìn)行安全設(shè)計。對于后臺管理系統(tǒng)登錄，需要使用正確的賬號及密碼;對于API訪問，使用基于Auth2.0的安全驗(yàn)證，訪問接口資源時使用全局唯一憑據(jù)token調(diào)用相應(yīng)的API，進(jìn)一步保證接口安全;對于數(shù)據(jù)庫訪問，使用獨(dú)立的非root用戶賬戶，密碼設(shè)置為足夠強(qiáng)度的加密密碼，并對訪問數(shù)據(jù)庫地點(diǎn)進(jìn)行限制，且只能通過內(nèi)網(wǎng)訪問，每天定時備份數(shù)據(jù)庫，進(jìn)一步確保數(shù)據(jù)安全[4]。

2.6? 項(xiàng)目渲染優(yōu)化

由于小程序基于雙線程模型，有別于傳統(tǒng)的Web頁面，視圖層與邏輯層并不能直接共享數(shù)據(jù)，所以每當(dāng)小程序頁面需要更新時，邏輯層就會調(diào)用宿主的setData方法，將數(shù)據(jù)從邏輯層傳送到視圖層，經(jīng)過渲染后實(shí)現(xiàn)頁面更新。在這期間存在setData傳遞大量數(shù)據(jù)、頻繁執(zhí)行setData操作以及過多頁面節(jié)點(diǎn)數(shù)等問題降低渲染性能。針對上述問題，本方案利用局部更新以及將多個setData調(diào)用合并執(zhí)行的方法，提高了項(xiàng)目的渲染性能。

2.7? 項(xiàng)目性能優(yōu)化

從三個方面開展項(xiàng)目性能優(yōu)化。首先是小程序加載速度優(yōu)化，由于代碼包越小加載速度提升越明顯，所以在開發(fā)工具中進(jìn)行了上傳代碼時壓縮的步驟，相對應(yīng)的圖片資源也由自建圖床提供，定期清理無用代碼日志，整體上減小代碼包大小;其次是首屏加載優(yōu)化，本方案在前置頁面跳轉(zhuǎn)時就預(yù)請求當(dāng)前頁的核心異步請求，實(shí)現(xiàn)提高首屏加載速度優(yōu)化的效果;最后是對項(xiàng)目中各功能模塊加載速度的優(yōu)化，在分包加載的基礎(chǔ)上實(shí)現(xiàn)分包預(yù)加載，根據(jù)用戶可能會選擇的頁面提前加載，實(shí)現(xiàn)各功能之間加載速度的優(yōu)化[5]。

3? 結(jié)? 論

微信小程序憑借其免安裝、效率高、成本低等優(yōu)勢而被廣泛采用，未來勢必會得到快速發(fā)展。本方案通過微信小程序平臺搭建了一款在線答題小程序，滿足了攀枝花市生態(tài)環(huán)境局新型答題業(yè)務(wù)的需求，實(shí)現(xiàn)了通過新媒體方式對相關(guān)環(huán)保知識進(jìn)行宣傳的目的。在未來的日子里，隨著微信官方對微信商業(yè)化的逐步重視，微信小程序?qū)洚?dāng)應(yīng)用變革的前鋒，微信小程序市場目前可以說是一片藍(lán)海，以后還將有大量的發(fā)展機(jī)遇。如何在滿足現(xiàn)有市場需求的基礎(chǔ)上，開發(fā)一款可跟隨市場趨勢做相應(yīng)調(diào)整，進(jìn)而滿足盈利需求的微信小程序?qū)⑹情_發(fā)者們需要思考的問題。

參考文獻(xiàn)：

[1] 薛歡雪.互聯(lián)網(wǎng)生態(tài)下基于信息管理的微信小程序新探 [J].圖書館學(xué)研究，2018（9）：80-83.

[2] 李昊楠，劉雅莉.基于微信小程序的圖書館座位預(yù)約系統(tǒng)設(shè)計 [J].現(xiàn)代信息科技，2020，4（6）：4-6.

[3] 邱麗媛，邵偉潔，沈俊勇，等.基于微信小程序的公共健身設(shè)施教學(xué)和管理系統(tǒng)的研究與開發(fā) [J].電子世界，2019（23）：82-83.

[4] 張瓊，景艷梅.“全民閱讀”背景下基于微信小程序的圖書社交平臺設(shè)計及實(shí)現(xiàn) [J].圖書情報導(dǎo)刊，2020，5（10）：29-34.

[5] 侯景華.基于Apache的Web服務(wù)器性能優(yōu)化和分析 [D].西安：西安電子科技大學(xué)，2006.

作者簡介：劉浩然（2000—），男，漢族，四川德陽人，本科在讀，研究方向：計算機(jī)網(wǎng)絡(luò);劉彬（1982—），男，漢族，四川資陽人，網(wǎng)絡(luò)安全高級工程師，講師，碩士，研究方向：計算機(jī)網(wǎng)絡(luò)。