Cordova 使用指南
一、 Cordova 版本
图片.png
二、 参考资料
http://cordova.apache.org/docs/en/latest/guide/cli/index.html
三、 安装以及运行Cordova
- 安装node.js
安装node.js确保 输入node –v 后可以显示node.js 的版本信息。如果你输入的node.js 确提示“不是内部或外部命令”，很有可能是是你的环境变量配置错误。
(1) 安装正确安装将会看到的结果。注意：不是在node.js command prompt 中输入查看版本的命令，而是在CMD 中。
图片.png
(2) 另附 node.js 的环境变量截图。注意：我是在将node.js 安装在D盘的。第一张图是我的环境变量，第二张图是我安装nodeJs 的目录和文件。
图片.png
图片.png
- 安装npm
当安装好node.js后NPM 也应该被安装好了。由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功:
图片.png
- 配置 ANDROID_SDK_HOME 环境变量
配置 ANDROID_SDK_HOME 环境变量，变量值为你的SDK。
图片.png
另附：SDK 下载地址 http://sdk.android-studio.org/ 由于国内会出现无法更新的SDK 的问题，顺便给你一个镜像网站和使用方法。
图片.png
- 安装cordova
在你的CMD 中输入 npm install –g cordova 然后cordova 会自动安装的。由于国内环境，这个安装过程可能会很漫长，很有可能出现网络中断的现象，重复输入命令重新安装就好了。
图片.png
安装成功后输入一下版本输入一下查看cordova 版本信息的命令。出现下面的界面就代表你安装成功了。
图片.png
- 让我们创建一个cordova 应用程序吧。
- 创建cordova 项目
在合适的文件夹内输入：cordova create YANG com.example.YANG YY
YANG::::::: 这个是我们创建的文件夹的名字
com.example.YANG:::::::::::::::::::: 这个是我们创建的apk 的包名
YY:::::::::::::::::::::::: 这个是 应用的名字
以上三条都属于我个人的理解，若错了，别见怪。
附图： 没有报错，创建成功了。
图片.png
- 为cordova 添加平台
Cordova 可不仅仅创建android \Ios 的应用程序，还可以创建windows\Linux 等平台的应用程序哦。 - 添加一个android 平台。
(1) 进入到我们刚刚创建的cordoav 文件中 命令：cd YANG
(2) 添加平台 命令： cordova platform add android –save
若出现下列信息证明，这一步操作正确啦。
图片.png
！！！！！但是对于第一次安装使用cordova 的人来说，这一步可不是那么容易走的通的。
你可能遇到的第一个问题是可能会下载很多的包文件，在你第一次运行android平台的时候，cordova 会向服务器请求很多的数据包，由于国内网络环境这个过程可能会的非常非常的慢，总之你就安心等着他下载好，安装好就好了。要有耐心。这个错误会报 请求网络超时的错误。
第二个问题是你的SDK 缺少一个必要文件。这个时候你用
cordova requirements 这个命令查看一下。下面的信息是我的，我的都是安装好的了，要是缺少哪些东西控制台会给出提示的，到时候去你的ANDROID SDK 那边儿更新一下需要的东西就行了。
图片.png
- 运行打包以及运行程序。
添加好平台之后，我们就可以打包以及运行我们的程序啦。 - Cordova 打包APK
- 命令：cordova build android
图片.png
在打包之前我们首先看一下我们创建的cordova 项目的目录：
上图为cordova 项目的文件目录，主要几个文件：
a) www :::::::: 这个文件夹主要存放的是html 页面，注意index.html 引用的cordova.js 这个文件很重要，不要丢失。
b) platforms ::::::: 这个文件夹 主要放的平台的信息的，当我们打完包后，apk 就在platforms\android\build\outputs\apk 这个目录下。
c) plugins ::::::::::: 这个文件夹 主要放插件的 例如打开摄像机，获取电话簿等等。
d) config,xml :::::: 这个主要配置安卓一些系统信息的。
- 打包
图片.png
图片.png
看到上图的信息说明打包成功。去目录里去找你的apk 吧。然后安装在手机上试试。
- 运行
当手机连接到电脑上的时候，我们可以直接 run 命令，将apk 安装到你的手机上。 命令： cordova run android
注意：你的手机要打开开发者模式，并且在cmd 输入adb devices 可以看到你的设备。
图片.png
现在开始运行吧。
图片.png
现在可以在你的手机查看你的应用程序啦，虽然只有一个页面，但是毕竟成功了呀。
- Cordova 插件使用
- 添加一个插件
- 添加插件 命令：cordova plugin add cordova-plugin-camera
图片.png
- 查看已安装的插件 命令：cordova plugin ls
图片.png
- 使用插件
注意：老版本和新版的的cordova 在这个地方是有区别的啊！老版本是手动的添加插件的，但是新版的cordova 已经帮我们做了这一块了，所以说老版本的程序用新版本的cordova 重新进行打包，会出现插件失灵的情况。
我们来使用一个插件功能吧，打开摄像机。
<!DOCTYPEhtml>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript"charset="utf-8" src="cordova.js"></script>
<script type="text/javascript"charset="utf-8">
var pictureSource; // picture source
var destinationType; // sets the formatof returned value
// Wait for device API libraries toload //
document.addEventListener("deviceready", onDeviceReady,false);
// device APIs are available //
function onDeviceReady() {
pictureSource =navigator.camera.PictureSourceType;
destinationType =navigator.camera.DestinationType;
}
// Called when a photo is successfullyretrieved //
function onPhotoDataSuccess(imageData){
// Uncomment to view thebase64-encoded image data //
console.log(imageData);
// Get image handle //
var smallImage =document.getElementById('smallImage');
// Unhide image elements //
smallImage.style.display = 'block';
// Show the captured photo // The in-line CSS rules are used toresize the image //
smallImage.src ="data:image/jpeg;base64," + imageData;
}
// Called when a photo is successfullyretrieved //
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image fileURI //
console.log(imageURI);
// Get image handle //
var largeImage =document.getElementById('largeImage');
// Unhide image elements //
largeImage.style.display = 'block';
// Show the captured photo // The in-line CSS rules are used toresize the image //
largeImage.src = imageURI;
}
// A button will call this function //
function capturePhoto() {
// Take picture using device cameraand retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 50,
destinationType:destinationType.DATA_URL
});
}
// A button will call thisfunction //
function capturePhotoEdit() {
// Take picture using devicecamera, allow edit, and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
quality: 20,
allowEdit: true,
destinationType:destinationType.DATA_URL
});
}
// A button will call thisfunction //
function getPhoto(source) {
// Retrieve image file locationfrom specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, {
quality: 50,
destinationType:destinationType.FILE_URI,
sourceType: source
});
}
// Called if something badhappens. //
function onFail(message) {
alert('Failed because: ' +message);
}
</script>
</head>
<body>
<buttononclick="capturePhoto();">Capture Photo</button>
<br>
<buttononclick="capturePhotoEdit();">Capture EditablePhoto</button>
<br>
<buttononclick="getPhoto(pictureSource.PHOTOLIBRARY);">From PhotoLibrary</button>
<br>
<buttononclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From PhotoAlbum</button>
<br>
<imgstyle="display:none;width:60px;height:60px;"id="smallImage" src=""/>
<imgstyle="display:none;" id="largeImage" src=""/>
</body>
</html>
将以上的html 代码，替换你的index.html 代码。然后重新run/build 一下，试试新的apk 是不是可以调用你的相机了呢。
- Debug 程序（自行整理的）
- 首先打开你的app。
- 运行如下命令
图片.png
现在进入了我手机的shell 窗口，命令窗口。
- 运行 logcat –c 这个是清除之前的log信息。
- 运行 logcat *:D 这是查看当前系统所有的日志信息，信息量很大。
- 运行 logcat *: D | grep www.example.YANG 这个这是查 指定app 的日志。Gerp 后面跟的你app 的包名。
8.常用命令
一.插件相关常用命令
1，查看所有已经安装的插件
1 cordova plugin ls
2，安装插件（以camera插件为例）
1 cordova plugin add cordova-plugin-camera
3，删除插件（以camera插件为例）
1 cordova plugin rm cordova-plugin-camera
4，更新插件
1 cordova plugin update
二，常用的Cordova插件
1，Console（调试控制台）
让程序可以在控制台中打印输出日志。
1 cordova plugin add cordova-plugin-console
2，Connection（网络连接）
用来判断网络连接类型（2G、3G、4G、Wifi、无连接等）
1 cordova plugin add cordova-plugin-network-information
3，Device（设备）
获取一些设备信息。
1 cordova plugin add cordova-plugin-device
4，Hardware Nofifications（硬件消息提醒）
让设备蜂鸣或振动。
1 cordova plugin add cordova-plugin-vibration
5，Visual Notification（可视化消息提醒）
不同于js的alert()、confirm()和prompt()方法是同步的。Cordova的alert()、confirm()和prompt()方法是异步的，并且对显示内容有更大的控制权限。
1 cordova plugin add cordova-plugin-dialogs
6，Battery（电池）
可以获取电池状态信息。
1 cordova plugin add cordova-plugin-battery-status
7，Accelerometer(加速计)
让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。
1 cordova plugin add cordova-plugin-device-motion
8，Compass(指南针)
可以让开发者读取移动设备的朝向。
1 cordova plugin add cordova-plugin-device-orientation
9，Geolocation(地理定位)
让应用判断设备的物理位置。
1 cordova plugin add cordova-plugin-geolocation
10，Camera(相机)
用相机获取图像。
1 cordova plugin add cordova-plugin-camera
11，Media Capture （媒体捕获）
与Camera API相比，不仅能获取图像，还可以录视频或者录音。
1 cordova plugin add cordova-plugin-media-capture
12，Globalization(全球化)
允许应用查询操作系统的当前设置，判断用户使用的语言。
1 cordova plugin add cordova-plugin-globalization
13，Contacts（联系人）
读取联系人列表并在应用中使用联系人数据，或使用应用数据向联系人列表中写新的联系人。
1 cordova plugin add cordova-plugin-contacts
14，Media（播放/记录媒体文件）
让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。
1 cordova plugin add cordova-plugin-media
15，InAppBrowser（内置浏览器）
允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理，但有时候需要不同的用户体验，InAppBrowser加载网页内容，应用用户可以更方便的直接返回到主应用。
1 cordova plugin add cordova-plugin-inappbrowser
16，Splashscreen（闪屏）
用来在Cordova应用启动时显示自定义的闪屏。
1 cordova plugin add cordova-plugin-splashscreen
17，exitApp（退出应用）
让 Android 或者 Windows Phone 8 上的APP关闭退出（iOS系统不支持）。
1 cordova plugin add cordova-plugin-exitapp
18，barcodeScanner（条形码/二维码扫描）
不仅可以通过摄像头识别二维码/条形码，还能生成二维码。
1 cordova plugin add cordova-plugin-barcodescanner
19，file（文件访问操作类）
提供对设备上的文件进行读取和写入的功能支持。
1 cordova plugin add cordova-plugin-file
20，fileTransfer（文件传输）
实现文件上传、下载及共享等功能。
1 cordova plugin add cordova-plugin-file-transfer
常用命令来自：http://www.hangge.com/blog/cache/detail_1158.html ··
