文档章节

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android)

y
 youxizhe
发布于 2014/09/29 01:18
字数 1612
阅读 414
收藏 12

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android)

Mobile App分为三大类:Native App,Hybrid App,Web App。其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势。缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能。 

目前国内外的Hybrid App开发框架很多,比较有代表的是国外的Cordova(aka PhoneGap)、Sencha TouchTitaniumIntel XDKRhoMobileXamarin等和国内的AppCanRexseexFace,而Dr. Dobb's Journal颁布的2014年度移动开发工具类Jolt大奖中PhoneGap和Titanium获得Jolt生产力奖。Titanium应该属于Web到Native的Converter,还有一种就是Native JavaScript的应用,比如Chrome Apps/Firefox OS/Windows 8 apps。 

基于开源的Cordova,各大公司都推出了自己的产品,比如:Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。 

安装运行 

(1)前提环境 
安装Ant,把%ANT_HOME%\bin加到Path环境变量中,不然会报Error “executing command 'ant'”错。 

引用

ant -h 
ant -version



安装Android SDK,把%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools加到Path环境变量中,不然会报"Error: An error occurred while listing Android targets"错,并提前创建好一个AVD。 

关于API版本: 

  • 3.0需要的是android-17(Android 4.2.2)

  • 3.1和3.2需要android-18(Android 4.3)

  • 3.3和3.4需要android-19(Android 4.4.2)

引用

android -h 
adb version 
android list avd



安装Node.js 

引用

node -v 
npm -v



如果需要从git地址安装插件,好需要安装Git 

引用

git --version



(2)安装Cordova CLI 

引用

> npm install -g cordova



安装路径: 
C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova 

更新Cordova版本 

引用

npm update cordova -g



如果安装速度很慢的话可以设置代理: 

引用

npm config set proxy http://xx.xx.xx.xx:xxxx 
npm config set https-proxy http://xx.xx.xx.xx:xxxx 
npm config list


或者使用国内的镜像站:http://cnpmjs.org 

引用

npm config set registry http://registry.cnpmjs.org 
npm info cordova 

npm --registry http://registry.cnpmjs.org info cordova



现在最新版本:3.4.0-0.1.3(2014/03/05 发布) 

(3)创建并运行project 

a.新建一个目录pro,并进入 

引用

> cd C:\pro



b.创建一个“myapp”工程 

引用

> cordova create myapp com.yourname.myapp MyApp



c.进入工程目录 

引用

> cd myapp



d.添加平台支持 

引用

> cordova platforms add ios 
> cordova platforms add android 

> cordova platforms ls



CLI使用各个平台的SDK来创建工程。 

更新Cordova工程的版本 
cordova platform check 
如果有类似“android @ 3.3.0 could be updated to: 3.4.0”的提示可以执行更新 
也可以查看platforms\android\assets\www\cordova.js确认当前版本信息 
cordova platform update android 
如果提示“All platforms are up-to-date.”说明不需要更新。 

e.添加插件 

引用

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

> cordova plugin ls


插件可以从很多地方安装: 
插件名(从plugin repository下载):cordova plugin add org.apache.cordova.console 
git地址:cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git 
本地地址:cordova plugin add d:\cordova-3.3.0\cordova-plugin-camera 
本地文件:cordova plugin add plugin.tar.gz 
指定版本 
cordova plugin add org.apache.cordova.console@0.2.1 
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0 
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir 
cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir 
等等 

f.编译代码 

引用

> cordova build android



g.运行代码 
在模拟器上运行(前提是创建好AVD) 

引用

> cordova emulate android


Windows下convert命令冲突,直接“cordova emulate android”会报Error: spawn ENOENT,需要先启动模拟器。 

h.在浏览器运行 

引用

> cordova serve android



浏览器访问地址:http://localhost:8000/,就可以和调试页面一样调试app的布局了。如果app中使用了cordova的Native API调用,会弹出以下对话框: 
 
这是因为浏览器无法提供@JavascriptInterface的接口,Cordova视图通过prompt()和Native交互,这样做是因为Android2.3 simulator的Bug。所以调试页面布局,无视即可。 

i.通过USB直接安装到真机 

引用

> cordova run android



Cordova CLI 采用 Lazy Loading的方式,当你创建Cordova工程、添加平台支持,安装插件等等的时候从服务器上下载相应的文件解压到相应的文件夹中。lazy-loaded的文件存放在系统用户的文件夹下,比如Windows XP是C:\Documents and 
Settings\RenSanNing\.cordova。所以第一次使用的时候会比较慢。 

常用命令 

(1)create <directory> [<id> [<name>]] 
创建一个cordova工程,id为package名。 

(2)platform [ls | list] 
列出该工程支持哪些平台 

(3)platform add <platform> [<platform> ...] 
为工程添加一个或多个平台支持 

(4)platform [rm | remove] <platform> [<platform> ...] 
删除该工程的某个平台支持 

(5)platform [up | update] <platform> 
更新该工程某个平台的Cordova版本 

(6)plugin [ls | list] 
列出该工程包含哪些插件 

(7)plugin add <path-to-plugin> [<path-to-plugin> ...] 
为工程添加一个或多个插件 

(8)plugin [rm | remove] <plugin-name> [<plugin-name> ...] 
从该工程中删除某个插件 

(9)plugin search [<keyword1> <keyword2> ...] 
根据关键字从registry中搜索插件 

(10)compile [platform...] 
编译指定平台的app包 

(11)build [<platform> [<platform> [...]]] 
先做prepare(拷贝文件)后做compile 

(12)emulate [<platform> [<platform> [...]]] 
启动模拟器运行应用 

(13)serve [port] 
启动本地web服务来访问www,默认端口是8000 

引用

platform和platforms等价 
plugin和plugins等价



详细的内容可以通过cordova help命令查看。 

目录结构 

(1)目录一览: 

引用

myApp/ 
|-- config.xml 
|-- hooks/ 
| | |-- before_xxx/ 
| | `-- after_xxx/ 
|-- merges/ 
| | |-- android/ 
| | `-- ios/ 
|-- platforms/ 
| |-- android/ 
| `-- ios/ 
|-- plugins/ 
| |-- org.apache.cordova.console/ 
| `-- org.apache.cordova.device/ 
|-- www/ 
| |-- css/ 
| |-- img/ 
` |-- js/ 
  `-- index.html



(2)config.xml 
cordova的配置文件 

(3)hooks目录 
存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。 
Hook可以采用任何编程语言来写,Cordova CLI采用的是Node.js,所以一般都是用它来写。 

这里提供了3个常用的Hook脚本: 
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/ 

(4)merges目录 
存放各个平台特殊的文件,会和www进行合并编译,相同的文件merges下的文件优先。 

比如: 

引用

merges/ 
|-- ios/ 
| `-- app.js 
|-- android/ 
| `-- android.js 
www/ 
`-- app.js


编译成iOS应用的话,包含merges/ios/app.js;而Android应用的话,包含www/app.js、merges/android/android.js 

(5)platforms目录 
各个平台的原生代码工程,不要手动修改,因为在build的时候会被覆盖。 

(6)plugins目录 
插件目录(cordova提供的原生API也是以插件的形式提供的)。 

(7)www目录 
源代码目录,在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。 
其中index.html为应用的入口文件。 

更多:http://cordova.apache.org/docs/en/3.4.0/index.html


本文转载自:http://rensanning.iteye.com/blog/2016364

共有 人打赏支持
y
粉丝 8
博文 44
码字总数 9840
作品 0
闵行
程序员
html5转义为相应移动端app-Apache cordova+NodeJS环境配置

1.必要环境 1.1 Java的JDK安装配置 设置环境变量: 在环境变量的系统变量设置 JAVAHOME:C:Program FilesJavajdk1.8.005; 再在设置系统变量 Classpath:.;%JAVAHOME%libdt.jar;%JAVAHOME%l...

w-rain
2015/03/31
0
0
新建cordova应用,插件开发教程系列(总目录)

以下几篇是连续的教程,代码也是连续的,包括如下章节: 新建cordova应用 https://my.oschina.net/u/1251858/blog/1799002 使用cordova把h5应用打包成apk https://my.oschina.net/u/1251858/...

canneljls
04/21
0
0
cordova nodejs phonegap

本文主要说的是在win7下搭建cordova环境开发,做一些基础配置吧 首先要做的就是nodeJS ,如果你还没有下载点这里 http://www.nodejs.org/ 选择自己的os对应的版本下载, 安装过程可以选择nex...

kore_wang
2014/07/08
0
1
Phonegap(Cordova)3.4 + Android 环境搭建

PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone,Android,WP7等多种智能手机的核心功能——包括地理定位,加速器,联...

千山万水
2015/06/11
0
0
Windows下使用Apache Cordova开发ANDROID之HelloWorld

nodejs/npm安装配置 nodejs下载: http://nodejs.org/download/ nodejs环境变量: PATH=C:Program Filesnodejs; 测试: node -v npm最新版下载: https://github.com/npm/npm/tags 解压缩 cd......

bianweiall
2015/01/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JS三元运算示例

1. topFlag=topFlag ==0?1:0; 等于 if(topFlag=00){ topFlag=1; }else if(topFlag == 1){ topFlag=0; } 2. 5>3?alert('5大'):alert('3大'); 即 if(5>3){alert('5大')}else{alert('3大')}; 注......

森火
58分钟前
0
0
利用Slf4j的MDC跟踪方法调用链

why? 一个web项目通常提供很多URL访问地址, 项目一般都是分层处理,例如Controller——>Service——>DAO。 如果想根据日志查看用户一次请求都走了哪些方法(多数是查错误)。 如果系统是多人...

杨春炼
今天
6
0
Maven介绍及安装

Maven介绍及安装 以下内容是本人早期学习时的笔记,可能比较详实繁琐,现在复习一下Maven,顺便将内容抛出来,供大家一起学习进步。 一、Maven简介 Maven是Apache旗下的一款项目管理工具,是...

星汉
今天
0
0
小程序Aes解密

主要步骤: 1、下载AES源码(JS版) 2、在小程序中新建一个公共的文件夹,把AES源码拷贝进去(注意:需要暴露接口 module.exports = CryptoJS;) 3、添加一个用于加密解密的公共JS,可取名为...

Mr_Tea伯奕
今天
0
0
Go实现文件传输(基本传输可用)

发送端 package mainimport ("fmt""os""net""io")func SendFile(path string, connect net.Conn){file, oerr :=os.Open(path)if oerr !=nil{fmt.Println("Open", oerr)......

CHONGCHEN
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部