黃鶯

摘 要：采用HTML5的跨平臺(tái)技術(shù)，并將MUI框架和Ajax技術(shù)相結(jié)合的移動(dòng)App開發(fā)方案，有利于解決HTML5開發(fā)Web App無法調(diào)用平臺(tái)資源的問題，又可以使開發(fā)者在不進(jìn)行原生App開發(fā)的情況下，讓用戶實(shí)現(xiàn)最接近原生App的體驗(yàn)效果?；诖朔桨搁_發(fā)的“網(wǎng)頁設(shè)計(jì)App”是最好的例證，該款A(yù)pp滿足了技工院校計(jì)算機(jī)專業(yè)學(xué)生在課后可以隨時(shí)隨地進(jìn)行網(wǎng)頁設(shè)計(jì)的需求，并且?guī)砹肆己玫捏w驗(yàn)。

關(guān)鍵詞：跨平臺(tái) App MUI 移動(dòng)應(yīng)用

一、研究背景

1.技工院校教學(xué)模式的變革

近年來移動(dòng)互聯(lián)網(wǎng)技術(shù)發(fā)展迅速，移動(dòng)應(yīng)用設(shè)備也層出不窮，因此，對于移動(dòng)端App項(xiàng)目的開發(fā)要求也越來越高。在國外職教領(lǐng)域中，人機(jī)交互的移動(dòng)應(yīng)用模式已經(jīng)得到了廣泛應(yīng)用，甚至變成了主流教育模式。移動(dòng)App的廣泛應(yīng)用也使教師的角色發(fā)生了很大的變化，教師角色正逐步由教師主導(dǎo)向以學(xué)生為主體轉(zhuǎn)變。教學(xué)模式變成了以學(xué)生為中心的定位模式，創(chuàng)新了傳統(tǒng)的教學(xué)模式。實(shí)踐證明，這種模式在開展創(chuàng)新實(shí)踐教學(xué)活動(dòng)方面更為成功。但在國內(nèi)技工教育系統(tǒng)中，這種模式還處在起步階段，所以，開發(fā)一種面向技工院校學(xué)生課程學(xué)習(xí)使用的App，成為技工院校教學(xué)工作的當(dāng)務(wù)之急。

2.學(xué)生學(xué)習(xí)方式的變革

目前我國社會(huì)經(jīng)濟(jì)正處于高速發(fā)展時(shí)期，國民學(xué)習(xí)進(jìn)入了微學(xué)習(xí)的時(shí)代，碎片化學(xué)習(xí)的方式已經(jīng)漸漸演變成為一種可接受的學(xué)習(xí)形式。學(xué)生可以通過各種移動(dòng)終端（如手機(jī)）進(jìn)行在線學(xué)習(xí)。與傳統(tǒng)的在校學(xué)習(xí)或者是在固定的場所、固定的時(shí)間之內(nèi)利用臺(tái)式電腦進(jìn)行學(xué)習(xí)和實(shí)操相比，不受時(shí)間和地域限制的移動(dòng)學(xué)習(xí)方式更受學(xué)生們的歡迎，此種方式可以滿足學(xué)生隨時(shí)隨地獲取知識(shí)和實(shí)操技能的需求。因此，移動(dòng)學(xué)習(xí)成為當(dāng)前技工教育一種重要的新型學(xué)習(xí)方式，同時(shí)也為構(gòu)建終身學(xué)習(xí)型社會(huì)提供了有利的條件。

3.研究內(nèi)容的來源

近年來，茂名市技工學(xué)校在開發(fā)移動(dòng)式學(xué)習(xí)平臺(tái)方面不斷探索。2018年，課題《基于云服務(wù)的數(shù)字化校園建設(shè)研究》作為茂名市科技局科研項(xiàng)目通過立項(xiàng)研究，希望通過跨平臺(tái)移動(dòng)教學(xué)平臺(tái)開發(fā)應(yīng)用研究，為學(xué)校的學(xué)生提供一個(gè)高效、實(shí)用、可隨時(shí)隨地進(jìn)行學(xué)習(xí)和交流的環(huán)境。

二、跨平臺(tái)移動(dòng)App開發(fā)技術(shù)

1.概述

隨著5G技術(shù)、終端設(shè)備和系統(tǒng)軟件的不斷完善，移動(dòng)設(shè)備的計(jì)算能力和網(wǎng)絡(luò)速度等各方面也有了明顯提高，各種移動(dòng)終端的App也迅速增長。目前，Android、iOS和Symbian三大平臺(tái)占據(jù)了全球市場的主導(dǎo)地位。一款A(yù)pp的研發(fā)，往往需要針對上述三種平臺(tái)各開發(fā)一套與之相適應(yīng)的方案，這必將會(huì)造成開發(fā)成本上升，甚至造成資源浪費(fèi)。因此，提出一個(gè)跨平臺(tái)的移動(dòng)應(yīng)用技術(shù)解決方案勢在必行。

2.各種移動(dòng)開發(fā)方案的比較分析

目前主要的開發(fā)方案有三種：B/S結(jié)構(gòu)的Web應(yīng)用程序、原生客戶端應(yīng)用程序和基于HTML5的移動(dòng)終端應(yīng)用程序。三種開發(fā)技術(shù)的特點(diǎn)如下。

（1）B/S結(jié)構(gòu)下的Web應(yīng)用主要程序是指在B/S模式下，使用Web瀏覽器技術(shù)完成一個(gè)或多個(gè)進(jìn)程?？梢钥闯銎涮攸c(diǎn)是能夠方便快捷地調(diào)用網(wǎng)絡(luò)上的各種資源，但它不能調(diào)用移動(dòng)終端的系統(tǒng)功能，也不能使用移動(dòng)終端提供的各種高級(jí)硬件功能，例如攝像機(jī)、視頻和音頻錄制和傳輸?shù)取?/p>

（2）原生客戶終端應(yīng)用程序與B/S結(jié)構(gòu)的Web應(yīng)用剛好相反。原生客戶端應(yīng)用程序基于Java語言開發(fā)，它通常是安裝在移動(dòng)終端設(shè)備上，所以它可以靈活地調(diào)用移動(dòng)終端的各種硬件功能，如手機(jī)攝像頭、揚(yáng)聲器、速度傳感器等。因此，這種開發(fā)技術(shù)的特點(diǎn)是用戶可以從終端應(yīng)用市場上自由下載所需的軟件。但是針對不同的移動(dòng)操作系統(tǒng)，需要單獨(dú)開發(fā)相應(yīng)的應(yīng)用程序，增加了開發(fā)成本。

（3）HTML5的移動(dòng)端開發(fā)的應(yīng)用程序，主要運(yùn)用了HTML5、CSS3和JavaScript相結(jié)合的技術(shù)進(jìn)行開發(fā)，網(wǎng)頁頁面效果有了明顯改善，同時(shí)，JS接口函數(shù)的使用可以使應(yīng)用程序靈活地調(diào)用移動(dòng)終端的各項(xiàng)硬件功能。另外，在數(shù)據(jù)傳輸方面，一般情況下，靜態(tài)網(wǎng)頁資源是存儲(chǔ)在服務(wù)器端的，在用戶需要的時(shí)候，即點(diǎn)擊瀏覽后才被調(diào)用至移動(dòng)終端，實(shí)現(xiàn)實(shí)時(shí)加載。這種技術(shù)開發(fā)方案具有跨平臺(tái)性及可擴(kuò)展性。

因此，采用HTML5的移動(dòng)端開發(fā)模式，結(jié)合MUI前端框架技術(shù)，是目前眾多移動(dòng)應(yīng)用開發(fā)者首選的方案之一，也是本文采用的主要技術(shù)方法。

三、相關(guān)技術(shù)

1.MUI框架技術(shù)概述

MUI框架是一種基于ratchet技術(shù)的前端開發(fā)框架，它的核心技術(shù)是WebView。由DCLOUD公司研發(fā)，它為開發(fā)人員提供了一系列UI組件：如消息框、列表、開關(guān)和折疊面板等。另外，它的CSS的預(yù)定義樣式、預(yù)加載、WebView交互效果等功能很好地解決了App應(yīng)用常見的下拉刷新不流暢、SPA模式動(dòng)畫卡頓和切頁白屏等問題，使App的開發(fā)由復(fù)雜變得簡單，大大提高了開發(fā)效率。它是最接近原生體驗(yàn)的App框架。MUI框架結(jié)合HBuilder軟件，可以使開發(fā)者更加方便地進(jìn)行Wep App的開發(fā)、設(shè)計(jì)和一鍵打包工作，并最終生成可以發(fā)布的跨平臺(tái)App應(yīng)用。它是最接近原生體驗(yàn)的前端框架技術(shù)。

2.Ajax技術(shù)概述

Ajax是一種基于異步XML和JavaScript的通信技術(shù)。它支持返回格式的數(shù)據(jù)類型，如XML、JSON和Script等。Ajax技術(shù)的原理是客戶端通過XMLHttpRequest組件向服務(wù)器端發(fā)出請求以獲取數(shù)據(jù)，服務(wù)器再通過JavaScript將實(shí)時(shí)更新的數(shù)據(jù)（如頁面內(nèi)容）顯示在客戶端瀏覽器上。利用這種技術(shù)，客戶端與服務(wù)器端之間實(shí)現(xiàn)了異步傳輸，所以我們在移動(dòng)端（如手機(jī)）就能看到頁面的動(dòng)態(tài)更新。

本文將介紹一個(gè)由本校師生團(tuán)隊(duì)開發(fā)的App應(yīng)用實(shí)例，正是采用上述的mui.ajax和JSON技術(shù)來進(jìn)行開發(fā)的。

四、應(yīng)用實(shí)例——“網(wǎng)頁設(shè)計(jì)App”