基于MUI的跨平臺移動App開發研究

黃鶯

摘 要：采用HTML5的跨平臺技術，并將MUI框架和Ajax技術相結合的移動App開發方案，有利于解決HTML5開發Web App無法調用平臺資源的問題，又可以使開發者在不進行原生App開發的情況下，讓用戶實現最接近原生App的體驗效果。基于此方案開發的“網頁設計App”是最好的例證，該款App滿足了技工院校計算機專業學生在課后可以隨時隨地進行網頁設計的需求，并且帶來了良好的體驗。

關鍵詞：跨平臺 App MUI 移動應用

一、研究背景

1.技工院校教學模式的變革

近年來移動互聯網技術發展迅速，移動應用設備也層出不窮，因此，對于移動端App項目的開發要求也越來越高。在國外職教領域中，人機交互的移動應用模式已經得到了廣泛應用，甚至變成了主流教育模式。移動App的廣泛應用也使教師的角色發生了很大的變化，教師角色正逐步由教師主導向以學生為主體轉變。教學模式變成了以學生為中心的定位模式，創新了傳統的教學模式。實踐證明，這種模式在開展創新實踐教學活動方面更為成功。但在國內技工教育系統中，這種模式還處在起步階段，所以，開發一種面向技工院校學生課程學習使用的App，成為技工院校教學工作的當務之急。

2.學生學習方式的變革

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

3.研究內容的來源

近年來，茂名市技工學校在開發移動式學習平臺方面不斷探索。2018年，課題《基于云服務的數字化校園建設研究》作為茂名市科技局科研項目通過立項研究，希望通過跨平臺移動教學平臺開發應用研究，為學校的學生提供一個高效、實用、可隨時隨地進行學習和交流的環境。

二、跨平臺移動App開發技術

1.概述

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

2.各種移動開發方案的比較分析

目前主要的開發方案有三種：B/S結構的Web應用程序、原生客戶端應用程序和基于HTML5的移動終端應用程序。三種開發技術的特點如下。

（1）B/S結構下的Web應用主要程序是指在B/S模式下，使用Web瀏覽器技術完成一個或多個進程。可以看出其特點是能夠方便快捷地調用網絡上的各種資源，但它不能調用移動終端的系統功能，也不能使用移動終端提供的各種高級硬件功能，例如攝像機、視頻和音頻錄制和傳輸等。

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

（3）HTML5的移動端開發的應用程序，主要運用了HTML5、CSS3和JavaScript相結合的技術進行開發，網頁頁面效果有了明顯改善，同時，JS接口函數的使用可以使應用程序靈活地調用移動終端的各項硬件功能。另外，在數據傳輸方面，一般情況下，靜態網頁資源是存儲在服務器端的，在用戶需要的時候，即點擊瀏覽后才被調用至移動終端，實現實時加載。這種技術開發方案具有跨平臺性及可擴展性。

因此，采用HTML5的移動端開發模式，結合MUI前端框架技術，是目前眾多移動應用開發者首選的方案之一，也是本文采用的主要技術方法。

三、相關技術

1.MUI框架技術概述

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

2.Ajax技術概述

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

本文將介紹一個由本校師生團隊開發的App應用實例，正是采用上述的mui.ajax和JSON技術來進行開發的。

四、應用實例——“網頁設計App”