基于HTML5+技术的教学质量管理系统移动端APP的开发研究

胡世港++田樱

摘要：HTML5 Plus移动App，简称HTML5+App，是一种将HTML5+ Runtime和HTML、JS、CSS混编成APK后运行于手机端的App，它可以通过扩展的Javascript API调用手机的原生功能，实现与原生App同样强大的性能。文中首先介绍了HTML5+ 技术的新特性和应用前景，并分析比较了HTML5+ App和mobile web的区别，最后阐述了使用HTML5+技术开发高职院校教学质量管理系统移动端APP的完整过程。

关键词：HTML5+； 移动设备； HBuilder；教学质量管理

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2015）21-0023-03

Research on the Development of APP Based on HTML5+ for Teaching Quality Management System

HU Shi-gang， TIAN Ying

（Academy of Information Technology， Hubei Polytechnic Institute， Xiaogan 432000，China）

Abstract： HTML5 plus mobile app， referred to as HTML5+App is a will HTML5+ runtime and HTML， JS， CSS mixed into APK after running to the end of the phone app， it can through the extended JavaScript API phone call native functions， the realization of the native app with the same powerful performance. In this paper， the new characteristics and application prospect of HTML5+ technology are introduced， and the differences between App mobile and web HTML5+ are analyzed and compared. Finally， the whole process of developing the APP of the mobile terminal of the teaching quality management system in higher vocational colleges is described.

Key words： HTML5+； mobile device； HBuilder； teaching quality management

早在2012年湖北职业技术学院就已建成一套适合高职院校的质量管理系统，以实现高职院校教学质量管理的信息化、数字化和无纸化，可供学校管理者、教师、在校学生、毕业生以及社会各界等使用本软件系统，达到共同参与学校教学质量管理的目的，大幅提高了质量管理效率，并且做到了对教学质量管理的精细化。

随着移动互联网的快速发展，每个学生都拥有一部智能手机，接入互联网获取信息变得触手可及。在这个提前下，如何让学生通过手机来随时随地参与教学质量管理，对教学效果进行评价并提出教学建议，这就需要开发一款手机APP来实现，于是如何开发教学质量管理系统移动端APP成为我们的研究课题，经过资料查阅和技术分析后，我们决定采用HTML5+技术来开发移动端APP。

1 HTML5+技术介绍

通过HTML5开发移动App时，会发现HTML5很多能力不具备。为弥补HTML5能力的不足，在W3C中国的指导下成立了www.html5plus.org组织，推出HTML5+规范。HTML5+规范是一个开放规范，允许第三方浏览器厂商或其他手机runtime制造商实现。HTML5+扩展了JavaScript对象plus，使得js可以调用各种浏览器无法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

利用HBuilder的手机原生能力调用有两个方法，一是HTML5+规范里定义了跨手机平台的能力调用，比如二维码、语音输入，使用plus.barcode和plus.speech，编写一次，可跨平台运行；二是Native.js技术把几十万原生API封装成了js对象，通过js可以直接调ios和android的原生API，弥补了大量的API无法被HTML5使用的缺憾。

使用HTML5+开发的移动App并非mobile web页面，因为mobile web的文件存放在web服务器上，而移动App的文件存放在手机本地，编写移动App的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。其实，Web App仍然是B/S结构，而移动App是C/S结构甚至是可以离线运行的单机应用。

2 HTML5+应用架构

早期的移动APP必须针对iOS、Android和WP开发不同版本，导致开发成本过高，开发周期过长，为了实现跨平台移动APP的开发，引入了HTML5+技术。HTML5+对JavaScript对象plus进行了扩展，从而使得Javascript就可以调用各种浏览器无法实现的原生系统功能，单纯的Javascript 框架无法解决以上问题，plus 对象需要系统底层的支持。DCloud 的跨平台HTML5+ Runtime 里已经实现对plus 对象的支持，该HTML5+应用架构分为两层，底层是HTML5+ Runtime，支持iOS、Android和WP智能手机操作系统，上层是HTML5+ Resource，包括APP配置参数manifest.json，以及html、js、css 和图片文件。HBuilder作为HTML5+ APP的开发工具，集成了DCloud 的HTML5+ Runtime，使用HBuilder 打包APP时，可以把项目中的html、js、css 和HTML5+ Runtime混编打包成apk或ipa 文档。HTML5+ Runtime 也可以理解为一种实现了plus 对象的、没有地址栏的增强浏览器内核。HTML5Plus.org制定了开放的plus 规范，基于HTML5+规范开发自己的手机端应用，对任何公司或个人都是免费的。HTML5+应用架构，如图1所示。

3 MUI前端框架

移动App开发者放弃HTML5的首要原因就是性能和体验的巨大差距，使用HTML5开发出来的App存在转页动画不忍直视，浏览器换页出现白屏，浮动元素容易抖动、下拉刷新不够流畅等问题，特别是在Android低端机上运行效率很差，同时浏览器默认控件样式很少，很难制作出一个漂亮的控件，虽然有一些制作简单的ui框架封装了部分空间，但是性能低下。

mui前端框架是一个可以方便开发出高性能App的框架，它有效的解决了以上问题，其定位是最接近原生体验的移动App的UI框架，mui的特点是只为移动App而生，界面风格原生化，且轻、小、只涉及UI。mui框架不是jQuery，不封装dom操作。mui框架通过调用HTML5+ Runtime的增强能力 plus.webview和plus.nativeUI来提升用户体验。不过mui框架并不是要替代HTML5+，也不会把所有HTML5+的webview api都封装一层。mui框架封装了一些常用的窗体操作，不过遇到复杂窗体开发，还是要深入学习plus.webview。

mui框架由mui.min.css等样式表、mui.min.js等Javascript文件以及mui.ttf字体文件所组成，因此，在开发HTML5+页面时，需要使用语句引入默认样式表，使用

公司地址: 北京市西城区德外大街83号德胜国际中心B-11

客服热线：400-656-5456  客服专线：010-56265043  电子邮箱：longyuankf@126.com

电信与信息服务业务经营许可证：京icp证060024号

Dragonsource.com Inc. All Rights Reserved