Cordova小结

环境配置

---

1. 安装node.js

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

方法一：

准备一些包    sudo apt-get install g++ curl libssl-dev apache2-utilsgit是不可少的    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.jssudo apt-get updatesudo apt-get install nodejs

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

sudo npm cache clean -f   sudo npm install -g nsudo 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/x642. 安装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/cordovachmod 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/jdk7export JRE_HOME=${JAVA_HOME}/jreexport CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/libexport MVN_HOME=/home/sang/software/maven3export ANDROID_SDK_HOME=/home/sang/ubuntu1204/home/sang/software/android-sdkexport 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);