基于微信小程序的《易起學(xué)》平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

蘇海闊 孫強(qiáng)

摘? 要：隨著5G信息時(shí)代的到來，“互聯(lián)網(wǎng)+教育”也順勢而升，特別是在前疫情時(shí)期，在線教育平臺(tái)如雨后春筍般脫穎而出，這就要求開發(fā)者對(duì)于移動(dòng)學(xué)習(xí)平臺(tái)的設(shè)計(jì)要滿足用戶隨時(shí)隨地的、便捷的學(xué)習(xí)需求。本研究為基于微信小程序設(shè)計(jì)的《易起學(xué)》平臺(tái)，主要功能為在線課程學(xué)習(xí)、音頻課程、討論社區(qū)、興趣課程等。經(jīng)過系統(tǒng)調(diào)試與檢測，用戶反饋與體驗(yàn)良好，具有一定的社會(huì)服務(wù)價(jià)值，能夠達(dá)到教育信息化的目標(biāo)，可以廣泛進(jìn)行推廣與使用。

關(guān)鍵詞：移動(dòng)學(xué)習(xí)平臺(tái);微信小程序;教育信息化

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2021）16-0148-05

Abstract： With the advent of the 5G information age， “Internet + education” has also risen， especially during the pre-epidemic period， online education platforms have sprung up like mushrooms after a rain， which requires developers to design mobile learning platforms to satisfy users convenient learning needs anytime， anywhere. This research is based on the “Yiqixue” platform designed by WeChat applet. The main functions are online course learning， audio courses， discussion communities， interest courses， etc. After system debugging and testing， user feedback and experience are good， it has certain social service value， can achieve the goal of education informatization， and can be widely promoted and used.

Keywords： mobile learning platform; WeChat applet; education informatization

0? 引? 言

近些年，隨著微信小程序開發(fā)技術(shù)的逐步成熟，利用微信開發(fā)者工具開發(fā)的微信小程序已經(jīng)應(yīng)用到社會(huì)的各個(gè)領(lǐng)域中，以其強(qiáng)大的技術(shù)優(yōu)勢，即無須安裝下載、以微信為載體易于傳播，本著“只需跑一次”的理念即可快速體驗(yàn)?！盎ヂ?lián)網(wǎng)+教育”時(shí)代已經(jīng)到來，越來越多的在線學(xué)習(xí)平臺(tái)也乘勢而升，同時(shí)也帶來了眾多問題。如何讓教育理念與技術(shù)有機(jī)融合，是當(dāng)下教育工作者和技術(shù)人員值得思考的問題。而微信小程序的出現(xiàn)為教育領(lǐng)域的研究與應(yīng)用提供了新思路。從微信的附屬功能出發(fā)，公眾號(hào)的內(nèi)容傳播屬性較強(qiáng)，對(duì)于微信內(nèi)嵌的小程序而言，它的工具性與交互性則更勝一籌[1]。為此，本文設(shè)計(jì)并實(shí)現(xiàn)基于微信小程序《易起學(xué)》平臺(tái)，它可以滿足在線學(xué)習(xí)的多種需求，例如基礎(chǔ)課程、推薦“金課”、音頻課程等，達(dá)到以學(xué)生為主體，提高學(xué)生主動(dòng)學(xué)習(xí)的能力并激發(fā)學(xué)習(xí)興趣的目的。

1? 微信小程序概述

1.1? 微信小程序的優(yōu)勢

微信小程序（WeChatmini-APPs），是騰訊公司于 2017年1月正式推出的一種無須下載安裝、隨用隨走的移動(dòng)應(yīng)用，用戶可以通過微信提供的“掃一掃”或“搜索小程序”即可查找并體驗(yàn)小程序，具有開發(fā)成本較低、社交分享功能強(qiáng)大、體驗(yàn)感強(qiáng)、使用便捷等優(yōu)勢[2]。經(jīng)過3年多的不斷創(chuàng)新與發(fā)展，微信小程序已經(jīng)實(shí)現(xiàn)了相對(duì)穩(wěn)定與完整的開發(fā)環(huán)境。截至目前微信活躍用戶數(shù)量為6億～7億左右，相對(duì)于QQ等社交平臺(tái)，微信以其龐大的用戶數(shù)據(jù)奠定了它在社交領(lǐng)域不可撼動(dòng)的地位。其次，微信小程序市場規(guī)模已經(jīng)達(dá)1.2萬億元，其覆蓋的領(lǐng)域也超過200個(gè)細(xì)分行業(yè)[3]。微信小程序采用WXSS+WXML+JavaScript技術(shù)開發(fā)結(jié)合的方式進(jìn)行客戶端的設(shè)計(jì)與實(shí)現(xiàn)，與傳統(tǒng)的HTML5 網(wǎng)站設(shè)計(jì)主要的優(yōu)點(diǎn)體現(xiàn)在：

（1）可以獲得更多的系統(tǒng)權(quán)限，例如網(wǎng)絡(luò)通信狀態(tài)、數(shù)據(jù)緩存能力等，小程序可以與系統(tǒng)級(jí)別的權(quán)限進(jìn)行無縫連接，具有良好的流暢性。

（2）標(biāo)記語言較為靈活，除了官方提供的基礎(chǔ)標(biāo)簽庫外，也可以兼容HTML5的標(biāo)簽，不過需要自行設(shè)定display。

（3）支持多種樣式技術(shù)，WXSS目前即支持CSS2還可以支持CSS3，而且可以設(shè)置全局樣式和局部樣式[3，4]。

（4）運(yùn)行環(huán)境的兼容性，小程序是類似于IOS系統(tǒng)，基于微信生態(tài)下的應(yīng)用環(huán)境，具有微信制定的Web標(biāo)準(zhǔn)，運(yùn)行環(huán)境并非是完整的瀏覽器[3]。

1.2? 微信小程序與其他平臺(tái)應(yīng)用分析

小程序的開發(fā)只需要開發(fā)人員掌握J(rèn)avaScript、CSS以及API接口的調(diào)用等技術(shù)，就能夠完成應(yīng)用平臺(tái)的開發(fā)。相比較于HTML5網(wǎng)站、APP平臺(tái)的開發(fā)，小程序可以借助開發(fā)框架提供的云開發(fā)技術(shù)或第三方云數(shù)據(jù)庫平臺(tái)進(jìn)行開發(fā)，開發(fā)成本低、難度小[5]。通過研究目前主要的移動(dòng)端開發(fā)技術(shù)，對(duì)比分析了APP、HTML5和微信小程序的特點(diǎn)。由表1可以看出，微信小程序不論是在應(yīng)用和性能方面都具有明顯的優(yōu)勢。加之微信具有廣泛的群眾基礎(chǔ)，基于微信小程序的《易起學(xué)》平臺(tái)也能夠被大眾所接受和使用。

2? 需求分析

自新冠肺炎疫情暴發(fā)以來，在線教育平臺(tái)的市場迅猛發(fā)展，同時(shí)，也為響應(yīng)國家的號(hào)召，實(shí)現(xiàn)疫情期間“停課不停學(xué)”，就導(dǎo)致眾多企業(yè)和機(jī)構(gòu)都投身于在線教育領(lǐng)域，眾多企業(yè)和教育機(jī)構(gòu)在資金投入和平臺(tái)維護(hù)等方面都面臨著困難，對(duì)于在線教育是舍是留也存在爭議。通過對(duì)市場調(diào)研分析發(fā)現(xiàn)，在線教育平臺(tái)多數(shù)是以APP的形式存在，使用這種形態(tài)無疑給教育機(jī)構(gòu)帶來巨大的開發(fā)成本以及技術(shù)難題[6]。微信小程序的出現(xiàn)可以有效解決此種問題，基于微信小程序的《易起學(xué)》平臺(tái)無須安裝，只需掃碼和搜索既可以使用，同時(shí)這也賦予了小程序持久的生命周期和市場活力[1]。目前，小程序也開通了直播功能，教育者可以通過平臺(tái)實(shí)現(xiàn)直播、錄播視頻與學(xué)生進(jìn)行互動(dòng)，為教師教學(xué)提供了新的教學(xué)平臺(tái)。本平臺(tái)鑒于學(xué)生自主學(xué)習(xí)能力不強(qiáng)、學(xué)習(xí)興趣不濃、學(xué)習(xí)資源不足、課余時(shí)間難以掌控以及教師教學(xué)形式單一等問題，設(shè)計(jì)本平臺(tái)旨在有效幫助老師和學(xué)生打破傳統(tǒng)的學(xué)習(xí)方式，實(shí)現(xiàn)由“面對(duì)面”的形式轉(zhuǎn)變?yōu)椤岸藢?duì)端”的學(xué)習(xí)形式，激發(fā)學(xué)生學(xué)習(xí)興趣，豐富課堂表現(xiàn)形式以及靈活利用課余時(shí)間進(jìn)行學(xué)習(xí)。

3? 《易起學(xué)》平臺(tái)功能設(shè)計(jì)

《易起學(xué)》平臺(tái)通過對(duì)用戶的需求進(jìn)行分析來實(shí)現(xiàn)功能設(shè)計(jì)，小程序開發(fā)設(shè)計(jì)秉承著三大原則，即功能方面比原生APP更單一;設(shè)計(jì)方面比原生APP更簡潔;場景使用方面比原生APP更明確[5]。在開發(fā)過程中盡可能減少不必要的功能設(shè)計(jì)，基于平臺(tái)定位設(shè)計(jì)各模塊：

（1）基礎(chǔ)課程模塊：包括直播課程、基礎(chǔ)課程、興趣課程、更多課程等功能。其中直播課程教師可以在線直播教學(xué);基礎(chǔ)課程提供給學(xué)生優(yōu)質(zhì)的課程資源;興趣課程可以根據(jù)學(xué)生的興趣推薦相關(guān)課程;同時(shí)還包括眾多品類的課程，供用戶學(xué)習(xí)。

（2）推薦課程：主要推薦給用戶實(shí)時(shí)熱門課程，讓用戶體驗(yàn)到與時(shí)俱進(jìn)的課程學(xué)習(xí)。

（3）音頻課程：用戶可以利用碎片化時(shí)間通過音頻的形式學(xué)習(xí)英語發(fā)音、單詞等，提高英語水平。

（4）精選課程：提供給學(xué)生一線教師的精品“金課”，來提高學(xué)生學(xué)習(xí)質(zhì)量。

（5）優(yōu)惠活動(dòng)：后臺(tái)管理中可以下發(fā)優(yōu)惠券提供給用戶，提升用戶的活躍度。

（6）討論社區(qū)：用戶可以在討論區(qū)探討學(xué)習(xí)，分享自己的學(xué)習(xí)經(jīng)驗(yàn)。

（7）個(gè)人中心：管理個(gè)人賬戶信息。

（8）資訊管理：管理員可以對(duì)客戶端請(qǐng)求的資訊信息進(jìn)行答復(fù)、刪除等管理。

（9）課程管理：管理員可以對(duì)課程進(jìn)行上架、下架、置頂推薦等管理。

（10）討論區(qū)管理：管理員可以討論區(qū)的圈組話題進(jìn)行審核、刪除、添加、查詢等操作。

（11）社區(qū)管理：管理員可以對(duì)社區(qū)信息進(jìn)行維護(hù)，包括審核、查詢等操作。易起學(xué)平臺(tái)客戶端和后臺(tái)數(shù)據(jù)庫如圖1所示。

4? 平臺(tái)開發(fā)框架設(shè)計(jì)

本平臺(tái)主要由MAIN框架開發(fā)，平臺(tái)開發(fā)框架設(shè)計(jì)如圖2所示。主要分為視圖層（View）、邏輯層（AppService）以及系統(tǒng)層（Native）。視圖層包括標(biāo)簽語言WXML以及組件樣式WXSS組成，當(dāng)我們對(duì)View層進(jìn)行DOM操作和交互事件的執(zhí)行操作后，會(huì)通過WeixinJSBridge將數(shù)據(jù)傳遞到Native系統(tǒng)層。Native系統(tǒng)層（微信能力、網(wǎng)絡(luò)請(qǐng)求、權(quán)限系統(tǒng)以及離線緩存等強(qiáng)大的系統(tǒng)支持能力）決定是否要用Native來進(jìn)行處理，再由Native把交互事件轉(zhuǎn)發(fā)給邏輯層，邏輯層進(jìn)行用戶的邏輯代碼處理。邏輯層處理完畢后會(huì)將處理數(shù)據(jù)通過WeixinJSBridge直接返回給View層，最后由View層來渲染和更新視圖。其中視圖層中的頁面標(biāo)簽語言WXML和組件樣式WXSS在渲染時(shí)會(huì)被系統(tǒng)框架解析為不同端的渲染文件，能夠保證一套代碼能在多個(gè)端運(yùn)行，從而更加接近原生APP[7，8]。

5? 《易起學(xué)》平臺(tái)客戶端功能模塊實(shí)現(xiàn)

本平臺(tái)分為六大功能模塊，如圖3所示，分別包括搜索課程模塊、基礎(chǔ)功能模塊、推薦課程模塊、底部導(dǎo)航、音頻課程模塊以及精選課程模塊。客戶端界面設(shè)計(jì)要求簡潔大方、排版有序并且美觀實(shí)用，后臺(tái)數(shù)據(jù)庫管理系統(tǒng)也要求字段合理、安全性能較高[9]。其中首頁中基礎(chǔ)功能模塊包括直播課程、基礎(chǔ)課程、興趣課程、更多課程和客服咨詢，底部導(dǎo)航包括首頁、討論、優(yōu)惠和我的功能導(dǎo)航。

5.1? 搜索課程模塊

用戶可以在首頁的搜索框中搜索感興趣的課程，可以針對(duì)課程名稱、課程價(jià)格、課程時(shí)間以及分類下的哲學(xué)類、學(xué)科教育類、信息技術(shù)類、思想政治類進(jìn)行搜索。其中課程價(jià)格和時(shí)間都是按照升序和降序進(jìn)行查詢的。在WXML中設(shè)置search標(biāo)簽，在input標(biāo)簽中傳值，利用WXSS對(duì)組件樣式做適當(dāng)調(diào)整，在Js文件中進(jìn)行條件判斷與查詢遍歷，最終反饋到View層。用戶可以點(diǎn)擊所要查詢的課程進(jìn)行瀏覽學(xué)習(xí)。

5.2? 基礎(chǔ)課程模塊

點(diǎn)擊首頁導(dǎo)航欄中的“直播課程”，在直播課程界面可以觀看最新直播課程，用戶可以在評(píng)論區(qū)進(jìn)行探討。利用微信提供的直播功能插件接口來接入平臺(tái)，使教師能夠與學(xué)生開展在線教學(xué)活動(dòng);進(jìn)入基礎(chǔ)課程界面，在此界面中可以點(diǎn)擊輪播頁面行咨詢?yōu)g覽，其實(shí)現(xiàn)原理是通過swiper滑動(dòng)視圖容器綁定圖片并響應(yīng)事件監(jiān)聽來實(shí)現(xiàn)。興趣課程以及更多課程前端都是在View層進(jìn)行UI設(shè)計(jì)，通過后臺(tái)云數(shù)據(jù)庫來實(shí)現(xiàn)課程資源的上傳與更新?；A(chǔ)課程模塊界面如圖4所示。

5.3? 推薦課程模塊與底部導(dǎo)航

在首頁中用戶可以學(xué)習(xí)推薦課程視頻，平臺(tái)會(huì)篩選出高質(zhì)量的課程推送給用戶。實(shí)現(xiàn)此功能需要在WXML中設(shè)置<Video>標(biāo)簽，并適配好尺寸，可以直接在src屬性中引入視頻連接，也可在后臺(tái)數(shù)據(jù)庫中直接上傳視頻。在首頁底部的導(dǎo)航欄中點(diǎn)擊討論，進(jìn)入該界面，其中最新資訊新聞可供瀏覽，在社區(qū)討論中家長、學(xué)生都可以參與話題的討論，可以選擇圖文或者文章、鏈接的方式發(fā)布話題討論。討論社區(qū)界面如圖5所示。點(diǎn)擊我的，進(jìn)入個(gè)人中心界面，用戶可以進(jìn)行登錄注冊(cè)個(gè)人信息進(jìn)行使用，查看個(gè)人信息，包括我的訂單、工具等。

5.4? 精選課程與音頻課程模塊

用戶可以在首頁精選課程模塊中選擇所要學(xué)習(xí)的課程，平臺(tái)會(huì)為用戶推薦一線教師的精品課程，讓學(xué)生高質(zhì)量的學(xué)習(xí)，滿足學(xué)生學(xué)習(xí)需求。實(shí)現(xiàn)此功能需要在WXML中設(shè)置Scroll-view視圖兼容器，并在WXSS中設(shè)置height，通過Js文件對(duì)觸發(fā)事件進(jìn)行轉(zhuǎn)發(fā)，最后通過業(yè)務(wù)邏輯層的處理將數(shù)據(jù)反饋給View視圖層。在首頁的音頻課程模塊中，用戶可以點(diǎn)擊音頻播放課程，點(diǎn)擊更多，進(jìn)入音頻課程的主界面，用戶可以選擇年級(jí)和版本點(diǎn)擊確定進(jìn)行英語聽力練習(xí)。音頻課程選擇界面如圖6所示。在WXML中設(shè)置視圖層的組件，包括checkbox-group和Button，check-group選中項(xiàng)發(fā)生改變時(shí)觸發(fā)change事件，Button屬性中form-type表單組件類型，點(diǎn)擊分別會(huì)觸發(fā)form組件的submit/reset事件，通過綁定Button將多項(xiàng)選擇器的事件傳遞給系統(tǒng)層，由Native判斷是否轉(zhuǎn)發(fā)到邏輯層Service進(jìn)行處理，再由業(yè)務(wù)邏輯層返回給View層，最終由View進(jìn)行渲染。

6? 《易起學(xué)》平臺(tái)后臺(tái)數(shù)據(jù)系統(tǒng)的實(shí)現(xiàn)

《易起學(xué)》平臺(tái)后臺(tái)數(shù)據(jù)庫主要采用云數(shù)據(jù)庫進(jìn)行開發(fā)，在App.js連接運(yùn)數(shù)據(jù)庫時(shí)需要云初始化數(shù)據(jù)庫[10]，利用wx.cloud.init（{}）方法初始化，再給數(shù)據(jù)庫添加信息：loadMore：function（）{const db=wx.cloud.database（）;const cont=db.collection（'yiqixue'）;db.collection（'yiqixue'）.get（{success（res）{console.log（res.data）;}，之后再在WXML文件中設(shè)置按鈕事件代碼。后臺(tái)管理員可以對(duì)前臺(tái)資訊的數(shù)據(jù)進(jìn)行常規(guī)維護(hù)，更好地服務(wù)用戶，可以進(jìn)行編輯、評(píng)論、置頂?shù)炔僮?課程管理模塊主要是由管理員通過后臺(tái)數(shù)據(jù)庫維護(hù)，實(shí)現(xiàn)課程分類，能夠進(jìn)行添加、修改、刪除、查詢的操作;社區(qū)管理模塊主要是由管理員通過后臺(tái)數(shù)據(jù)庫對(duì)社區(qū)圈數(shù)據(jù)組進(jìn)維護(hù)，對(duì)圈組話題進(jìn)行分類管理，管理員也可以對(duì)前臺(tái)用戶的討論進(jìn)行管治、刪除指定用戶的發(fā)言、是否顯示該用戶的發(fā)言信息等操作。

7? 結(jié)? 論

本平臺(tái)從基礎(chǔ)教育以及學(xué)生學(xué)習(xí)的實(shí)際需求出發(fā)，能夠滿足學(xué)生個(gè)性化學(xué)習(xí)需求?；谖⑿判〕绦虻摹兑灼饘W(xué)》平臺(tái)可以實(shí)現(xiàn)教師直播、課程資源共享、師生互動(dòng)討論、家校合作等共同促進(jìn)學(xué)生學(xué)習(xí)的平臺(tái)，本款小程序涵蓋課程量多，能夠分門別類地進(jìn)行選擇課程學(xué)習(xí)，方便快捷的獲取學(xué)習(xí)資源，激發(fā)學(xué)生學(xué)習(xí)興趣，打破傳統(tǒng)教學(xué)模式，讓學(xué)生體驗(yàn)學(xué)習(xí)的快樂并提高自主學(xué)習(xí)能力?；谖⑿判〕绦虻摹兑灼饘W(xué)》平臺(tái)已經(jīng)通過了測試階段，并在中小學(xué)基礎(chǔ)教育階段投入使用，并受到廣大師生的好評(píng)，現(xiàn)總結(jié)本小程序的優(yōu)點(diǎn)：

（1）輕應(yīng)用，跨平臺(tái)性良好。

（2）界面簡潔大方，功能齊全，滿足用戶個(gè)性化學(xué)習(xí)需求。

（3）隨用隨走，不占內(nèi)存。

另外，本平臺(tái)也存在著一些不足，例如視頻上傳的格式問題，導(dǎo)致客戶端接收不到以及播放視頻問題。在線直播功能還存在著網(wǎng)絡(luò)延遲的問題等。在后續(xù)研究中，會(huì)對(duì)平臺(tái)的版本進(jìn)一步升級(jí)以及功能的迭代測試，盡可能滿足用戶的使用需求。

參考文獻(xiàn)：

[1] 馬慶祥.微信小程序在教育領(lǐng)域的應(yīng)用探析 [J].計(jì)算機(jī)產(chǎn)品與流通，2019（8）：227.

[2] 尹明章，張莉，周天旻，等.基于微信小程序的高校O2O圖書共享平臺(tái)開發(fā)與應(yīng)用 [J].圖書館理論與實(shí)踐，2019（3）：94-97.

[3] 陳世宇，鄧秋雪，陳正銘，等.試析微信小程序前端界面與網(wǎng)站前端界面實(shí)現(xiàn)技術(shù)的異同 [J].電腦編程技巧與維護(hù)，2017（20）：5-8+13.

[4] 易偉.微信小程序快速開發(fā) [M].北京：人民郵電出版社，2017：28-29.

[5] 栗琳，溫薇，孫朝陽.基于微信小程序?qū)嶒?yàn)室資源開放平臺(tái)探索 [J].實(shí)驗(yàn)室研究與探索，2021，40（2）：248-251+265.

[6] 閻光才.信息技術(shù)革命與教育教學(xué)變革：反思與展望 [J].華東師范大學(xué)學(xué)報(bào)（教育科學(xué)版），2021，39（7）：1-15.

[7] 徐曉丹，柳卸林.北京市建設(shè)國家實(shí)驗(yàn)室的基礎(chǔ)與對(duì)策研究 [J].科技進(jìn)步與對(duì)策，2019，36（19）：41-49.

[8] 蘇海闊，張賀，孫強(qiáng).基于微信小程序的“掌上實(shí)驗(yàn)室”安全教育與管理平臺(tái)設(shè)計(jì)與實(shí)現(xiàn) [J].紹興文理學(xué)院學(xué)報(bào)（自然科學(xué)），2021，41（2）：80-85.

[9] 王國鵬.“雙創(chuàng)型”職業(yè)教育模式的國際借鑒與發(fā)展路徑 [J].高等工程教育研究，2020（2）：154-158+189.

[10] 倪紅軍，李霞，周巧扣，等.基于微信小程序的高校實(shí)驗(yàn)室安全教育平臺(tái)構(gòu)建 [J].實(shí)驗(yàn)室研究與探索，2020，39（12）：280-284.

作者簡介：蘇海闊（1996.03—），男，滿族，河北承德人，碩士研究生在讀，研究方向：現(xiàn)代教育技術(shù);通訊作者：孫強(qiáng)（1979.04—），男，漢族，黑龍江牡丹江人，副院長，博士，主要研究方向：信息安全、VLSI設(shè)計(jì)自動(dòng)化、EDA和計(jì)算機(jī)體系結(jié)構(gòu)。

3016500338214