环境配置
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