hybrid app开发/调试环境配置

486 查看

开发环境

phonegap 3.3

具体步骤参见官网,当创建了一个项目后会出现4个子文件夹:

merges  platforms  plugins  www

一般来说,我们需要关心的只有wwwmerges,前者存放的是app的html/css/js,开发过程主要会在这个目录下进行;后者是各个平台特有的文件,在build时会根据目标平台合并这两个文件夹。plugins放添加的phonegap插件相关代码,不需关心。platforms存放phonegap build后的代码文件,build时里面的文件会被覆盖,因此不能直接修改;它和merges目录一样,都是分平台创建子目录的。

一些其他的小问题:

插件添加

通过命令行添加插件,不同的插件有不同的git地址,如:

$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

不再需要自己手动引插件的js,可以直接使用:var m = new Media("xx"),框架会自动帮你处理(通过require引入build后生成的 www/cordova_plugins.jswww/plugins/下的插件js),只需在index.html引用phonegap.js即可。

参考文档:
http://devgirl.org/2013/09/05/phonegap-3-0-stuff-you-should-know/
http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface

导入ide(intellij)

其实这一步也不太需要,通过phonegap命令行可以完成项目的build和运行(包括模拟器和真实机器)。
为了开发方便,可以导入wwwplatforms/android两个目录,前者用于开发,后者纯粹就是为了能点一下就能运行app(以及看log)。

调试

和phonegap插件无关的

使用chrome的远程调试,基于ADB插件,将www目录部署到静态服务器(最简单的办法:cdwww,然后$ python -m SimpleHTTPServer 8000),搭配ADB插件的端口转发功能,手机端用chrome访问。这里说说碰到的问题:

adb不认手机

我用的是调试机是红米,命令行(ubuntu)中输入adb devices(前提是已经装了android sdk和设置了相关环境变量)出现:

$ adb devices
List of devices attached 
????????????    no permissions

答案在这里,以及这里,注意,小米的vendor id(2717)并不在这个列表里,还得在51-android.rules文件后加一行。

手机端chrome全屏的办法

index.html中添加 <meta name="mobile-web-app-capable" content="yes"> ,再发送到桌面,通过桌面图标进入即是全屏状态了。

和phonegap插件相关的

TODO。