Hybird App ( 混合模式移动应用)开发初体验

最近 1,2 个月一直都尝试开发一款 hybird app,遇到了很多问题,谈谈自己的体会。

Hybird app (混合模式移动应用),它利用例如安卓端 webview 组件+HTML5 内嵌的方式混合的方式开发的移动应用, 好处显而易见,由于内嵌的是 Html5, 所以跨平台,扩展性,开发成本都是很不错的优势。

Hybird App 拥有很多从开发工具到打包发布的解决方案,比较出名的是来自 Adobe 的 phonegap, 国内有 AppCan,这 2 种解决方案都有比较好的工具平台。这次我采用的的是 Appcan, 需要注意的是 Appcan 的开发工具只有 windows 平台的,另外不得不吐槽的是,方案里面集成的 js 插件脚本,bug 很多。

我采用的技术架构,如图:

hybird

其中利用 Appcan 作为应用的打包平台,通过其内置的 JS 组件进行数据请求,请求得到的数据利用 JS 做些业务逻辑处理后,使用 Angular 进行绑定渲染,UI 组件的东西则用的 GMU.js,而 gmu 内置了 zepto.js 和 scroll.js 等等, 页面则是 h5+css3。可以看到的是与传统的 web 相比,其中多了不少 js 框架和库的应用,毕竟把数据的调用和业务处理都移到了 JS 端,所以在这里提醒大家,可以考虑加入 js 模块管理的框架,例如 seajs。数据绑定这块感觉 Angular 真的很棒,写好绑定后,只需要专注后端 JS 数据的业务处理即可,提升了不少开发效率。

在编码阶段遇到了不少问题,例如并不能利用 url 像平时那样进行参数传递,发现抓取不到页面跳转后的参数。为了减少请求次数,也尝试采用 LocalStorage 缓存 json。通过 Manifest cache 缓存 html,css,js 文件,来提升界面的响应速度。通过 css3 替代 js 做动画效果,但是效果并不理想,感觉还是没有 js 来的流畅。页面跳转白屏,数据加载的延迟等等状况,加载动画体验需要做的更好,而且尽量减少页面的跳转,把一些功能集中到单个 html 文件。

总而言之,采取了很多优化方法,但是显然这种 hybird app 在性能体验等方面还是问题很多,但是例如一些交互简单的 app 话,用这种方案还是可以考虑的。


最后修改于 2014-10-28