Tech

HTML5+Javascript开发Android应用

这篇文章不像之前的一些文章那么详细,更接近索引的性质,因为只是折腾出了一种对我有用的方案,不是一种单一的技术,工具,或是经验。如果各位像我一样,想做一个简单的移动应用(不仅限于Android),又没有那么多时间去研究如何开发,甚至是从头学习一门语言(比如JAVA),这会是一种比较好的方案。 现在有一个Web应用,功能很简单,输入一串条形码,查询出对应的商品价格和编号。直接在移动设备上访问它也能工作,但浏览网页时的缩放按钮会影响网站的显示效果。所以第一步要在head部分的meta信息中加上这一句:

这样网页就能适应屏幕大小,而且没有缩放按钮了。某些网站的“手机版”,其实就是加上这一句,然后调整了一些样式而已。接下来把网页元素——文本框/列表/按钮等——变成移动设备上的样式。我比较熟悉jQuery,于是先尝试了jQTouch和jQMobile。引入jQMobile的方式如下:

jQTouch也类似,引入相应的js/css文件,初始化。jQTouch可以有不同的主题,因此外观的可定制性要比jQMobile好。目前提供Android和iPhone的样式,可以模拟一些动作——比如在Android上点击按钮时产生的滑动效果,但稳定性不如jQMobile。使用过程中我遇到了很多Bug,比如animation没有正确的播放,ajax载入出错等等。最严重的是,如果在列表中使用文本框,会导致Android上的浏览器异常退出,在这个Bug被修正前最好不要在生产环境或是其他重要场合使用jQTouch。右图是jQTouch的两种样式。 现在这个Web项目,在外观上已经和原生的Android应用非常相似了,但它还不是Android应用程序,因为还没有封装成APK。因此最后一个技术点,也是最麻烦最关键的一点,就是PhoneGap了。如果说sl4a是实现本地脚本和原生Android程序的内部消息通信,PhoneGap则是通过用JAVA语言包裹现有的Web应用,让它可以直接通过Android来运行,在一个android项目中做如下修改——可以看出它是将Activity转交给DroidGap来处理:

详细的打包方式PhoneGap的文档中已经写得很详细了,设置完成后用ant命令生成APK包。我试着加入了Google提供的Zxing包,用JS来调用,这样就可以直接通过手机的摄像头,扫描条形码并得到相应的数据。项目的演示,以及本文中提到的其他程序/资源,一些需要使用的终端命令(Linux),我都整理到Github上了:https://github.com/perchouli/jqscan 这种开发方式,优点在于不容易crash——至少相比之前尝试用JAVA开发时相比……目前遇到的主要问题是载入速度,以及第三方库的各种Bug。当然对我来说重要的意义在于,如果要做一个移动应用的DEMO,现在我可以不用Axure,而是直接用这种方式,做一个几乎和成品完全一样的DEMO了。 后续:后来和boss谈过这事,原来在很久之前公司就做过phonegap的尝试了,但phonegap不能完全调用android的api,有时候因为一个功能,就要去做几个插件。而且运行消耗大,菜单难定制——按menu键时,在phonegap封装的程序中不会弹出任何菜单,所以没有花时间去继续研究。说明这种做法暂时还不能满足生产环境。补充下自己发现的一点,在phonegap封装的程序中,需要按两次返回键才能退出程序,还真是不太方便=_,=

Continue Reading