标签:android style http io color os ar 使用 java
跨平台移动开发实际上就是基于HTML5开发软件界面和主要的业务逻辑,因此一套完善的基于移动平台的HTML5开发环境是非常有必要的。这里我主要的关注点是以下四点:
1)Javascript和Jquery mobile的编辑器
谈到Javascript的编辑器,市面上有很多,大家都有自己心仪的选择,我这里只是推荐三个我比较喜欢的:
aptana studio的优点在于比较轻量级,与Eclipse集成,并且代码自动完成和JS语法纠错做得非常好,整个风格类似于VI,比较极客一点:
Dreamweaver CS6算是最为强悍的HTML5的开发环境,并且是我所知道的唯一支持Jquery mobile所见即所得的开发工具(官方提供的在线编辑器除外),并且Javascript, CSS和HTML开发起来非常顺手,最大的缺陷就是要收费:
appMobi非常适合在不同分辨率下的调试,非常cool的界面也非常做演示之用:
代码编辑:
模拟器演示:
这些工具的具体安装和使用我就不多说了,直来直去,自己体验一下就知道了
2)HTML5的各个元素的Inspector
如果放在桌面系统上浏览器,这样的工具是很多的,如firefox上的firebug,chrome上的开发者工具,IE上http watch和IE自带调试工具,但如果放在移动平台上,特别是基于phonegap这样内置的webview来开发,这样的工具就不是很普遍了。这里推荐一个phonegap官方所提到过的工具:weinre
weinre通过架一个server,把调试器和device连接起来,原理就多说,2.0之后就没看到Java的版本,因此只能通过NPM来安装,顺便提一下NPM是Nodejs的包管理工具,类似于Maven对于Java一样。安装Nodejs后就安装好了NPM。之后安装weinre非常简单:
npm install weinre -g
如果在windows平台上没加任何配置,weinre会安装在 C:\Users\***\AppData\Roaming\npm\node_modules\weinre\,然后启动server:
node path-to-weinre-node/weinre --boundHost -all- --httpPort 8082这里用-all-是为了在0.0.0.0上打开端口8082,避免非本地无法远程请求这个端口,然后在要调试的页面里加上weinre的代理:
<script src="http://computer-ip:8082/target/target-script-min.js#anonymous"></script>
这里computer-ip用能让device连上主机的地址,当然有关device与主机网络连接的问题我会在后面的文章中具体来谈。之后就是在device上启动应用程序,这里就拿android做例子,IOS是一样的。device启动后,打开chrome浏览器(基于webkit内核的都行),访问:
http://localhost:8082/client/#anonymous
,如果之前都问题的话,就能在target下看到device的连接,单击后,会发现这个连接变绿,这说明已能调试远程的device,之后就能像使用firebug或chrome开发者工具那样来使用了,不过它缺了很重要的功能就是远程JS断点调试,不过我会在后面来介绍另外一个工具来实现,下面看看调试上的截图:
3)Javascript远程断点debug
这里推荐使用Aardwolf(https://github.com/lexandera/Aardwolf/)来实现这个功能,它的原理和weinre类似,也是通过架server来远程debug device。下载Aardwolf后,启动server:
node Aardwolf_install_folder/app.js -h -d web_app_pathweb_app_path里就是你需要调试的web应用,里面包含需要调试的JS。
然后类似于weinre,需要在html里添加Aardwolf代理:
其中aardwolf.js是系统js,js/main.js是需要调试的js,这个main.js经过aardwolf翻译后,具备了被调试的能力。之后,启动应用,就能在localhost:8000上进行debug:
4)移动平台Javascript开发模式
虽然上面的种种方法都能在device上进行调试HTML5,但全程开发都这么搞估计大家也快疯掉,所以我还是比较推荐现在桌面的浏览器上开发完主要的界面和逻辑,主要phonegap与device结合点外,其他基本上和桌面浏览器是一致的。所以我会先开发一个Chrome APP版本,先重点搞定这个版本后然后再移植到其他平台上,这样在其他平台上就只用调试和device相关的点。关于chrome app的相关内容我会在后面单独来谈。
标签:android style http io color os ar 使用 java
原文地址:http://my.oschina.net/u/1402271/blog/338395