基于HTML5Plus和MUI的跨平臺(tái)移動(dòng)學(xué)習(xí)APP的開發(fā)研究

李勇 李園園

摘? ?要：文章分析了教育信息化下移動(dòng)學(xué)習(xí)APP的重要性，闡述了跨平臺(tái)開發(fā)的各種平臺(tái)特點(diǎn)以及HTML5Plus，MUI開發(fā)跨平臺(tái)APP的優(yōu)勢(shì)，重點(diǎn)分析了面向高職學(xué)生的跨平臺(tái)移動(dòng)學(xué)習(xí)APP的核心功能，整體結(jié)構(gòu)、數(shù)據(jù)庫(kù)設(shè)計(jì)、客戶端模塊等幾個(gè)方面提出了一個(gè)基于HBuilder開發(fā)與實(shí)現(xiàn)的移動(dòng)學(xué)習(xí)APP的思路。

關(guān)鍵詞：跨平臺(tái);HTML5Plus;數(shù)據(jù)庫(kù);輕量級(jí)的CSS框架

2016年6月，教育部制定了《教育信息化“十三五”規(guī)劃》，規(guī)劃中指出“到2020年，基本建成‘人人皆學(xué)、處處能學(xué)、時(shí)時(shí)可學(xué)、與國(guó)家教育現(xiàn)代化發(fā)展目標(biāo)相適應(yīng)的教育信息化體系;基本實(shí)現(xiàn)教育信息化對(duì)學(xué)生全面發(fā)展的促進(jìn)作用、對(duì)深化教育領(lǐng)域綜合改革的支撐作用和對(duì)教育創(chuàng)新發(fā)展、均衡發(fā)展、優(yōu)質(zhì)發(fā)展的提升作用;基本形成具有國(guó)際先進(jìn)水平、信息技術(shù)與教育融合創(chuàng)新發(fā)展的中國(guó)特色教育信息化發(fā)展路子”。隨著教育信息化的推進(jìn)，移動(dòng)學(xué)習(xí)終端APP成為教育信息化中不可缺少的組成部分，目前，國(guó)內(nèi)大、中、小學(xué)都對(duì)移動(dòng)學(xué)習(xí)APP的需求持續(xù)增長(zhǎng)，如何根據(jù)各個(gè)層次的教育特點(diǎn)而開發(fā)、研究出適合學(xué)生學(xué)習(xí)、老師教學(xué)的APP成為近年來移動(dòng)應(yīng)用開發(fā)的研究熱點(diǎn)。

本文分析了高職學(xué)生移動(dòng)學(xué)習(xí)平臺(tái)的核心功能，利用數(shù)字天堂DCloud手機(jī)強(qiáng)化引擎HTML5Plus和跨平臺(tái)前端框架輕量級(jí)的CSS框架（Material Design CSS Framework，MUI）研究，并開發(fā)出跨平臺(tái)移動(dòng)學(xué)習(xí)APP，提出使用HTML5開發(fā)移動(dòng)學(xué)習(xí)APP的思路。

1? ? 跨平臺(tái)開發(fā)

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

1.1? Flutter

Flutter是谷歌的最新移動(dòng)UI框架，其優(yōu)點(diǎn)是手機(jī)應(yīng)用里的所有東西都是微件（Widget），通過可組合的空間集合、豐富的動(dòng)畫庫(kù)以及分層可擴(kuò)展的架構(gòu)實(shí)現(xiàn)了富有感染力的靈活界面設(shè)計(jì)。

1.2? React Native（簡(jiǎn)稱RN）

React Native是Facebook開源的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架，目前支持IOS和安卓?jī)纱笃脚_(tái)。RN使用JavaScript語(yǔ)言，類似于HTML的JSX，以及CSS來開發(fā)移動(dòng)應(yīng)用，因此，熟悉Web前端開發(fā)的技術(shù)人員只需很少量的學(xué)習(xí)，就可以進(jìn)入移動(dòng)應(yīng)用開發(fā)領(lǐng)域。

1.3? Weex

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

1.4? PhoneGap

PhoneGap是一個(gè)采用HTML，CSS和JavaScript的技術(shù)，創(chuàng)建跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。唯一支持IOS，Android，Palm，Symbian，WP7，WP8，Bada和Blackberry全部智能系統(tǒng)的平臺(tái)。

本文采用了Hbuilder平臺(tái)下的HTML5Plus構(gòu)建， 它是一種基于HTML，JS，CSS編寫的運(yùn)行于手機(jī)端的APP，即通過HTML5Plus這個(gè)強(qiáng)化引擎作為橋梁，通過調(diào)用plus.*方法實(shí)現(xiàn)Android和IOS兩套的原生功能，并將HTML5 APP打包為原生APP，達(dá)到原生的功能和體驗(yàn)。

2? ? 移動(dòng)學(xué)習(xí)平臺(tái)的結(jié)構(gòu)

本文所研究的移動(dòng)學(xué)習(xí)APP的使用對(duì)象是高職的教師和學(xué)生，主要應(yīng)用在課前和課中的教學(xué)活動(dòng)，根據(jù)學(xué)生的學(xué)習(xí)特點(diǎn)，學(xué)習(xí)內(nèi)容多以5～10 min的短小視頻和短小文檔為主，這也符合移動(dòng)學(xué)習(xí)的特點(diǎn)，學(xué)生可以隨時(shí)隨地地根據(jù)自己的時(shí)間安排學(xué)習(xí)。課前教師上傳學(xué)習(xí)通知和學(xué)習(xí)內(nèi)容，學(xué)生通過移動(dòng)終端學(xué)習(xí)。課上教師可在該平臺(tái)上發(fā)布各種師生互動(dòng)的教學(xué)活動(dòng)，如簽到、師生頭腦風(fēng)暴、選人、搶答、投票、簡(jiǎn)單測(cè)驗(yàn)等活動(dòng)。

移動(dòng)學(xué)習(xí)平臺(tái)，采用3層架構(gòu)模型。這種3層結(jié)構(gòu)模型，在架構(gòu)上層次清晰，同時(shí)，又體現(xiàn)了軟件系統(tǒng)開發(fā)的高內(nèi)聚、低耦合的思想。3層架構(gòu)模型的系統(tǒng)開發(fā)思想，較好實(shí)現(xiàn)了界面和代碼的分離，有利于降低層次之間的依賴性，這種系統(tǒng)標(biāo)準(zhǔn)化操作，方便應(yīng)用系統(tǒng)的開發(fā)，能夠提高系統(tǒng)開發(fā)效率。本移動(dòng)學(xué)習(xí)平臺(tái)的構(gòu)架如圖1所示。

3? ? 數(shù)據(jù)庫(kù)設(shè)計(jì)

在對(duì)數(shù)據(jù)庫(kù)進(jìn)行設(shè)計(jì)時(shí)，需要把握以下一些設(shè)計(jì)原則[2]。（1）數(shù)據(jù)文件結(jié)構(gòu)設(shè)計(jì)要合理。（2）降低數(shù)據(jù)冗余度。（3）保持?jǐn)?shù)據(jù)獨(dú)立性。（4）數(shù)據(jù)的安全性。（5）數(shù)據(jù)庫(kù)設(shè)計(jì)應(yīng)具有良好的可擴(kuò)展性。

在上述原則的基礎(chǔ)上，本文進(jìn)行了數(shù)據(jù)庫(kù)結(jié)論實(shí)體—聯(lián)系模型圖（Entity-Relationship Model，E-R）的設(shè)計(jì)，E-R圖是運(yùn)用真實(shí)世界事物關(guān)系的觀念表示信息世界數(shù)據(jù)庫(kù)中抽象的數(shù)據(jù)架構(gòu)，它是反映數(shù)據(jù)庫(kù)中各實(shí)體間關(guān)系的集合。移動(dòng)學(xué)習(xí)平臺(tái)最主要業(yè)務(wù)活動(dòng)包括為學(xué)生提供學(xué)習(xí)資源以及各種教學(xué)活動(dòng)。因此，對(duì)于移動(dòng)學(xué)習(xí)平臺(tái)而言，課程與資源、課程與活動(dòng)間的兩個(gè)關(guān)系實(shí)體是最為重要的。這里對(duì)這些重要實(shí)體間的E-R圖進(jìn)行闡述。

課程資源包含的屬性主要有：課程編號(hào)、課程名稱、課程簡(jiǎn)介、創(chuàng)建教師ID等;每門課程內(nèi)容按獨(dú)立的學(xué)習(xí)內(nèi)容進(jìn)行編號(hào)，包括內(nèi)容編號(hào)、內(nèi)容簡(jiǎn)介、內(nèi)容名稱;每個(gè)學(xué)習(xí)內(nèi)容可能包括多個(gè)課件資源和視頻資源等。視頻資源包括視頻編號(hào)、視頻類型、視頻名稱、視頻鏈接地址和上傳時(shí)間等;課件資源主要包括課件編號(hào)、課件名稱、課間鏈接地址和上傳時(shí)間等，具體如圖2所示。

教學(xué)活動(dòng)是課程的主體環(huán)境，承載著教學(xué)內(nèi)容，教師通過各種教學(xué)活動(dòng)與學(xué)生互動(dòng)，通過多樣的教學(xué)活動(dòng)開展教學(xué)，激發(fā)學(xué)生的學(xué)習(xí)興趣。本移動(dòng)學(xué)習(xí)APP設(shè)計(jì)了任務(wù)通知單、搶答、頭腦風(fēng)暴、投票等多種教學(xué)活動(dòng)，每項(xiàng)的具體E-R圖如圖3所示。

4? ? 客戶端設(shè)計(jì)

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

根據(jù)需求分析設(shè)計(jì)出移動(dòng)學(xué)習(xí)APP客戶端包含的模塊有登錄、注冊(cè)、密碼找回、課程列表、資源模塊、課程活動(dòng)模塊、學(xué)習(xí)內(nèi)容模塊等，客戶端的功能模塊如圖4所示。

5? ? 結(jié)語(yǔ)

基于Hbuidler，HTML5Plus，MUI開發(fā)的跨平臺(tái)移動(dòng)學(xué)習(xí)APP，可以用簡(jiǎn)單、高效、用戶廣的HTML5、層疊樣式表3級(jí)（Cascading Style Sheets Level 3，CSS3），JavaScript等語(yǔ)言編寫程序，一次編寫可生成多種主流移動(dòng)平臺(tái)程序。從時(shí)間、財(cái)力、人力等多方都能節(jié)省成本，是一種有效和高效的移動(dòng)平臺(tái)APP開發(fā)方法。

[參考文獻(xiàn)]

[1]益點(diǎn)點(diǎn).有這六大頂級(jí)跨平臺(tái)開發(fā)神器，還單學(xué)啥Android、IOS開發(fā)[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òng)學(xué)習(xí)平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[D].南昌：江西財(cái)經(jīng)大學(xué)，2017.