使用HTML5开发手机APP分享

使用HTML5开发手机APP经验分享一、浅谈HTML5发展.......................................................................................................................2二、HTML5开发手机APP过去的劣势与当前的优势....................................................................2三、认识Hbuilder开发工具及MUI框架.....................................................................................3a)性能.....................................................................................................................................3b)工具.....................................................................................................................................3c)能力.....................................................................................................................................3d)最接近原生体验的高性能框架.........................................................................................4四、开发案例...................................................................................................................................5五、HTML5开发手机APP心得........................................................................................................8一、浅谈HTML5发展未来App的市场呈现一片光明景象，而对于移动开发商来说，不同平台的应用则需要开发不同的App来支持，无论在更新及维护上都需要一定的成本。于是更多人想到了基于HTML5的WebApp，目前主流操作系统iOS、Android以及WindowsPhone的浏览器都对于html5大部分特性的支持也更加突显HTML5在未来移动设备端的地位。Html5的特性在于对于开发者，可以更多地跨设备、跨平台使用。强大的跨平台性也为企业大大降低了开发成本、丰富的标签体系，也大大降低了应用开发的技术门槛。二、HTML5开发手机APP过去的劣势与当前的优势过去的HTML5切页白屏、转场卡顿、下拉刷新不流畅、侧滑菜单不流畅，HTML5技术无法对硬件底层的功能进行调用。众多问题逼迫开发者只能用原生技术解决。优势：1.离线缓存，2.音频视频自由嵌入，多媒体形式更为灵活，3、Canvas绘图，提升移动平台的绘图能力4、专为移动平台定制的表单元素三、认识Hbuilder开发工具及MUI框架a)性能：提升HTML5性能的手机端引擎，让侧滑菜单、下拉刷新等动态交互卡顿的问题得以解决;b)工具：HTML5开发IDE产品HBuilder,超快的编程利器;封装成跨平台的HTML5plus规范，并将规范公开于。包括二维码、摇一摇、语音输入、地图、支付、分享、文件系统、通讯录等常用API，可以方便简单的编写，并且可跨平台。c)能力：把40万原生API封装成JavaScript对象，以解决HTML5能力不足问题的Native.js技术;Native.js技术即在js中编写原生代码技术，突破浏览器的限制d)最接近原生体验的高性能框架：MUI框架，体积只有几十K，加载、运行远快于一般框架。HTML5plusRuntime，简称5+Runtime，是运行于手机端的强化web引擎，除了支持标准HTML5外，还支持更多扩展的jsapi，使得js的能力不输于原生。5+Runtime内置于HBuilder，在真机运行、打包时自动挂载。如果说node.js把js的战火烧到了服务器端，那么Native.js把js战火烧到了原生应用战场。但我们可以使用js直接调原生API，语法是js语法，API命名是原生命名。HTML5App的性能低下，有webview自身的性能问题，也有前端框架的性能问题。HTML5!=传统浏览器，虽然编程语言还是HTML、Javascript、CSS，但发行方式绝不是传统网站那么简单。HTML5应用的入口，反而很少是启动浏览器输入URL，它可以是存在于手机桌面的图标、也可以来自超级App(如微信朋友圈)、以及搜索引擎、应用市场、广告联盟，到处都是它的入口。它的入口，比原生App更多。通过HBuilder、5+Runtime、mui，我们很好的解决了HTML5的障碍，做到了与原生App一致的功能和体验。相关资源可登陆网站查询。四、开发案例使用工具：Hbuilder；注意事项：第一次使用需要在有网络情况下注册1、打开软件-Hbuilder2、点击新建移动App，弹出界面，并在应用名称中填写项目名字，选择模板中的mui项目3、点击完成，并打开项目中的index.html页面在body/body中加入一个按钮，点击时弹出对话框“你好”。scripttype=text/javascriptcharset=utf-8mui.init();functiontest(){alert(你好);}/script中定义test函数，button中使用onclick触发事件4、点击“发行”下拉菜单中“App打包”5、点击“打包”6、等制作状态变为“打包成功，下载完成”即可以点击“下载目录”获取app安装包五、HTML5开发手机APP心得对html5的各个标签元素熟悉，熟悉开发所使用的框架基本结构，对于html5+的API熟悉，扎实的后台语言基础，能实现调用相关语言包在javascript中实现前台与后台的通信。这样通过调用框架及HTML5实现前台页面的优化，调用html5+的相关API实现与后台的通讯，Hbuilder开发工具实现跨平台及app的打包及发行，最终高效的完成一款APP。