使用HTML5开发手机APP分享解说.doc

使用HTML5开发手机APP经验分享 TOC \o 1-3 \h \z \u  HYPERLINK \l _Toc433135318 一、浅谈HTML5发展  PAGEREF _Toc433135318 \h 2  HYPERLINK \l _Toc433135319 二、HTML5开发手机APP过去的劣势与当前的优势  PAGEREF _Toc433135319 \h 2  HYPERLINK \l _Toc433135320 三、认识Hbuilder开发工具及MUI框架  PAGEREF _Toc433135320 \h 3  HYPERLINK \l _Toc433135321 a) 性能  PAGEREF _Toc433135321 \h 3  HYPERLINK \l _Toc433135322 b) 工具  PAGEREF _Toc433135322 \h 3  HYPERLINK \l _Toc433135323 c) 能力  PAGEREF _Toc433135323 \h 3  HYPERLINK \l _Toc433135324 d) 最接近原生体验的高性能框架  PAGEREF _Toc433135324 \h 4  HYPERLINK \l _Toc433135325 四、开发案例  PAGEREF _Toc433135325 \h 5  HYPERLINK \l _Toc433135326 五、HTML5开发手机APP心得  PAGEREF _Toc433135326 \h 7  一、浅谈HTML5发展 未来App的市场呈现一片光明景象，而对于移动开发商来说，不同平台的应用则需要开发不同的App来支持，无论在更新及维护上都需要一定的成本。于是更多人想到了基于HTML5的Web App，目前主流操作系统iOS、Android以及Windows Phone的浏览器都对于html5大部分特性的支持也更加突显HTML5在未来移动设备端的地位。 Html5的特性在于对于开发者，可以更多地跨设备、跨平台使用。强大的跨平台性也为企业大大降低了开发成本、丰富的标签体系，也大大降低了应用开发的技术门槛。 二、HTML5开发手机APP过去的劣势与当前的优势 过去的HTML5切页白屏、转场卡顿、下拉刷新不流畅、侧滑菜单不流畅，HTML5技术无法对硬件底层的功能进行调用。众多问题逼迫开发者只能用原生技术解决。 优势：1.离线缓存，2.音频视频自由嵌入，多媒体形式更为灵活，3、Canvas绘图，提升移动平台的绘图能力4、专为移动平台定制的表单元素 三、认识Hbuilder开发工具及MUI框架 a) 性能：提升HTML5性能的手机端引擎，让侧滑菜单、下拉刷新等动态交互卡顿的问题得以解决; b) 工具：HTML5开发IDE产品HBuilder, 超快的编程利器;封装成跨平台的HTML5plus规范，并将规范公开于www.HTML5。包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。 c) 能力：把40万原生API封装成JavaScript对象，以解决HTML5能力不足问题的Native.js技术;Native.js技术即在js中编写原生代码技术，突破浏览器的限制 d) 最接近原生体验的高性能框架：MUI框架，体积只有几十K，加载、运行远快于一般框架。 HTML5plus Runtime，简称5+ Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的js api，使得js的能力不输于原生。5+ Runtime内置于HBuilder，在真机运行、打包时自动挂载。如果说node.js把js的战火烧到了服务器端，那么Native.js把js战火烧到了原生应用战场。但我们可以使用js直接调原生API，语法是js语法，API命名是原生命名。 HTML5 App的性能低下，有webview自身的性能问题，也有前端框架的性能问题。 HTML5!=传统浏览器，虽然编程语言还是HTML、Javascript、CSS，但发行方式绝不是传统网站那么简单。HTML5应用的入口，反而很少是启动浏览器输入URL，它可以是存在于手机桌面的图标、也可以来自超级App(如微信朋友圈)、以及搜索引擎、应用市场、广告联盟，到处都是它的入口。它的入口，比原生App更多。 通过HBuilder、5+ Runtime、mui，我们很好的解决了HTML5的障碍，做到了与原生App一致的功能和体验。相关资源可登陆网站 http://www.dcloud.io查询。