基于微信平臺的青少年編程知識答題小程序的設計

韓 笑，鄢艷紅

(廣州中醫(yī)藥大學醫(yī)學信息工程學院，廣州 510006)

開發(fā)一款基于微信小程序的青少年編程知識答題系統(tǒng)，主要從可行性和功能性兩方面進行需求分析。可行性需求分析主要從經濟、社會環(huán)境、技術三方面入手，使開發(fā)者以較小成本在較短時間內確定其是否可行。功能需求分析主要用于描述各個功能模塊在系統(tǒng)實現過程中的條件與要求。

經濟可行性。小程序以推廣青少年編程教育為主，可接受其他平臺的推廣廣告，其他平臺也會向用戶宣傳使用小程序。用戶還可推薦朋友使用，可節(jié)省后期宣傳費用。小程序使用原生開發(fā)工具及后臺管理相比APP開發(fā)，成本更低且更方便。

社會環(huán)境可行性。小程序題庫中的題目來源均已在小程序中標出，不存在侵權行為，故此基于移動微信端的青少年編程知識平臺符合社會發(fā)展趨勢。

技術可行性。小程序通過微信開發(fā)者工具，結合官方提供的開發(fā)者文檔，完成前端頁面的設計與開發(fā)。后臺使用一站式云開發(fā)，利用云數據庫設計數據集合并存儲頁面數據，利用云函數訪問云數據庫完成業(yè)務邏輯，實現前端和后端的數據交互。云開發(fā)控制臺進行可視化后臺管理，保證了系統(tǒng)的穩(wěn)定與高效。

小程序的主要功能包括登錄、答題、結果可視化。基于用戶體驗增加擴展功能，包括搜索題目、制定計劃、評論互動和瀏覽信息。用戶在進行相關操作時皆有智能化操作提示，確保平臺操作的簡便性。

1 系統(tǒng)設計

青少年編程知識答題小程序的主要功能包括登錄注冊、隨機答題、結果可視化、搜索題目、制定目標、評論互動和瀏覽信息等。后臺通過一站式云開發(fā)，利用云數據庫，設計數據集合并將頁面數據存儲在其中，利用云函數訪問云數據庫，實現頁面數據的實時更新。在云函數中，通過服務器端API進行邏輯實現，實現前端和后端的數據交互。

1.1 總體框架

微信小程序主要采用MINA框架，分為3個層次，即頁面視圖層、邏輯層和系統(tǒng)層。視圖層與邏輯層通過系統(tǒng)層作為橋梁進行事件數據的互聯(lián)互通。在邏輯層中對數據進行更改，處理數據流傳向系統(tǒng)層后傳向視圖層得到實時更新，同時視圖層的事件數據也通過系統(tǒng)層傳向邏輯層進行功能實現。

視圖層由微信提供的WXML和WXSS兩種語言對頁面基本布局進行編寫設計。WXML (WeiXin Mark Language) 是一種與 HTML相似的標簽性語言，主要用于編寫頁面與用戶之間的交互前端。WXSS (WeiXin Style Sheet) 則主要對WXML中不同組件風格進行修改，其作用與CSS樣式表相似。開發(fā)者利用WXML來建立pages的基本構架，并利用WXSS對其進行設計裝飾。

邏輯層是MINA框架的核心，主要通過微信客戶端啟動異步線程單獨加載運行，頁面渲染所需的數據、頁面交互處理邏輯都在其中實現[1]。邏輯層對pages的生命周期和頁面相關事件進行監(jiān)聽，利用邏輯層開發(fā)語言JavaScript，主要實現頁面交互、數據加載和網絡請求等功能。

系統(tǒng)層基于微信原生環(huán)境，實現文件、事件、網絡和權限管理，保證了視圖層和邏輯層被同時加載。微信小程序的這種邏輯方式大大優(yōu)化了頁面響應速度，減少了頁面加載的等待時間，提高了用戶體驗[2]。

1.2 功能結構

系統(tǒng)小程序功能模塊包括主要功能和擴展功能兩大方面。主要功能包括登錄注冊、隨機答題、結果可視化，其中結果可視化包括答題結果、答題記錄、錯題本和全網排名。擴展功能包括搜索題目、制定計劃、評論互動、瀏覽信息，其中瀏覽信息包括相關推薦和我的主頁。

功能結構設計如圖1所示。

圖1 小程序功能結構設計圖Fig.1 Functional structure design of App

1.3 功能實現

部分功能模塊界面如圖2所示。

圖2 部分功能模塊界面圖Fig.2 Interface diagram of some functional modules

1.4 軟件實現方法

微信用戶登錄功能。通過調用登錄接口wx.login()和獲取用戶信息的接口wx.getUserProfile()，實現登錄并獲取用戶信息。

隨機答題功能。在邏輯層中連接云數據庫，調用sample方法隨機從數據庫中選取指定數量的數據，并調用get方法獲取數據后，發(fā)送到視圖層。

其中，獲取題庫函數定義的偽代碼如下。

dati.aggregate()//數據庫集合的聚合操作 .match({根據’true’對記錄進行篩選}) .sample({隨機抽取題目數量}) .end().then(res => { console.log(獲取篩選后的集合數據) this.setData({ 將數據從邏輯層發(fā)送到視圖層});

模糊搜索功能。通過在頁面輸入信息，傳遞到邏輯層中，連接云數據庫，調用where方法結合db.RegExp正則表達式進行查詢。

其中搜索題目的函數定義的偽代碼如下。

if (用戶未輸入) {提示請輸入字段}dati.where({使用db.RegExp對’question’進行匹配}) .get().then(res => { if (題目存在){ this.setData({將數據從邏輯層發(fā)送到視圖層})} else{提示未找到相應題目,請重新輸入}})})

答題排名功能。通過連接云數據庫，調用orderBy方法以總分進行升序排列。其中，獲取全網排名的函數定義的偽代碼如下。

activityRecord .where({根據’_openid’對記錄進行篩選}) .orderBy(根據’totalScore’對記錄進行降序排列) .get().then(res => { console.log(獲取篩選后的集合數據) this.setData({ 將數據從邏輯層發(fā)送到視圖層});

錯題本功能。通過連接云數據庫，調用兩次where方法進行聯(lián)表查詢，第一次根據用戶ID查詢錯題記錄表，得到數據組(用戶錯題題目ID)，第二次根據數組中每個題目ID查詢題目表，調用get方法獲取數據并渲染到視圖頁。

其中，錯題本的函數定義的偽代碼如下。

A.使用云函數獲取用戶錯題列表//先查詢用戶的錯題ID列表 const queryResult = await db.collection(“wrongtest”) .where({當前用戶’_openid’與數據庫中’_openid’比較}) .get( ); console.log(將錯題ID列表定義為queryResult); if (用戶’_openid’錯誤) {查詢錯題ID出錯}; if (錯題列表為空) {沒有錯題)//再用題目ID列表查詢題目詳情 const queryResult2 = await db.collection(“dati”) .where({當前題目’_id’與數據庫中’_id’比較}) .get(); console.log(將題目詳情列表定義為queryResult2); if (題目存在) {查詢成功} else {查詢題目詳情出錯}B.邏輯層調用云函數wx.cloud.callFunction({調用查詢錯題云函數}) .then((res) => { if (當前用戶存在錯題) { console.log(獲取篩選后的集合數據) this.setData({將數據從邏輯層發(fā)送到視圖層}); else{查詢題目失敗}} .catch(捕捉出現錯誤) .finally(() => { console.log(加載結束);});

2 系統(tǒng)測試

系統(tǒng)測試目的是驗證最終軟件系統(tǒng)是否滿足需求分析。采用黑盒測試，將測試對象認為是黑匣子，忽視系統(tǒng)內部架構和內部特性，只考慮系統(tǒng)外部特征，通過對系統(tǒng)輸入數據及輸出數據的對應關系和對比測試，判斷系統(tǒng)各部分功能的有效性。主要測試的功能模塊是登錄注冊模塊和隨機答題模塊，詳見表1。

表1 用戶答題模塊測試用例表Tab.1 Test case table of user answer module

3 結語

本系統(tǒng)小程序體積小、可移動性強，能夠使用戶隨時隨地進行趣味知識答題，獲取題目答案。評論互動，為用戶提供個性化學習服務，為教育行業(yè)提供可選擇的與課堂結合的線上學習平臺，將青少年編程教育與移動學習相結合，為青少年編程教育的發(fā)展提供了新路徑。