随着HTML5规范的发布以及chrome、Safari、firefox等浏览器的大规模支持,HTML5的开发得到了广泛使用,随后延伸到了APP端的开发。这一两年来,使用HTML5在APP端的开发形成了一股不小的热潮,让原本许多web开发的工程师们也能以比较低的学习成本踏入了App端的开发。在一些极端的情况下,还能实现一次开发,多平台发布的优势。在这么一个优势驱使下,一些优秀的hybrid App更是带动了这一潮流的涌动。
在这之中,老牌的hybrid App中间件有phoneGap、AppCan等,其中phoneGap只提供了js到Android API的中间层转换,也就是说开发者还需要去找个js组件与phoneGap结合下,才能快速开发出有模有样App,不然事件响应和样式,可以把人整死;对于AppCan呢,据说是国人在phoneGap的基础上做了二次开发的产物,具体就没去研究了,提供有的事件响应和样式的框架包给使用,但是开发文档写得是在不敢恭维,不过聊胜于无。
另外还有个比较重要的事要说下,phoneGap与AppCan都是基于单Webview模式的,简单来说,也就是所有的界面都是运行在一个标签页上的,在页面切换之间,很容易就出现性能以及白屏问题,我在测试的时候发现几乎每次跳转都是白屏,跳转时的界面渲染也有延迟感。简单提及一下,我的测试机是小米三,应该不存在太大的性能问题。
在选技术的过程中,发现了DCloud出的HBuilder,顺藤摸瓜找到了相应的HTML5+以及mui框架。下面说说我这几个月来得感受吧。
HBuilder:
先来看看官网上的图片:
HBuilder是一款深度集成eclipse的IDE编辑器,但其主要是集中在web端的开发,不能进行Java等后台开发,也不需要集成Android SDK。其集成了对通用js、jquery、HTML5+、mui等语法的提示功能,还有很多快捷键,在编码过程中可以实现飞一般的感觉,十分有geek的感觉。比如当我想打document.querySelectorAll("")的时候,我只需要键入dq然后回车就行,光标还会定位到双引号之间,省了很多打繁琐代码的时间。虽然很多快捷键都有一套规律可循,但还是需要动脑子想想的,比如我就觉得打document.querySelector("")就比较疑惑,实在不知道该怎么快速键入,可能是我没发觉到的原因吧,或者需要自定义快捷键,我没去折腾。还有就是一些快捷键比较反eclipse,比如【转到定义】,eclipse是Ctrl+右键就行了,而HBuilder需要Ctrl+Alt+D。官网首页有飞一般编码的演示,大家可以去看看,这个算是此IDE的一大特色吧,我就不多说了
HBuilder也集成了eclipse market,用过eclipse的都知道这个是好东西,我就不多说了。
说到这,也许有些读者会对HBuilder存在疑惑:只能作为HTML开发的IDE怎么做成apk。DCloud提供了一种简单的方式【云打包】,只要开发者信得过DCloud,完全就可以把代码上传然后在云端打包,等短暂的时间就打包并下载到本地了,十分方便。但是,如果你不想进行云打包也是可以的,只不过又回归到正常的Android开发过程了:先有本地Android SDK平台->然后是eclipse的Android支持->新建一个Android程序->导入HTML5+的jar包->开发程序->按正常的Android模式在本地打包。整个过程中,除了开发与正常的Android开发不一样之外,其他均一致。
但是按照上面的打包方式,就比较纠结了,比如我很喜欢用HBuilder那飞一般的编码快捷,但是又需要用到本地打包,那我该怎么办呢?确实比较难办,现阶段也没什么比较geek的解决方法。我比较土,在HBuilder里写HTML,然后再到eclipse中打包。真是土到家了,DCloud以后应该要去解决这个问题才对,不然geek不起来了。
我个人是觉得,除非是比较小型的应用,可以完全用HTML实现,不然本地打包是必须的。主要还是因为HTML5+中好多Android SDK的API都没实现,比如最最常用的微博登陆微信登陆都没有,必须自己去写插件,一旦写插件了,本地打包就是必须有的了。想想也是醉了。
HTML5+
HTML5+是对接AndroidSDK与页面的中间件,用于页面通过js调用底层的SDK接口,比如弹出个窗口、拍照、录音等。
据我查阅其API,大部分的常用接口都已经实现了,只不过当你用到很细致的时候,你就会想抓急了。比如我使用的文件上传功能,不知道为何会出现两次请求到后端,但是第一次请求是非法的,第二次请求才是正常的文件上传,而第一次请求的处理失败不会影响第二次请求的成功处理,当时我查了半天论坛,只看到有人提问没人回答,于是我只能做忽略第一次请求的处理,保证不出现异常。后来某DCloud内部大神出来说是因为上传模块支持自定义协议,所以才有了第一次请求,如果用不上,遇到就直接返回200就好了...我¥%¥……#,这个坑大啊,文档里也没有说明,真不知道还有什么大坑在等着。
API接口就不说了,反正用到的时候去查就行了,里面都有简易的例子,要是想深入就踩踩坑行了,没有DCloud团队的支持,估计很累。
来简单说说插件的开发。因为Android SDK的API众多,据说原生高达40多万,就不说还有其他第三方的了。为了方便开发者对SDK的深度支持,HTML5+可以通过一定得接口规范实现js->java的接口映射。只不过,坑又来了:0.XX版本的跟1.XX版本的,怎么改动这么大,几天不见,我还以为之前看错代码例子了...代码例子都随着HTML5+的SDK离线包里有,我就不贴图了。
再来说说HTML5+的一个高级点的用法【在原生Android开发中嵌入HTML5应用】。当然,这个是必须有的,又不是人人都喜欢整个应用都用HTML5,这不蛋疼么。其支持三种模式:独立应用模式【也就是整个应用都是HTML5】、widget方式、webview方式。后两种模式见名知意,就不多说了,知道有这个东西就好。
mui
这个是三个框架中,最能给用户牛逼感的东西,因为这货直接面对APP用户,也就是主打界面端。
mui分mui.js与mui.css两部分,mui.js对HTML5+做了一层封装,就有点类似于jquery与dom的关系,而mui.css则是一套高仿iOS界面的样式,看起来牛逼哄哄高大上的。
mui.js中,已经对mui.css中的很多样式响应做了很多处理,使用体验也不错。也就是当你成套使用mui.js与mui.css的时候,觉得开发如有神助,不然就又想死了。这绝对是真心话,事件的响应处理远远比预想的麻烦得多,在Android中很多已经预设好的,在web上都得自己去实现,比如在弹出菜单之外的地方点击时,菜单要消失这一样的。之前美工MM不懂,我也不懂,她就没用mui.css做静态页面,然后我在开发时,就各种醉了。
mui大约实现了如下这些,包括但不局限于,因为文档写得也不够特别详细,大部分时候不如去看Demo里面的代码:
现在说说我所了解到的HTML5+的优势与劣势
优势就是HTML5之间的界面切换,是基于多webview模式的,流畅度是棒棒的,而且单界面上还可以实现多webview模式,也就是说title可以单独是一个webview,然后列表内容是一个webwiew。流畅度简直完胜其他老牌的hybrid app中间件。而且从IDE到中间件到js/css都有一整套的框架,可以做到流畅度的兼容优化,在主流机子上面以几乎逼近原生Android的速度了。完美解决老牌hybrid app中间件的病痛。
现在说劣势,HTML5+的API不完善啊,离线打包折腾起来太麻烦啊,无法监控到Android的系统log啊,HTML5+的log经常不明所以啊。
最最让我痛心的两个问题是:
当我界面是由多个webview组成时,这个webview的界面无法出现在另一个webview中,比如常用的右上角的more按钮,点击会出现菜单栏,如果内容是单独的webview,菜单栏居然无法居于内容上显示出来,据论坛上的说法就是自己在内容页中出现菜单栏好了。看到这,我又抓狂了。
很多默认响应都没有,都需要自己去实现,好痛苦,想想还是Android大法好了
总的来说,我的使用感触大体差不多就是这样了,用起来有利有弊,流畅度确实十分吸引人,但是坑也有点多就是了,如果论坛能活跃点,也许都能找到填坑的方式,但是论坛都没什么人气。如果用作Demo快速成型倒是挺不错的选择。
来自https://m.oschina.net/blog/379924