HTML5移动应用开发环境


跨平台移动开发实际上就是基于HTML5开发软件界面和主要的业务逻辑，因此一套完善的基于移动平台的HTML5开发环境是非常有必要的。这里我主要的关注点是以下四点：

  • Javascript和Jquery mobile的编辑器
  • HTML5的各个元素的Inspector
  • Javascript远程断点debug
  • 移动平台Javascript开发模式

1）Javascript和Jquery mobile的编辑器

谈到Javascript的编辑器，市面上有很多，大家都有自己心仪的选择，我这里只是推荐三个我比较喜欢的：

  1. aptana studio. Eclipse插件更新地址：http://download.aptana.com/studio3/plugin/install
  2. Dreamweaver CS6. 官方地址：http://success.adobe.com/en/na/sem/products/dreamweaver.html
  3. appMobi. 官方地址：http://www.appmobi.com/

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_path
web_app_path里就是你需要调试的web应用，里面包含需要调试的JS。

然后类似于weinre，需要在html里添加Aardwolf代理：

  • <script src="http://computer-ip:8500/aardwolf.js"></script>
  • <script src="http://computer-ip:8500/js/main.js"></script>

其中aardwolf.js是系统js，js/main.js是需要调试的js，这个main.js经过aardwolf翻译后，具备了被调试的能力。之后，启动应用，就能在localhost:8000上进行debug：

4）移动平台Javascript开发模式

虽然上面的种种方法都能在device上进行调试HTML5，但全程开发都这么搞估计大家也快疯掉，所以我还是比较推荐现在桌面的浏览器上开发完主要的界面和逻辑，主要phonegap与device结合点外，其他基本上和桌面浏览器是一致的。所以我会先开发一个Chrome APP版本，先重点搞定这个版本后然后再移植到其他平台上，这样在其他平台上就只用调试和device相关的点。关于chrome app的相关内容我会在后面单独来谈。