论文部分内容阅读
摘 要：采用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” 本文以“网页设计App”为例，重点分析以上关键技术在开发该App上的应用。开发完成后的App主要是为了满足没有电脑的学生在课余时间进行网页设计代码编辑实操的需求而设计的，是课后进行上机操作的重要手段，是对传统实训课的有效补充。
1.系统功能需求
（1）该App移动客户端的主体功能需求如下。
登录：用户完成注册或登录后便可正常使用该App。
新建：用户可以通过新建一个项目进行网页设计代码的编辑。
浏览：用户通过该模块可以预览编辑好的网页页面效果。
导入：用户可以通过该模块导入代码文件，实现快速编辑。
删除：用户可以对无效或错误的文件进行删除，减少冗余。
退出：用户完成编辑等操作后可以实时退出App，以释放手机内存空间。
（2）移动后端（服务器）的主体功能需求如下。
用户管理：管理员可以对注册用户的信息进行查询、整理及删除等操作。
更新管理：开发人员可以实时将新版本的App推送给客户，或對客户端进行更新、升级等管理操作。
2.系统框架设计
根据系统功能需求，应用系统总体架构分为移动客户端部分和服务器端部分。移动客户端分为应用层、应用框架层及操作系统层。而服务器端主要采用MySQL数据库进行用户管理和更新管理，如图1所示。
3.系统关键技术分析
在“网页设计App”开发中，选用MUI框架开发手机端和用Ajax技术开发后台管理端，采用JDK 1.7集成开发环境和Tomcat7作为服务器。选择MySQL作为数据库，采用目前兼容性较好的PHP编程语言。手机操作系统采用Android4.3版本，使用MVC（Model-View-Controller）模式，将UI界面、数据和业务逻辑进行了分离，并且使用了JavaScript技术来实现Web页面的交互;用jQuery框架简化了JavaScript编程。另外，我们采用SSM（SpringMVC-Spring-Mybatis）框架技术来实现Web后台业务。并且在移动前、后端的请求及数据的传输中，采用了JSON（JavaScript Object Notation）的方法。
4.主体界面设计
以笔者所在学校学生目前学习的《HTML5网页设计》课程第三章“设计携程旅游网页”为例。在以往的传统课程上，学生只能在上课期间利用学校机房电脑设备进行上机操作，但上课的时间毕竟有限，一个功能完善的网页往往无法在有限的上课时间内完成，导致许多学生无法完成课程实训。
另外，由于课程的不连续性，学生再次进行网页课程实训的时间往往是一周之后。因此，许多学生已经遗忘上一节课程所学习的内容，导致知识的不连贯性。
《HTML5网页设计》课程的目的是教会学生能进行跨平台网页代码设计，写成后的代码能适应PC电脑和各种移动终端，而学校机房的软件设备往往只能支持PC端的验证效果，学生只能查看自己设计的PC端网页效果，而无法查看到在移动端的效果。因此不能很好地验证自己所设计代码的正确性。
采用MUI框架技术开发的“网页设计”App可以克服以上的缺点，学生在手机端下载App后，可以随时随地地进行课程实操，既弥补了机房的局限，又保持了知识的连贯性。App主体采用简约式的风格进行设计，简单易懂。
学生打开App后，可以直接在页面底部导航栏中根据需要选择合适的功能板块进行网页设计（如图2所示）。在新建好项目后便可直接进入编辑页面，进行网页代码编辑，代码编辑完成后，点击页面底部导航栏中的“浏览”功能便可预览自己设计的网页效果，并可以根据预览效果对代码进行修改。此外，App还具有批量导入及删除功能，可以满足学生日常学习的需要。
另外，该款App有实时更新功能，支持客户端免费在线更新。完成更新后的App将会给用户带来更好的体验。
5.基于MUI的跨平台移动技术开发App的优、缺点
（1）优点。由以上的实例可以看出，利用MUI技术开发的App应用不仅可以支持IOS和Android等多系统平台，而且UI风格简洁美观，在开发过程中使用的程序语言简单易懂，缩短了开发时间，降低了开发成本。
（2）缺点。经过一定时间的实践检验后发现，虽然我们所开发的移动网页设计App实现了跨平台操作，但如今市面上的移动终端无论在硬件或软件系统上均存在着各种细微的差别，导致一小部分学生在使用编辑器时会出现移动终端与App不兼容或卡顿现象。所以，今后我们将进一步研究应用自动差量更新技术，希望通过后续的技术改良能使用户有更加愉快的体验。
五、小结
综上所述，由于MUI框架技术的轻小、接近原生等特点，不仅给开发者带来了方便，减轻了开发者的负担，还给用户带来了良好的体验。目前，基于此开发技术设计的移动网页设计编辑器在总体上能满足在校生在课后进行网页设计实操训练的需要，弥补了传统实训课在课下无法进行操作的空白，同时也创新了教学模式，为师生们带来了极大的方便。
参考文献：
[1]张艳红，杨立峰，李丽娜.基于Web App交互式移动学习平台的远程开放教育教学结构探索[J].当代教育实践与教学研究，2018（11）.
[2]潘晓梦，邓建华，苏厚勤.一种跨平台移动应用方案的研究与实践[J].计算机应用与软件，2013（1）.
[3]赵甜，姜久雷.一种基于MUI的跨平台移动应用开发方案[J].电脑编程技巧与维护，2017（7）.
[4]严春燕，戴仕明.基于框架的web前端（Bootstrap和MUI）之比较[J].网络安全技术与应用，2017（4）.
[5]曹萍萍，孙伟，雷晖等.基于MUI的通用照片处理技术研究[J].电脑知识与技术，2019（13）.
（作者单位：茂名市高级技工学校）
关键词：跨平台 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” 本文以“网页设计App”为例，重点分析以上关键技术在开发该App上的应用。开发完成后的App主要是为了满足没有电脑的学生在课余时间进行网页设计代码编辑实操的需求而设计的，是课后进行上机操作的重要手段，是对传统实训课的有效补充。
1.系统功能需求
（1）该App移动客户端的主体功能需求如下。
登录：用户完成注册或登录后便可正常使用该App。
新建：用户可以通过新建一个项目进行网页设计代码的编辑。
浏览：用户通过该模块可以预览编辑好的网页页面效果。
导入：用户可以通过该模块导入代码文件，实现快速编辑。
删除：用户可以对无效或错误的文件进行删除，减少冗余。
退出：用户完成编辑等操作后可以实时退出App，以释放手机内存空间。
（2）移动后端（服务器）的主体功能需求如下。
用户管理：管理员可以对注册用户的信息进行查询、整理及删除等操作。
更新管理：开发人员可以实时将新版本的App推送给客户，或對客户端进行更新、升级等管理操作。
2.系统框架设计
根据系统功能需求，应用系统总体架构分为移动客户端部分和服务器端部分。移动客户端分为应用层、应用框架层及操作系统层。而服务器端主要采用MySQL数据库进行用户管理和更新管理，如图1所示。
3.系统关键技术分析
在“网页设计App”开发中，选用MUI框架开发手机端和用Ajax技术开发后台管理端，采用JDK 1.7集成开发环境和Tomcat7作为服务器。选择MySQL作为数据库，采用目前兼容性较好的PHP编程语言。手机操作系统采用Android4.3版本，使用MVC（Model-View-Controller）模式，将UI界面、数据和业务逻辑进行了分离，并且使用了JavaScript技术来实现Web页面的交互;用jQuery框架简化了JavaScript编程。另外，我们采用SSM（SpringMVC-Spring-Mybatis）框架技术来实现Web后台业务。并且在移动前、后端的请求及数据的传输中，采用了JSON（JavaScript Object Notation）的方法。
4.主体界面设计
以笔者所在学校学生目前学习的《HTML5网页设计》课程第三章“设计携程旅游网页”为例。在以往的传统课程上，学生只能在上课期间利用学校机房电脑设备进行上机操作，但上课的时间毕竟有限，一个功能完善的网页往往无法在有限的上课时间内完成，导致许多学生无法完成课程实训。
另外，由于课程的不连续性，学生再次进行网页课程实训的时间往往是一周之后。因此，许多学生已经遗忘上一节课程所学习的内容，导致知识的不连贯性。
《HTML5网页设计》课程的目的是教会学生能进行跨平台网页代码设计，写成后的代码能适应PC电脑和各种移动终端，而学校机房的软件设备往往只能支持PC端的验证效果，学生只能查看自己设计的PC端网页效果，而无法查看到在移动端的效果。因此不能很好地验证自己所设计代码的正确性。
采用MUI框架技术开发的“网页设计”App可以克服以上的缺点，学生在手机端下载App后，可以随时随地地进行课程实操，既弥补了机房的局限，又保持了知识的连贯性。App主体采用简约式的风格进行设计，简单易懂。
学生打开App后，可以直接在页面底部导航栏中根据需要选择合适的功能板块进行网页设计（如图2所示）。在新建好项目后便可直接进入编辑页面，进行网页代码编辑，代码编辑完成后，点击页面底部导航栏中的“浏览”功能便可预览自己设计的网页效果，并可以根据预览效果对代码进行修改。此外，App还具有批量导入及删除功能，可以满足学生日常学习的需要。
另外，该款App有实时更新功能，支持客户端免费在线更新。完成更新后的App将会给用户带来更好的体验。
5.基于MUI的跨平台移动技术开发App的优、缺点
（1）优点。由以上的实例可以看出，利用MUI技术开发的App应用不仅可以支持IOS和Android等多系统平台，而且UI风格简洁美观，在开发过程中使用的程序语言简单易懂，缩短了开发时间，降低了开发成本。
（2）缺点。经过一定时间的实践检验后发现，虽然我们所开发的移动网页设计App实现了跨平台操作，但如今市面上的移动终端无论在硬件或软件系统上均存在着各种细微的差别，导致一小部分学生在使用编辑器时会出现移动终端与App不兼容或卡顿现象。所以，今后我们将进一步研究应用自动差量更新技术，希望通过后续的技术改良能使用户有更加愉快的体验。
五、小结
综上所述，由于MUI框架技术的轻小、接近原生等特点，不仅给开发者带来了方便，减轻了开发者的负担，还给用户带来了良好的体验。目前，基于此开发技术设计的移动网页设计编辑器在总体上能满足在校生在课后进行网页设计实操训练的需要，弥补了传统实训课在课下无法进行操作的空白，同时也创新了教学模式，为师生们带来了极大的方便。
参考文献：
[1]张艳红，杨立峰，李丽娜.基于Web App交互式移动学习平台的远程开放教育教学结构探索[J].当代教育实践与教学研究，2018（11）.
[2]潘晓梦，邓建华，苏厚勤.一种跨平台移动应用方案的研究与实践[J].计算机应用与软件，2013（1）.
[3]赵甜，姜久雷.一种基于MUI的跨平台移动应用开发方案[J].电脑编程技巧与维护，2017（7）.
[4]严春燕，戴仕明.基于框架的web前端（Bootstrap和MUI）之比较[J].网络安全技术与应用，2017（4）.
[5]曹萍萍，孙伟，雷晖等.基于MUI的通用照片处理技术研究[J].电脑知识与技术，2019（13）.
（作者单位：茂名市高级技工学校）