一个phonegap门外汉的phonegap初体验

以前做移动app，都是使用android和ios的原生语言来开发，对于Phonegap, 以前一直都只是耳闻，从未实际接触过。这两天因为需要维护一个Phonegap项目，所以有机会接触。这里记录下自己的一些使用历程，算不上心得，甚至还有很多困惑的地方，留待自己以后解决抑或是各位读者的指点。

环境安装

本人使用的是Mac OS，按照官方网站要求，要成功运行phonegap，需要安装node.js。安装node.js比较简单，从官网下载mac版本的安装包，可视化操作安装即可，在安装node.js的时候，会顺带把npm也会装上。然后是正式安装phonegap了。使用命令

$ sudo npm install -g phonegap

安装。一开始总是报错，主要是json解析错误之类，百度了一下，有说是npm不是最新的，有说清除cache的，试了一下都不行。最后看到一贴子说是防火墙的原因，需要设置npm的国内镜像，觉得这种说法比较合理，试了一下，果然成功。在此将设置镜像的几种方法贴出来，我个人使用的是第三种方法，其他两种没有尝试。

镜像使用方法（三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）:
1.通过config命令
npm config set registry https://registry.npm.taobao.org
npm info underscore （如果上面配置正确这个命令会有字符串response）
2.命令行指定
npm –registry https://registry.npm.taobao.org info underscore
3.编辑 ~/.npmrc
加入下面内容 registry = https://registry.npm.taobao.org

搜索镜像:https://npm.taobao.org

安装完之后可以在适当的目录下运行一下以下命名，建个Demo来测试是否成功

$ phonegap create my-app
$ cd my-app
$ phonegap run android

如果都没有报错，基本上就没问题了。

导入原项目，运行

原来项目给过来的代码只有一个www文件夹。这个文件夹本来应该是和sample一样的目录结构。但结果一比对，发现多出了两层，/locales/en/，应该是跟原来的国际化配置相关。跟客户确认了一下，暂时没有必要理会国际化，就暂时不去理会这两层目录，直接将en目录下的所有文件剪切到www下。到这里为止，旧代码的准备就完成了。

接着使用$ phonegap create project_name创建project。然后用刚才的www文件夹替换刚创建出来的project中的同名目录（旧版本phonegap的config.xml放在www目录下，新版本的cordova要求将其放在根目录，所以这里需要将config.xml从www文件夹中上移到项目的根目录下，并且修改config文件中资源的相对位置）。这时运行$ phonegap run ios就可以看到platforms目录下多了一个ios的目录。到这里为止，这个旧项目的iOS版本基本上可以像其他xcode project一样打开并运行了。至于android版本，生成项目不难，使用$ phonegap run android即可以在platforms目录下生成。只是用android studio导入后会遇到各种问题，需要根据提示去更改一些配置，如gradle的classpath,buildToolsVersion,targetSDKVersion, miniSDKVersion等。接着也可以像普通andriod project一样运行。

实时显示及debug

Phonegap为开发者提供了一个Develop工具，叫做Phonegap desktop，需要在PC和手机上各装一个软件和app才能配对使用。主要方便的地方有两个：

1. 即使xcode没有profile，也能在真机上运行；
2. 可以不用受数据线束缚，只要同一wifi下，就可以使用，感觉有点像TestFlight。

但不方便的地方更多：

1. android版本需要在GooglePlaystore上下载，国内墙掉了，其他三方下载好像也不多，基本上下不到，所以android基本无法使用。
2. 无法实时刷新，至少我是还不明白这软件需要怎样才能实时刷新修改过的代码的显示效果，在手机和destktop的上根本就没看到刷新之类的操作。难不成每次都要run ios/android，然后杀掉手机的phonegap app再重新启动？
3. 无法输出debug信息，这个是很大的问题。
4. 这个软件上的运行结果跟实际的运行结果有出入，举例说，我的项目一开始有跨域问题，但在这个工具上运行这个问题莫名的”被解决”了，而一旦回到xcode真机运行，问题又出来了，这不坑人么……

所以，总体来说，觉得这个dev tool还是弊大于利，所以后来我基本上抛弃这工具，还是乖乖使用xcode和android studio来debug！

打包

Phonegap的打包至少有两种方式：

1. 将platforms下各个平台的文件用各自的工具打包。只要代码运行没问题，基本上就可以使用xcode, android studio等工具进行打包。我个人最后采取的是这种方式。
2. 利用Phonegap的在线打包功能。这种方式既可以上传www文件夹(zip)，也可以上传phonegap project文件夹(zip)。但我在使用这种方式打包的时候ios平台一直不成功，估计是没有上传profile的缘故。而android一开始的旧原码还可以打包成功，但随着一些plugin的加入，打出来的包运行起来会有问题，不知道是不是因为plugin是要另外上传还是怎么的？

修改代码中遇到的问题

真正麻烦的问题还在于修改代码。

跨域

项目中login的api属于外部资源，所以存在跨域问题。但是phonegap的whitelist白名单制度本来是可以完美解决跨域问题的，因为phonegap代码本身就类似于一个webapp，本身的代码资源属于域内，其他的资源都属于域外，所以需要在白名单中加入允许访问的外部资源来解决跨域问题。但不知道为什么，把login的api加入到白名单中，一样会报跨域错误，后来索性把旧原码白名单access配置中的“.*”改为”*“才通过了。但这种做法在实际中可能稍有不妥，以后还得研究一下。而且这种做法仅能在ios中成功，android平台还会遇到问题，这个问题后面另起章节介绍。

三方login平台集成问题。

这个项目需要集成360office的login的功能。这个login页面，其实相当于是个外部html页面，即不像内部的.do，.action那样有内部控制权，又不像restful api那样交互友好。所以问题来了，首先无法使用ajax或者load html的方式，因为返回的是整个html，这个Html页面的内部操作还会跳转几次。而如果用href跳转，login完之后，虽然会在客户后台的server中转了一道返回我需要的session token，但我没有它返回页面的控制权，跳转不回原来的逻辑中进行下去。所以这时就需要InAppBrowser解决方案。InAppBrowser的特点是可以在新打开一个窗口（相当于浏览器）之后继续监听这个窗口的loadstart,loadstop, exit等事件，并且可以对该窗口进行show,hide,close的操作，还可以获取其url。结合三方login与InAppBroser，整个流程大概如下： 用JavaScript打开一个InAppBrowser，然后监视它的loadstop事件，如果stop的时候url是login end url（login中间有多次跳转）url，则读取这个url中的param进行分析判断login result，并关闭这个窗口，进行Login result的后续操作。

InAppBrowser

在使用InAppBrowser的时候，会涉及到一个plugin概念。从3.0起，cordova使用插件的方式来实现设备级别的API。"As of version 3.0, Cordova implements device-level APIs as plugins. Use the CLI's plugin command, described in The Command-line Interface, to add or remove this feature for a project。"所以要使用InAppBroswer，需要使用CLI plugin命令行来为Project添加InAppBroswer特性。具体的命名如下：

$ phonegap plugin add org.apache.cordova.inappbrowser
$ phonegap plugin ls
$ phonegap plugin rm org.apache.cordova.inappbrowser

第一行是添加，执行之后可以看到在plugins文件夹下多了相应的plugin文件内容；第二行是查看；第三行是删除。
然后还需要在config.xml中配置（这部分是多余的么？因为command-line是针对所有平台的，下面的应该是只设置对某个平台生效吧？验证一下！）

<feature name="InAppBrowser">
    <param name="android-package" value="org.apache.cordova.inappbrowser.InAppBrowser" />
    <param name="ios-package" value="CDVInAppBrowser" />
</feature>
<plugins>
    <plugin name="InAppBrowser" value="CDVInAppBrowser" />
</plugins>

另外由于文档whitelist guide中有提到whitelist机制不会在InAppBrowser中起作用"Note that the whitelist applies only to the main Cordova webview, and does not apply to an InAppBrowser webview or opening links in the system web browser."，所以还需要添加以下设置

<preference name="OpenAllWhitelistURLsInWebView" value="true" />

Android Ajax requests 404(Not Found) Error

解决了1，2，3的问题之后，ios平台基本上可以顺利运行了，但奇怪的是，在android平台上一跑，居然发现在login回来之后，使用ajax去掉用其他api，都会返回一个not found的error，一开始不明白是什么原因，还以为是api的问题，后来查了很多资料，终于在stackoverflow中看到，这居然还是跨域问题，需要用command-line添加whitelist的plugin才通过。这我就搞不懂了，config.xml里不已经设置过access了吗，为什么不起作用，还要再添加这个plugin呢？

phonegap plugin add cordova-plugin-whitelist

Https over http (Android小米）

之后在小米手机上测试还发现一个问题，就是第三方login的时候，其内部会使用https协议，这时居然也报错停止了：

The page at ‘xxx’ was loaded over HTTPS, but is submitting data to an insecure location at ‘xxx’: this content should also be submitted over HTTPS.

这个应该是后端服务器之间的问题吧，要解决只有通知后台开发员支持https了？！

icon/splash 新的配置方式

原来的代码中，icon的配置可以生效，但splash的配置不起作用。以下是新的配置方式：

<platform name="android">
    <icon src="res/icon/android/icon-36-ldpi.png" density="ldpi" />
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
</platform>
<platform name="ios">
    <icon src="res/icon/ios/icon-50@2x.png" width="100" height="100" />
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
</platform>

IDE相关

因为是维护项目，所以修改的东西还不算很多，所以没有花很多时间去找IDE，暂时使用Sublime2来修改html和js就够了。
如果直接在Chrome中运行结果，还可以使用chrome的非安全模式来绕过跨域，HTTPS授权等问题。方法是使用command line来打开chrome:

open -a "Google Chrome" --args --disable-web-security