基于微信小程序的移動(dòng)學(xué)習(xí)平臺(tái)的設(shè)計(jì)與開(kāi)發(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)，通過(guò)設(shè)計(jì)與開(kāi)發(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

開(kāi)放科學(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)，二是自主開(kā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)域，越來(lái)越多的學(xué)生利用碎片化時(shí)間在任何地點(diǎn)進(jìn)行學(xué)習(xí)，高校學(xué)生的移動(dòng)學(xué)習(xí)正逐步成為未來(lái)發(fā)展的趨勢(shì)。本文以我院動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程為例，設(shè)計(jì)并開(kāi)發(fā)微信小程序移動(dòng)學(xué)習(xí)平臺(tái)，方便學(xué)生利用碎片化時(shí)間復(fù)習(xí)和鞏固該課程的內(nèi)容，從而提高動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)能力。

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

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

2021微信之夜上張小龍表示目前每天有10.9億人打開(kāi)微信，3.3億用戶進(jìn)行了視頻通話，有3.6億用戶讀公眾號(hào)文章，4億用戶使用小程序[2]?？梢?jiàn)微信用戶數(shù)量之大，微信小程序基于微信平臺(tái)，在微信上有專門的接口，用戶只需有微信賬號(hào)后，即可通過(guò)掃描二維碼、搜索、好友分享等方式打開(kāi)微信小程序。憑借微信的影響力、平臺(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ì)。前端是基于微信小程序開(kāi)發(fā)，有課程知識(shí)點(diǎn)、項(xiàng)目、測(cè)試和個(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)目過(guò)程中是講究開(kāi)發(fā)的先后順序，在以往的傳統(tǒng)課堂教學(xué)中，學(xué)生往往感覺(jué)整個(gè)學(xué)期學(xué)了許多內(nèi)容，但到學(xué)期末還是不能獨(dú)自完成完整項(xiàng)目的開(kāi)發(fā)。即使跟著教師一步步建立動(dòng)態(tài)網(wǎng)站項(xiàng)目，但由于課時(shí)有限，沒(méi)有一一解決每一位同學(xué)出現(xiàn)的問(wèn)題，會(huì)導(dǎo)致有部分同學(xué)出現(xiàn)問(wèn)題沒(méi)及時(shí)解決，導(dǎo)致后續(xù)開(kāi)發(fā)無(wú)法開(kāi)展，從而出現(xiàn)厭學(xué)和棄學(xué)問(wèn)題。針對(duì)該問(wèn)題，在項(xiàng)目模塊中的每個(gè)項(xiàng)目列表按項(xiàng)目開(kāi)發(fā)的先后順序從上往下羅列，并在每個(gè)項(xiàng)目列表名稱前加上數(shù)字序號(hào)表示開(kāi)發(fā)的先后順序，這樣方便學(xué)生依著步驟開(kāi)發(fā)，容易發(fā)現(xiàn)自己開(kāi)發(fā)項(xiàng)目中出現(xiàn)的問(wèn)題。測(cè)試模塊是針對(duì)動(dòng)態(tài)網(wǎng)站設(shè)計(jì)課程每一章節(jié)相關(guān)的知識(shí)點(diǎn)而出的相應(yīng)的測(cè)試題，方便學(xué)生可以反復(fù)測(cè)試每一章節(jié)的知識(shí)內(nèi)容，進(jìn)一步鞏固每個(gè)章節(jié)的知識(shí)點(diǎn)。個(gè)人中心模塊包括學(xué)生信息綁定、個(gè)人信息設(shè)置、留言反饋等功能。

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

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

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

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

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