cordova -helloworld

2014/12/12 23:06
阅读数 201

.创建一个“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为应用的入口文件。 


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部