基于微信小程序的移動學習平臺的設計與開發

袁芳 許文

摘要：隨著高校學生智能手機的普及，為移動學習的產生與發展提供了硬件基礎，同時移動學習也改變了傳統的教學模式，該文以動態網站設計課程為例，該課程為計算機應用專業的核心課程，知識點多，實踐性強，通過設計與開發一個基于微信小程序的動態網站設計移動學習平臺，可以實現學生隨時隨地自主化學習，以便學生牢固在掌握該課程知識點，提高學習積極性。

關鍵詞：微信小程序;動態網站設計;移動學習;學習平臺

中圖分類號：TP311;G642? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）26-0086-02

開放科學（資源服務）標識碼（OSID）：

1 背景

隨著計算機與網絡信息技術的飛速發展，互聯網上各種在線學習平臺如雨后春筍一樣涌現，移動互聯網學習平臺目前有三種形式，一是在線教育學習網站平臺，二是自主開發的App教育學習平臺，三是小程序學習平臺。最近幾年智能手機由于普及率高，功能完善、易攜帶、便于交流等特點已成為我們日常與人交流、查看資訊和學習資料的重要工具，移動學習也正進行得如火如荼。在教育領域，越來越多的學生利用碎片化時間在任何地點進行學習，高校學生的移動學習正逐步成為未來發展的趨勢。本文以我院動態網站設計課程為例，設計并開發微信小程序移動學習平臺，方便學生利用碎片化時間復習和鞏固該課程的內容，從而提高動態網站開發能力。

2 微信小程序的優勢

微信小程序于2017年1月上線，它是不需要下載安裝就可以使用的應用，用戶只需掃一掃或搜一下就可以打開應用，實現了觸手可及的夢想，并在使用完小程序后，可以達到用完即走的理念。利用微信小程序開發應用其開發門檻低，從而降低了建設維護成本，這是因為微信小程序其底層技術與HTML有很多相似的地方，前端技術比其他技術的學習門檻低。在同時滿足功能和性能需求的前提下，與WEB或App相比，小程序只需依托微信的開發標準開發，便可在不同操作系統中使用，如果小程序發布了新版本，用戶是不需要花時間去更新，隨時就可以打開新的版本使用。所以微信小程序基于跨平臺的特點，大大降低了建設維護成本，提高了更新小程序版本的效率[1]。

2021微信之夜上張小龍表示目前每天有10.9億人打開微信，3.3億用戶進行了視頻通話，有3.6億用戶讀公眾號文章，4億用戶使用小程序[2]。可見微信用戶數量之大，微信小程序基于微信平臺，在微信上有專門的接口，用戶只需有微信賬號后，即可通過掃描二維碼、搜索、好友分享等方式打開微信小程序。憑借微信的影響力、平臺的穩定性、龐大用戶基數和便捷式接入方式，就可以實現一種易獲取易使用易推廣的輕量化在線學習平臺。

3 微信小程序移動學習平臺功能模塊設計

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

依據前端實現的功能需求，后端的功能模塊分別是：課程內容管理、視頻管理、試卷管理、成績管理和留言管理。

4 學習平臺開發框架與功能實現

4.1 微信小程序的開發框架

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

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