基于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”