Cordova小结

环境配置

---

1. 安装node.js

主要有两种方法： 源安装(.tar.gz) 或者 apt-get install 安装

方法一：

准备一些包
    sudo apt-get install g++ curl libssl-dev apache2-utils
git是不可少的
    sudo apt-get install git-core
用git下载node.js最新版
    git clone git://github.com/ry/node.git
或者直接下载源码
    wget http://nodejs.org/dist/node-v0.8.2.tar.gz
    gunzip node-v0.8.2.tar.gz
    tar -xf node-v0.8.2
开始编译安装node.js
    cd node-v0.8.2
    ./configure
    make
    sudo make install 

方法二：

sudo add-apt-repository ppa:chris-lea/node.js

sudo apt-get update

sudo apt-get install nodejs

但是 ubuntu 下的源比较老，版本不是最新的，通过下面的方法可以更新

sudo npm cache clean -f   

sudo npm install -g n

sudo n 4.3.2   # 这里填版本号或者"stable"，但是我测试的时候"stable"会报错

测试是否成功 node -v

2. 安装 cordova

npm install -g cordova

3. 安装 ant

sudo apt-get install ant

4. 创建空cordova工程，如果已存在则直接跳到5

cordova create xxProject com.proj.xxProject xxProject

5. 查看cordova工程里是否有 android

cordova platforms list

结果：
Installed platforms: 
Available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, ubuntu

6. 安装android平台插件，如果已安装平台则跳转到8

cordova platform add android 

默认情况下安装最新版，可能android版本很高。如果想和当前低版本环境一致（比如本地是 android-19），则必须制定版本安装。

$ cordova platforms add android@3.6.4

结果如下

    npm http GET https://registry.npmjs.org/cordova-android/3.6.4

    npm http 200 https://registry.npmjs.org/cordova-android/3.6.4

    npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-3.6.4.tgz

    npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-3.6.4.tgz

    Adding android project...

    Creating Cordova project for the Android platform:

    Path: platforms/android

    Package: com.ford.myapp

    Name: myapp

    Android target: android-19

    Copying template files...

    Project successfully created.

如果默认安装3.6.4版本，而不是默认的3.7.1(这个版本会*自动生成android-21的项目*，如果没有这个API会报错)

7. 安装常用插件

基本设备资讯 （设备 API）：

$ cordova plugin add org.apache.cordova.device

网路连接和电池事件：

$ cordova plugin add org.apache.cordova.network-information

$ cordova plugin add org.apache.cordova.battery-status

加速度计、 指南针、 和地理定位：

$ cordova plugin add org.apache.cordova.device-motion

$ cordova plugin add org.apache.cordova.device-orientation

$ cordova plugin add org.apache.cordova.geolocation

相机、 媒体重播和捕获：

$ cordova plugin add org.apache.cordova.camera

$ cordova plugin add org.apache.cordova.media-capture

$ cordova plugin add org.apache.cordova.media

访问设备或网路 （档 API） 上的档：

$ cordova plugin add org.apache.cordova.file

$ cordova plugin add org.apache.cordova.file-transfer

通过对话方块或振动发出通知：

$ cordova plugin add org.apache.cordova.dialogs

$ cordova plugin add org.apache.cordova.vibration

连络人：

$ cordova plugin add org.apache.cordova.contacts

全球化：

$ cordova plugin add org.apache.cordova.globalization

闪屏：

$ cordova plugin add org.apache.cordova.splashscreen

打开新的浏览器视窗 (InAppBrowser):

$ cordova plugin add org.apache.cordova.inappbrowser

调试主控台：

$ cordova plugin add org.apache.cordova.console

查看当前应用已安装的插件：
$ cordova plugin ls # or ‘plugin list’

删除已安装的插件：

$ cordova plugin rm org.apache.cordova.console

$ cordova plugin remove org.apache.cordova.console # same

通过多个参数增加或删除插件：

$ cordova plugin add org.apache.cordova.console org.apache.cordova.device

一句话命令如下(命令行里直接执行)

cordova plugin add org.apache.cordova.device;cordova plugin add org.apache.cordova.network-information;cordova plugin add org.apache.cordova.battery-status;cordova plugin add org.apache.cordova.device-motion;cordova plugin add org.apache.cordova.device-orientation;cordova plugin add org.apache.cordova.geolocation;cordova plugin add org.apache.cordova.camera;cordova plugin add org.apache.cordova.media-capture;cordova plugin add org.apache.cordova.media;cordova plugin add org.apache.cordova.file;cordova plugin add org.apache.cordova.file-transfer;cordova plugin add org.apache.cordova.dialogs;cordova plugin add org.apache.cordova.vibration;cordova plugin add org.apache.cordova.contacts;cordova plugin add org.apache.cordova.globalization;cordova plugin add org.apache.cordova.splashscreen;cordova plugin add org.apache.cordova.inappbrowser;cordova plugin add org.apache.cordova.console

查看已安装插件： cordova plugins

8. 构建应用

cordova build android

9. 安装 ripple emulate

sudo npm install -g ripple-emulator

10. 模拟启动

进入项目根目录后执行 ripple emulate

注意： 如果index.html 不直接放在 www 目录下，需要修改访问链接。比如原链接为 localhost:4400?enableripple=cordova-3.0.0-Nexus4 , 项目的index.html 放在 www/html/下，则访问地址替换为 localhost:4400/html/index.html?enableripple=cordova-3.0.0-Nexus4

补充ripple的原理

js&css在node.js中的目录为 /usr/local/lib/node_modules/ripple-emulator/pkg/hosted ，包含的文件如下

    images index.html ripple.css ripple.js themes

其中ripple.js用来生成调试页面，index.html页面并不从cordova中的config.xml中获取，其iframe的src属性生成逻辑如下

_bootstrap() --invoke-> _post(src) --invoke-> _createFrame(src) 

这样就行了，获取www目录下文件的路径来自于请求url中的域名

11. 安装Genymotion模拟器 & Idea插件

1. 下载安装  genymotion ubuntu14 64bit  https://www.genymotion.com/#!/download/premium/linux/ubuntu1410AndLess/x64
2. 安装Idea插件，直接在插件仓库中搜索 genymotion

12. 发布apk，生成release版本

cordova build android --release

由于所有的apk都必须用证书(.keystore)来签名，所以默认 cordova build 会读取 AndroidSDK/.android/debug.keystore或者 ~/.android/debug.keystore文件。参考这里， Cordova为build过程提供了ant.properties的接口来变更设置，所以新建platforms\android\ant.properties文件后重新build即可。

问题

---

1. 权限问题

Error: spawn EACCES

    at exports._errnoException (util.js:746:11)

    at ChildProcess.spawn (child_process.js:1155:11)

    at Object.exports.spawn (child_process.js:988:9)

原因是 cordova中的 android项目下可执行文件没有权限执行，解决办法

cd platforms/android/cordova
chmod 777 build log run clean version

2. 编译类重复

IntelliJ IDEA duplicate class R.java and BuildConfig.java

原因是 idea 自己产生了重复的类

 module settings -> source -> 删除 gen 和 ant-gen -> 取消 auto

3. 无法编译通过

[aapt] res/xml/config.xml.mine:0: error: Resource entry config is already defined.

[aapt] res/xml/config.xml:0: Originally defined here.

[aapt] res/xml/config.xml.r5839:0: error: Resource entry config is already defined.

[aapt] res/xml/config.xml:0: Originally defined here.

[aapt] res/xml/config.xml.r5856:0: error: Resource entry config is already defined.

[aapt] res/xml/config.xml:0: Originally defined here.

原因居然是svn更新的时候config.xml文件冲突了。。。cordova认为有多个文件。。处理掉svn冲突就可以了

4. 导入到Idea后无法识别 CordovaActivity类

参考[这里](http://stackoverflow.com/questions/23806667/cordovaactivity-cannot-be-resolved-to-a-type-in-phonegap-3-4)。原来没有引入 CordovaLib/src 类，idea死活加不上。。最后到settings里面，把目录设置为src后解决。。坑爹

5. Path环境变量错误

[Error: ANDROID_HOME is not set and "android" command not in your PATH. You must fulfill at least one of these conditions.]

新装的系统没有制定android_sdk路径

修改 /etc/profile ，添加如下内容    

export JAVA_HOME=/usr/lib/java/jdk7

export JRE_HOME=${JAVA_HOME}/jre

export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib

export MVN_HOME=/home/sang/software/maven3

export ANDROID_SDK_HOME=/home/sang/ubuntu1204/home/sang/software/android-sdk

export PATH=${PATH}:${JAVA_HOME}/bin:${MVN_HOME}/bin:${ANDROID_SDK_HOME}/tools:${ANDROID_SDK_HOME}/platform-tools

6. 从32位系统迁移到64位系统出现的问题

64位linux系统无法运行Android sdk的adb和aapt，提示No such file or directory的解决办法

解决办法

首先执行 : sudo apt-get install lib32stdc++6
此时可以看到adb顺利运行了，但是aapt还是无法运行提示error while loading shared libraries: libz.so
此时执行: sudo apt-get install lib32z1 lib32z1-dev

运行aapt，大功告成。参考1,2

7. 使用Genymotion调试报错

出现错误INSTALL_FAILED_CPU_ABI_INCOMPATI 
需要下载一个包 http://pan.baidu.com/s/1WToMq  726f
参考 http://blog.csdn.net/wjr2012/article/details/1635911

技术细节

---

1. 理解 deviceReady 事件

类似document.ready，当DOM加载完成后执行的事件

$(document).ready(function(){

    // to do something;

});

主要用途：页面加载时执行的动作，比如调用方法、事件绑定等

更简单的写法是

$(function(){

    // to do something

});

因为cordova需要设备准备好之后才能调用Native API，为了保证能够调通，最好在deviceready事件中绑定事件。

document.addEventListener("deviceready", function(){

    // to do something

}, false);

2.离线检测

document.addEventListener("offline", function(){

    new Toast({

        message : "网络未连接"

    }).show();

}, false);

document.addEventListener("online",function(){

    new Toast({

        message:"连接上"

    }).show();

},false);