红联Linux门户
Linux帮助

Cordova小结

发布时间:2016-01-07 15:32:16来源:linux网站作者:whuslei

环境配置
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,大功告成。


7. 使用Genymotion调试报错

出现错误INSTALL_FAILED_CPU_ABI_INCOMPATI
需要下载一个包 http://pan.baidu.com/s/1WToMq  726f


技术细节
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);


ubuntu15.10下搭建cordova+ionic开发环境:http://www.linuxdiyf.com/linux/15684.html

如何在Ubuntu手机平台中开发Cordova HTML5应用:http://www.linuxdiyf.com/linux/12997.html