Cordova学习笔记(一)
本文由 小茗同学 发表于 2016-06-27 浏览(4832)
最后修改 2016-09-06 标签:cordova 笔记 android

介绍

Apache CordovaAdobe PhoneGap被捐给apache之后改名的项目,当然phonegap依然保留。关于二者的区别,按照我的理解,phonegap一般是用来打包用的,而cordova是一个底层开发框架,但是一般情况下二者指的是同一个东西。

本文所使用的cordova版本是最新版的6.2.0。

官网地址:http://cordova.apache.org/

环境搭建

由于本人只会android,所以本文全部以安卓平台为例。

首先,你需要以下环境:

  • jdk
  • Android sdk
  • node.js+npm

安装

cordova使用npm安装,国内速度太慢,一般推荐使用 淘宝npm 来安装。

npm install -g cordova

安装时间可能会比较久。

创建项目

cd 你的代码存放目录
cordova create mycordova com.lutongnet.mycordova 我的测试

执行完上面的命令后会按照默认的模板生成一个项目结构,生成的目录结构如下:

添加平台

cd mycordova(定位到你刚刚生成的项目目录下)
cordova platform add browser
cordova platform add android
cordova platform add ios

其中,browser平台指的是浏览器平台,一般拿来测试用的。这个添加的过程中一般还需要联网下载一些东西。

查看已经安装的平台:

cordova platform ls

一般不建议直接修改platform下的文件,因为在构建项目或者重新安装插件后文件可能会被覆盖,如果你喜欢导入Eclipse或者Android studio自己自由开发,建议在插件全部安装好后,复制并导入到Eclipse中去。

生成的Android项目结构如下:

构建

cordova build android //只构建安卓平台
cordova build //构建所有平台

关于build这一步到底是干嘛还没仔细看,好像是将www文件夹下的前端文件复制到各个平台的指定目录下去。

运行

cordova run browser // 会用浏览器打开 http://localhost:8000/index.html

Android平台:

cordova run android

这个我一直没有运行成功,貌似需要下载很多东西,可能我这边是由于网络原因造成的,个人也不是很推荐这种方式,都已经有代码了,直接把项目导入IDE自己运行就行了,不需要非得依赖cordova。

添加插件

添加插件前建议先把需要的平台都添加好,因为添加插件的时候只会下载你已经添加过的平台,没有添加的平台对应的插件是不会下载的。

不知为何,以下命令貌似无法放到bat文件里面批量执行

cordova plugin add cordova-plugin-network-information
cordova plugin add cordova-plugin-battery-status
cordova plugin add cordova-plugin-device-motion
cordova plugin add cordova-plugin-device-orientation
cordova plugin add cordova-plugin-geolocation
cordova plugin add cordova-plugin-camera
cordova plugin add cordova-plugin-media-capture
cordova plugin add cordova-plugin-media
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
cordova plugin add cordova-plugin-dialogs
cordova plugin add cordova-plugin-vibration
cordova plugin add cordova-plugin-contacts
cordova plugin add cordova-plugin-globalization
cordova plugin add cordova-plugin-splashscreen
cordova plugin add cordova-plugin-inappbrowser
cordova plugin add cordova-plugin-console

添加完毕之后放在plugins文件夹下面:

而对应的平台下的src源码里面也自动添加了相关代码,无需自己额外手动添加:

查找插件

可以上cordova官网插件专区搜索相关插件:http://cordova.apache.org/plugins/ ,速度有点慢,进去之后要等一会才会有结果,除了前面一些是官网提供的之外,后面都是网友提供的。

导入Eclipse

直接采用Eclipse的导入功能->Exiting Android Code Into Workspace,选择..\mycordova\platforms\android目录,然后:

如果报错了,手动修正一下sdk版本以及引入的Liberay路径,然后应该就没问题了,MainActivity是入口类:

配置首页地址:

修改/res/xml/config.xml<content src="index.html" />即可,默认的这个index.html对应的是/assets/www/index.html

插上手机,直接运行,不出问题的话,Cordova的HelloWorld基本上就出来了。

参考链接

几个不错的资源: