基于微信小程序的答題軟件設計開發
2021-06-28 01:04:50劉浩然劉彬
現代信息科技 2021年1期
劉浩然 劉彬
摘? 要：微信小程序憑借其免安裝、功能多元化、成本低等優勢迅速積累大量用戶。為進一步探索微信小程序未來發展趨勢，結合攀枝花市生態環境局相關業務需求進行調研和分析，基于微信小程序B/S結構設計了一款微信答題小程序。用戶無須安裝該程序即可在線答題，學習環保相關知識，較好地滿足了攀枝花市生態環境局網絡宣傳環保知識的業務需求。
關鍵詞：微信小程序;B/S結構;小程序設計
中圖分類號：TP311.5? ? ? 文獻標識碼：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? 引? 言
攀枝花市生態環境局現階段主要依靠傳統方法對環保知識進行宣傳推廣，需要工作人員定點宣傳，耗費大量的人力財力，效率低下，宣傳效果差，已不適應信息化時代的發展需要。在環保宣推工作中引入信息化手段可有效解決上述問題。利用微信小程序B/S結構及微信生態體系，可方便快捷地實現環保知識宣傳，且微信小程序具有易實現、易操作、無紙化以及后臺數據可自動化分析等優勢，在滿足攀枝花市生態環境局業務需求的同時，還能更好地提高其業務效率，是一種行之有效的現代化環保宣傳推廣解決方案[1]。
1? 方案結構設計
本次小程序的設計基于微信小程序開發平臺，通過自部署后臺服務器實現數據加工、整理及分析功能，數據庫使用MySQL，接口整體規范遵循RESTful方式，通過一套統一的接口為客戶端提供服務，實現前后端分離開發，此外，利用微信原生API簡化用戶信息的獲取、本地存儲以及支付等開發步驟的同時還提高了系統的安全性。
1.1? 系統功能模塊設計
為使該答題小程序可以實現宣傳營銷的業務需求，本方案設計了挑戰賽、排行榜、好友對戰、組隊對戰、闖關賽、限時賽、知識庫、系統公告及個人中心九個模塊，在答題的基礎上還實現了社交拓展及其他玩法拓展，即在增加用戶可玩度的同時也確保程序有足夠的社交元素，系統功能結構如圖1所示，系統頁面截圖如圖2所示。
小程序各模塊功能如下：
（1）挑戰賽：隨機匹配對手，從題庫中隨機抽取10道題，在限時10秒內且題目全回答正確的前提下，按照用戶的答題速度判定得分，速度越快獲得的分數越高，在比賽結束后優勝用戶可以獲得相應的積分。
（2）排行榜：排行榜提供實時查看當前用戶積分排名情況的功能，便于用戶實時查詢當前排名信息。
（3）好友對戰：創建一個臨時房間，用戶單擊“邀請好友”按鈕后，頁面會跳轉到微信好友拉取界面，確認后會給好友發送小程序鏈接，好友即可進入比賽房間進行對戰。
（4）組隊對戰：創建一個臨時房間，隨機匹配兩個隊友，以三人一組的形式與另一組進行對抗，計分形式不變，各隊員回答正確后將積分累加計入隊伍總分中，比賽結束后評選出獲勝隊伍，并在結束界面展示雙方各隊員的得分情況。
（5）闖關賽：不限時間，給每一關設定10道題，用戶答對的題目越多，獲得的積分越多，若用戶答對的題目過少則不能獲得積分。
（6）限時賽：限定60秒時間，隨機抽取20道題目，用戶在規定時間內答對的題目越多，獲得的積分越多，若用戶答對的題目過少則不能獲得積分。
（7）知識庫：將題庫分為督察、核安、環評、監測、污防、信息中心、社會常識及其他八個模塊。模塊可自定義設計，便于用戶根據模塊進行練習，如果用戶完成練習的成績優秀則可以得到一定的積分獎勵。
（8）系統公告：是用戶查看管理員發布消息的渠道，為實現用戶及時看到管理員所發布最新消息的功能，允許用戶將小程序主頁面的浮動通知作為入口進入系統公告。
（9）個人中心：用戶進入個人中心后可看到自己在小程序中的用戶編號、答題數量、正確答題數量、答題正確率以及當前積分等信息，還可看到程序根據知識庫對知識點進行劃分的八個模塊而繪制的雷達圖，使用戶能更直觀地查看自己對某個知識模塊知識的掌握情況。
1.2? 后臺管理設計
后臺管理根據后臺管理人員權限進行設計如圖3所示，具體包含系統信息、系統公告管理、浮動通知管理、用戶管理、題庫管理、分類管理、頭銜管理、統計報表、系統設置九個模塊，盡可能地簡化了管理人員通過后臺對程序進行維護的工作。
后臺管理各模塊功能如下：
（1）系統信息：通過正確的管理賬號登錄后臺管理模塊后，管理人員能清楚地查看當前系統現階段流量、用戶數量及服務器負荷等信息，并可根據系統實況進行分析，對可能出現的擁塞情況與安全問題進行處理。
（2）系統公告管理：管理人員可以編輯系統公告，使所有的用戶都能通過小程序主頁面中的系統公告模塊及時獲取管理員發布的信息與通知。
（3）浮動通知管理：小程序的主頁面上方會有一條浮動的消息通知，用于提示用戶查看系統公告或提醒用戶注意賬號安全。
（4）用戶管理：管理人員可以對已注冊的用戶進行管理，超級管理員還可以對管理賬號進行管理。
（5）題庫管理：管理人員可定期對題庫進行更新，同時可對題目出錯的地方進行修正，確保答題活動的嚴謹性。
（6）分類管理：將題目類型劃分為八個子類，便于用戶對薄弱知識點進行分類學習，同時為個人界面中個人能力雷達圖的繪制提供便利。
（7）頭銜管理：根據用戶的活躍度及對知識掌握的等級為用戶參與的限時活動分發不同的頭銜，使用戶獲得極強的參與感，提高用戶黏性。
（8）統計報表：后臺會對用戶答題數據及答題情況進行統計，管理人員可通過查看統計報表掌握用戶在各功能模塊之間的停留時間，從而更好地分析各功能模塊之間的差異性及優勢。
（9）系統設置：可通過圖形化設置改變系統字體大小、頁面動畫效果及頁面音效，管理人員主要根據用戶的反饋建議進行設置，提高用戶的使用體驗。
2? 方案邏輯設計
2.1? 總體設計思路
系統總體設計如圖4所示，答題小程序分為視圖層、邏輯層與系統層三個部分。由于微信小程序自身的獨特性，視圖層和邏輯層分別為兩個獨立運行的線程，兩個線程間可通過系統層的JSBridge實現信息的交互。視圖層使用WebView對小程序的各個界面進行渲染，如在“排行榜”頁面中使用blockwx：for列表渲染
在具體的實現過程中，由于運行平臺不同，對應的運行環境也有所不同，iOS中的視圖層由WKWebView進行渲染，邏輯層JavaScript代碼在JavaScriptCore中運行;Android中的視圖層由XWeb引擎基于Chrome Mobile內核渲染，邏輯層JavaScript代碼在V8中運行。
2.2? 視圖層設計
在微信小程序中，視圖層由WXML構建頁面，再配合WXSS實現頁面樣式[2]。利用WXML實現數據綁定、列表渲染、條件渲染，模板、引用、事件綁定功能及簡單的運算[3]。具體實現中，通過視圖層來呈現用戶當前積分與各功能標簽的屬性，并對用戶的不同選擇進行條件渲染，通過事件綁定可將用戶行為反饋到邏輯層中，用戶觸發事件時就會調用相應的函數，實現用戶與小程序的交互。利用WXSS來描述WXML的組件樣式，決定組件的顯示方式，通過開啟樣式補全功能可規避渲染結果與開發過程中視圖表現不一致的問題。
2.3? 邏輯層設計
微信小程序的邏輯層開發基于JavaScript，邏輯層主要用于接收相應視圖層傳遞的事件請求，通過API和自定義函數可將處理后的數據經系統層發送至視圖層。出于安全方面的考慮，邏輯層不支持動態執行JavaScript代碼，因此考慮通過開啟ES6轉ES5功能來對開發過程中的部分語法差異問題進行規避。
2.4? 系統層設計
系統層主要為數據傳輸與事件觸發系統，承載小程序依賴的具體操作，如頁面的數據緩存、運行過程中的文件存儲及使用tbs內核等，此外，由于視圖層與邏輯層為兩個獨立線程，不能直接共享數據，因此通過系統層的JSBridge實現相應的數據通信，從而在整體上實現用戶與小程序之間的交互。
2.5? 系統安全設計
系統安全設計如圖5所示，從系統登錄、API訪問及數據庫三方面進行安全設計。對于后臺管理系統登錄，需要使用正確的賬號及密碼;對于API訪問，使用基于Auth2.0的安全驗證，訪問接口資源時使用全局唯一憑據token調用相應的API，進一步保證接口安全;對于數據庫訪問，使用獨立的非root用戶賬戶，密碼設置為足夠強度的加密密碼，并對訪問數據庫地點進行限制，且只能通過內網訪問，每天定時備份數據庫，進一步確保數據安全[4]。
2.6? 項目渲染優化
由于小程序基于雙線程模型，有別于傳統的Web頁面，視圖層與邏輯層并不能直接共享數據，所以每當小程序頁面需要更新時，邏輯層就會調用宿主的setData方法，將數據從邏輯層傳送到視圖層，經過渲染后實現頁面更新。在這期間存在setData傳遞大量數據、頻繁執行setData操作以及過多頁面節點數等問題降低渲染性能。針對上述問題，本方案利用局部更新以及將多個setData調用合并執行的方法，提高了項目的渲染性能。
2.7? 項目性能優化
從三個方面開展項目性能優化。首先是小程序加載速度優化，由于代碼包越小加載速度提升越明顯，所以在開發工具中進行了上傳代碼時壓縮的步驟，相對應的圖片資源也由自建圖床提供，定期清理無用代碼日志，整體上減小代碼包大小;其次是首屏加載優化，本方案在前置頁面跳轉時就預請求當前頁的核心異步請求，實現提高首屏加載速度優化的效果;最后是對項目中各功能模塊加載速度的優化，在分包加載的基礎上實現分包預加載，根據用戶可能會選擇的頁面提前加載，實現各功能之間加載速度的優化[5]。
3? 結? 論
微信小程序憑借其免安裝、效率高、成本低等優勢而被廣泛采用，未來勢必會得到快速發展。本方案通過微信小程序平臺搭建了一款在線答題小程序，滿足了攀枝花市生態環境局新型答題業務的需求，實現了通過新媒體方式對相關環保知識進行宣傳的目的。在未來的日子里，隨著微信官方對微信商業化的逐步重視，微信小程序將會充當應用變革的前鋒，微信小程序市場目前可以說是一片藍海，以后還將有大量的發展機遇。如何在滿足現有市場需求的基礎上，開發一款可跟隨市場趨勢做相應調整，進而滿足盈利需求的微信小程序將是開發者們需要思考的問題。
參考文獻：
[1] 薛歡雪.互聯網生態下基于信息管理的微信小程序新探 [J].圖書館學研究，2018（9）：80-83.
[2] 李昊楠，劉雅莉.基于微信小程序的圖書館座位預約系統設計 [J].現代信息科技，2020，4（6）：4-6.
[3] 邱麗媛，邵偉潔，沈俊勇，等.基于微信小程序的公共健身設施教學和管理系統的研究與開發 [J].電子世界，2019（23）：82-83.
[4] 張瓊，景艷梅.“全民閱讀”背景下基于微信小程序的圖書社交平臺設計及實現 [J].圖書情報導刊，2020，5（10）：29-34.
[5] 侯景華.基于Apache的Web服務器性能優化和分析 [D].西安：西安電子科技大學，2006.
作者簡介：劉浩然（2000—），男，漢族，四川德陽人，本科在讀，研究方向：計算機網絡;劉彬（1982—），男，漢族，四川資陽人，網絡安全高級工程師，講師，碩士，研究方向：計算機網絡。
