使用HTML5开发手机APP分享报告.doc

使用HTML5开发手机APP经验分享 一、浅谈HTML5发展 2 二、HTML5开发手机APP过去的劣势与当前的优势 2 三、认识Hbuilder开发工具及MUI框架 3 a) 性能 3 b) 工具 3 c) 能力 3 d) 最接近原生体验的高性能框架 4 四、开发案例 5 五、HTML5开发手机APP心得 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查询。 四、开发案例 使用工具：Hbuilder； 注意事项：第一次使用需要在有网络情况下注册 打开软件-Hbuilder 2、点击新建移动App，弹出界面，并在应用名称中填写项目名字，选择模板中的mui项目 点击完成，并打开项目中的index.html页面 在body/body中加入一个按钮，点击时弹出对话框“你好”。 script type=text/javascript charset=utf-8 mui.init(); function test(){ alert(你好); } /script中定义test函数，button中使用onclick触发事件 4、点击“发行”下拉菜单中“App打包” 5、点击“打包” 6、等制作状态变为“打包成功，下载完成”即可以点击“下载目录”获取app安装包 五、HTML5开发手机APP心得 对html5的各个标签元素熟悉，熟悉开发所使用的框架基本结构，对于html5+的API熟悉，扎实的后台语言基础，能实现调用相关语言包在javascript中实现前台与后台的通信。 这样通过调用框架及HTML5实现前台页面的优化，调用html5+的相关API实现与后台的通讯，Hbuilder开发工