基于HTML5Plus和MUI的跨平臺移動學習APP的開發研究

李勇 李園園

摘? ?要：文章分析了教育信息化下移動學習APP的重要性，闡述了跨平臺開發的各種平臺特點以及HTML5Plus，MUI開發跨平臺APP的優勢，重點分析了面向高職學生的跨平臺移動學習APP的核心功能，整體結構、數據庫設計、客戶端模塊等幾個方面提出了一個基于HBuilder開發與實現的移動學習APP的思路。

關鍵詞：跨平臺;HTML5Plus;數據庫;輕量級的CSS框架

2016年6月，教育部制定了《教育信息化“十三五”規劃》，規劃中指出“到2020年，基本建成‘人人皆學、處處能學、時時可學、與國家教育現代化發展目標相適應的教育信息化體系;基本實現教育信息化對學生全面發展的促進作用、對深化教育領域綜合改革的支撐作用和對教育創新發展、均衡發展、優質發展的提升作用;基本形成具有國際先進水平、信息技術與教育融合創新發展的中國特色教育信息化發展路子”。隨著教育信息化的推進，移動學習終端APP成為教育信息化中不可缺少的組成部分，目前，國內大、中、小學都對移動學習APP的需求持續增長，如何根據各個層次的教育特點而開發、研究出適合學生學習、老師教學的APP成為近年來移動應用開發的研究熱點。

本文分析了高職學生移動學習平臺的核心功能，利用數字天堂DCloud手機強化引擎HTML5Plus和跨平臺前端框架輕量級的CSS框架（Material Design CSS Framework，MUI）研究，并開發出跨平臺移動學習APP，提出使用HTML5開發移動學習APP的思路。

1? ? 跨平臺開發

目前，主流的手機操作系統平臺為Android系統和IOS系統，它們都有各自的開發平臺，如要開發安卓的應用，需要在Android Studio平臺上進行，而蘋果的應用則要在Xcode上面開發，而且使用的是不同的語言。因此，要開發一款APP，同樣的業務邏輯要寫兩遍，后期的更新維護也要兩套同時變化，開發者的精力、時間、費用都是雙倍，因此，跨平臺應用解決方案應運而生。目前，主流的跨平臺開發方案主要有以下幾種[1]。

1.1? Flutter

Flutter是谷歌的最新移動UI框架，其優點是手機應用里的所有東西都是微件（Widget），通過可組合的空間集合、豐富的動畫庫以及分層可擴展的架構實現了富有感染力的靈活界面設計。

1.2? React Native（簡稱RN）

React Native是Facebook開源的跨平臺移動應用開發框架，目前支持IOS和安卓兩大平臺。RN使用JavaScript語言，類似于HTML的JSX，以及CSS來開發移動應用，因此，熟悉Web前端開發的技術人員只需很少量的學習，就可以進入移動應用開發領域。

1.3? Weex

Weex是阿里巴巴的跨平臺開發框架，具有完美的兼顧性能與動態性，讓移動開發者通過簡捷的前端語法創造出Native級別的性能體驗，并支持IOS、安卓、YunOS及Web等多端部署。Weex基于開源的Vue.JS，相比于RN來說入門簡單，容易上手。

1.4? PhoneGap

PhoneGap是一個采用HTML，CSS和JavaScript的技術，創建跨平臺移動應用程序的快速開發平臺。唯一支持IOS，Android，Palm，Symbian，WP7，WP8，Bada和Blackberry全部智能系統的平臺。

本文采用了Hbuilder平臺下的HTML5Plus構建， 它是一種基于HTML，JS，CSS編寫的運行于手機端的APP，即通過HTML5Plus這個強化引擎作為橋梁，通過調用plus.*方法實現Android和IOS兩套的原生功能，并將HTML5 APP打包為原生APP，達到原生的功能和體驗。

2? ? 移動學習平臺的結構

本文所研究的移動學習APP的使用對象是高職的教師和學生，主要應用在課前和課中的教學活動，根據學生的學習特點，學習內容多以5～10 min的短小視頻和短小文檔為主，這也符合移動學習的特點，學生可以隨時隨地地根據自己的時間安排學習。課前教師上傳學習通知和學習內容，學生通過移動終端學習。課上教師可在該平臺上發布各種師生互動的教學活動，如簽到、師生頭腦風暴、選人、搶答、投票、簡單測驗等活動。

移動學習平臺，采用3層架構模型。這種3層結構模型，在架構上層次清晰，同時，又體現了軟件系統開發的高內聚、低耦合的思想。3層架構模型的系統開發思想，較好實現了界面和代碼的分離，有利于降低層次之間的依賴性，這種系統標準化操作，方便應用系統的開發，能夠提高系統開發效率。本移動學習平臺的構架如圖1所示。

3? ? 數據庫設計

在對數據庫進行設計時，需要把握以下一些設計原則[2]。（1）數據文件結構設計要合理。（2）降低數據冗余度。（3）保持數據獨立性。（4）數據的安全性。（5）數據庫設計應具有良好的可擴展性。

在上述原則的基礎上，本文進行了數據庫結論實體—聯系模型圖（Entity-Relationship Model，E-R）的設計，E-R圖是運用真實世界事物關系的觀念表示信息世界數據庫中抽象的數據架構，它是反映數據庫中各實體間關系的集合。移動學習平臺最主要業務活動包括為學生提供學習資源以及各種教學活動。因此，對于移動學習平臺而言，課程與資源、課程與活動間的兩個關系實體是最為重要的。這里對這些重要實體間的E-R圖進行闡述。

課程資源包含的屬性主要有：課程編號、課程名稱、課程簡介、創建教師ID等;每門課程內容按獨立的學習內容進行編號，包括內容編號、內容簡介、內容名稱;每個學習內容可能包括多個課件資源和視頻資源等。視頻資源包括視頻編號、視頻類型、視頻名稱、視頻鏈接地址和上傳時間等;課件資源主要包括課件編號、課件名稱、課間鏈接地址和上傳時間等，具體如圖2所示。

教學活動是課程的主體環境，承載著教學內容，教師通過各種教學活動與學生互動，通過多樣的教學活動開展教學，激發學生的學習興趣。本移動學習APP設計了任務通知單、搶答、頭腦風暴、投票等多種教學活動，每項的具體E-R圖如圖3所示。

4? ? 客戶端設計

MUI是Dcloud官方推出的一個基于HTML5Plus的框架，同時，擁有H5組件和原生組件，原生組件依賴于HTML5Plus運行環境，也就是原生APP里面的webview組件（能加載顯示網頁，可以將其視為一個瀏覽器），所以MUI里面的原生組件不能用于瀏覽器環境，可以通過MUI里面的mui.os.plus進行判斷，如果是plus環境會返回true，否則會返回undefined。開發者可以根據自己的需要進行代碼適配，對于APP使用增強的原生組件，對于普通瀏覽器里面運行的頁面使用H5組件。同時，還可以使用mui.os.android，mui.os.ios及mui.os.wechat對平臺進行檢測，然后書寫不同的邏輯代碼。對于MUI里面沒有封裝的原生組件，可以根據自己的需要基于HTML5Plus標準和native.js語法進行個性化定制。因此，可以直接上手MUI，不過需要明白MUI與其他UI框架的區別在于，MUI擁有獨有的原生組件，而且是依賴于HTML5Plus標準的。

根據需求分析設計出移動學習APP客戶端包含的模塊有登錄、注冊、密碼找回、課程列表、資源模塊、課程活動模塊、學習內容模塊等，客戶端的功能模塊如圖4所示。

5? ? 結語

基于Hbuidler，HTML5Plus，MUI開發的跨平臺移動學習APP，可以用簡單、高效、用戶廣的HTML5、層疊樣式表3級（Cascading Style Sheets Level 3，CSS3），JavaScript等語言編寫程序，一次編寫可生成多種主流移動平臺程序。從時間、財力、人力等多方都能節省成本，是一種有效和高效的移動平臺APP開發方法。

[參考文獻]

[1]益點點.有這六大頂級跨平臺開發神器，還單學啥Android、IOS開發[EB/OL].（2018-09-21）[2019-07-20].https：//baijiahao.baidu.com/s？id=1612198467122250493&wfr=spider&for=pc 2081.9.20.

[2]敬亮.基于Android的移動學習平臺設計與實現[D].南昌：江西財經大學，2017.