基于微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)的設(shè)計(jì)與開發(fā)

袁芳 許文

摘要：隨著高校學(xué)生智能手機(jī)的普及，為移動(dòng)學(xué)習(xí)的產(chǎn)生與發(fā)展提供了硬件基礎(chǔ)，同時(shí)移動(dòng)學(xué)習(xí)也改變了傳統(tǒng)的教學(xué)模式，該文以動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程為例，該課程為計(jì)算機(jī)應(yīng)用專業(yè)的核心課程，知識(shí)點(diǎn)多，實(shí)踐性強(qiáng)，通過設(shè)計(jì)與開發(fā)一個(gè)基于微信小程序的動(dòng)態(tài)網(wǎng)站設(shè)計(jì)移動(dòng)學(xué)習(xí)平臺(tái)，可以實(shí)現(xiàn)學(xué)生隨時(shí)隨地自主化學(xué)習(xí)，以便學(xué)生牢固在掌握該課程知識(shí)點(diǎn)，提高學(xué)習(xí)積極性。

關(guān)鍵詞：微信小程序;動(dòng)態(tài)網(wǎng)站設(shè)計(jì);移動(dòng)學(xué)習(xí);學(xué)習(xí)平臺(tái)

中圖分類號(hào)：TP311;G642? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）26-0086-02

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

1 背景

隨著計(jì)算機(jī)與網(wǎng)絡(luò)信息技術(shù)的飛速發(fā)展，互聯(lián)網(wǎng)上各種在線學(xué)習(xí)平臺(tái)如雨后春筍一樣涌現(xiàn)，移動(dòng)互聯(lián)網(wǎng)學(xué)習(xí)平臺(tái)目前有三種形式，一是在線教育學(xué)習(xí)網(wǎng)站平臺(tái)，二是自主開發(fā)的App教育學(xué)習(xí)平臺(tái)，三是小程序?qū)W習(xí)平臺(tái)。最近幾年智能手機(jī)由于普及率高，功能完善、易攜帶、便于交流等特點(diǎn)已成為我們?nèi)粘Ｅc人交流、查看資訊和學(xué)習(xí)資料的重要工具，移動(dòng)學(xué)習(xí)也正進(jìn)行得如火如荼。在教育領(lǐng)域，越來越多的學(xué)生利用碎片化時(shí)間在任何地點(diǎn)進(jìn)行學(xué)習(xí)，高校學(xué)生的移動(dòng)學(xué)習(xí)正逐步成為未來發(fā)展的趨勢。本文以我院動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程為例，設(shè)計(jì)并開發(fā)微信小程序移動(dòng)學(xué)習(xí)平臺(tái)，方便學(xué)生利用碎片化時(shí)間復(fù)習(xí)和鞏固該課程的內(nèi)容，從而提高動(dòng)態(tài)網(wǎng)站開發(fā)能力。

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

微信小程序于2017年1月上線，它是不需要下載安裝就可以使用的應(yīng)用，用戶只需掃一掃或搜一下就可以打開應(yīng)用，實(shí)現(xiàn)了觸手可及的夢想，并在使用完小程序后，可以達(dá)到用完即走的理念。利用微信小程序開發(fā)應(yīng)用其開發(fā)門檻低，從而降低了建設(shè)維護(hù)成本，這是因?yàn)槲⑿判〕绦蚱涞讓蛹夹g(shù)與HTML有很多相似的地方，前端技術(shù)比其他技術(shù)的學(xué)習(xí)門檻低。在同時(shí)滿足功能和性能需求的前提下，與WEB或App相比，小程序只需依托微信的開發(fā)標(biāo)準(zhǔn)開發(fā)，便可在不同操作系統(tǒng)中使用，如果小程序發(fā)布了新版本，用戶是不需要花時(shí)間去更新，隨時(shí)就可以打開新的版本使用。所以微信小程序基于跨平臺(tái)的特點(diǎn)，大大降低了建設(shè)維護(hù)成本，提高了更新小程序版本的效率[1]。

2021微信之夜上張小龍表示目前每天有10.9億人打開微信，3.3億用戶進(jìn)行了視頻通話，有3.6億用戶讀公眾號(hào)文章，4億用戶使用小程序[2]?？梢娢⑿庞脩魯?shù)量之大，微信小程序基于微信平臺(tái)，在微信上有專門的接口，用戶只需有微信賬號(hào)后，即可通過掃描二維碼、搜索、好友分享等方式打開微信小程序。憑借微信的影響力、平臺(tái)的穩(wěn)定性、龐大用戶基數(shù)和便捷式接入方式，就可以實(shí)現(xiàn)一種易獲取易使用易推廣的輕量化在線學(xué)習(xí)平臺(tái)。

3 微信小程序移動(dòng)學(xué)習(xí)平臺(tái)功能模塊設(shè)計(jì)

結(jié)合動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程的特點(diǎn)和高職學(xué)生自學(xué)情況，設(shè)計(jì)微信小程序移動(dòng)學(xué)習(xí)平臺(tái)，該學(xué)習(xí)平臺(tái)為我院學(xué)生和教師提供服務(wù)，包括前端和后端的設(shè)計(jì)。前端是基于微信小程序開發(fā)，有課程知識(shí)點(diǎn)、項(xiàng)目、測試和個(gè)人中心四個(gè)大模塊如圖1所示。知識(shí)點(diǎn)模塊內(nèi)容是按照動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程章節(jié)內(nèi)容進(jìn)一步進(jìn)行知識(shí)點(diǎn)碎片化分割而成，其中的理論知識(shí)和實(shí)訓(xùn)操作，大都制作出相應(yīng)的圖文文檔資料，對(duì)于其中比較難的知識(shí)點(diǎn)和操作制作相應(yīng)的視頻學(xué)習(xí)資料，從而使學(xué)生能夠隨時(shí)隨地反復(fù)查閱知識(shí)點(diǎn)和觀看視頻，讓學(xué)生進(jìn)一步對(duì)知識(shí)點(diǎn)和實(shí)操加以鞏固。項(xiàng)目模塊是對(duì)動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程知識(shí)點(diǎn)的綜合運(yùn)用，也是課程難度最大的一塊。在搭建動(dòng)態(tài)網(wǎng)站項(xiàng)目過程中是講究開發(fā)的先后順序，在以往的傳統(tǒng)課堂教學(xué)中，學(xué)生往往感覺整個(gè)學(xué)期學(xué)了許多內(nèi)容，但到學(xué)期末還是不能獨(dú)自完成完整項(xiàng)目的開發(fā)。即使跟著教師一步步建立動(dòng)態(tài)網(wǎng)站項(xiàng)目，但由于課時(shí)有限，沒有一一解決每一位同學(xué)出現(xiàn)的問題，會(huì)導(dǎo)致有部分同學(xué)出現(xiàn)問題沒及時(shí)解決，導(dǎo)致后續(xù)開發(fā)無法開展，從而出現(xiàn)厭學(xué)和棄學(xué)問題。針對(duì)該問題，在項(xiàng)目模塊中的每個(gè)項(xiàng)目列表按項(xiàng)目開發(fā)的先后順序從上往下羅列，并在每個(gè)項(xiàng)目列表名稱前加上數(shù)字序號(hào)表示開發(fā)的先后順序，這樣方便學(xué)生依著步驟開發(fā)，容易發(fā)現(xiàn)自己開發(fā)項(xiàng)目中出現(xiàn)的問題。測試模塊是針對(duì)動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程每一章節(jié)相關(guān)的知識(shí)點(diǎn)而出的相應(yīng)的測試題，方便學(xué)生可以反復(fù)測試每一章節(jié)的知識(shí)內(nèi)容，進(jìn)一步鞏固每個(gè)章節(jié)的知識(shí)點(diǎn)。個(gè)人中心模塊包括學(xué)生信息綁定、個(gè)人信息設(shè)置、留言反饋等功能。

依據(jù)前端實(shí)現(xiàn)的功能需求，后端的功能模塊分別是：課程內(nèi)容管理、視頻管理、試卷管理、成績管理和留言管理。

4 學(xué)習(xí)平臺(tái)開發(fā)框架與功能實(shí)現(xiàn)

4.1 微信小程序的開發(fā)框架

微信小程序開發(fā)框架可以讓開發(fā)者們能夠通過簡便、高效的方式開發(fā)具有原生App體驗(yàn)的服務(wù)。一個(gè)微信小程序結(jié)構(gòu)主要由主體文件和頁面文件兩部分組成，主體文件部分主要由app.json、app.wxss和app.js三個(gè)文件構(gòu)成。app.json文件用來對(duì)微信小程序進(jìn)行全局配置，它決定了頁面文件的路徑、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、窗口表現(xiàn)，http請(qǐng)求跳轉(zhuǎn)、設(shè)置多個(gè)tab等，注意在app.json是不可以添加注釋的。app.wxss文件是小程序的全局樣式文件，作用于每一個(gè)頁面，用于描述WXML的組件樣式。app.js文件使用系統(tǒng)的方法處理全局文件，在整個(gè)小程序中，每一個(gè)框架頁面和文件都可以使用this獲取app.js文件中規(guī)定的數(shù)據(jù)和函數(shù)，每一個(gè)小程序都會(huì)有一個(gè)app.js文件，有且只有一個(gè)，位于項(xiàng)目的根目錄中[3]。小程序的頁面部分由4個(gè)文件組成，如表1所示。

微信小程序開發(fā)主要基于MVC框架，即模型、視圖和控制器。模型層不是很明顯，一般存在于控制器中，大部分時(shí)候以頁面局部變量或全局變量的形式存在。視圖是wxml文件表示，它把控制器得到的數(shù)據(jù)通過該文件進(jìn)行組合和渲染，視圖與控制器的交互通過綁定事件的形式來觸發(fā)控制器中各個(gè)函數(shù)的執(zhí)行，其中大部分時(shí)間會(huì)傳遞目標(biāo)節(jié)點(diǎn)對(duì)象作為它的參數(shù)。