Cordova 使用指南
一芭析、 Cordova 版本
圖片.png
二、 參考資料
http://cordova.apache.org/docs/en/latest/guide/cli/index.html
三排截、 安裝以及運(yùn)行Cordova
- 安裝node.js
安裝node.js確保 輸入node –v 后可以顯示node.js 的版本信息。如果你輸入的node.js 確提示“不是內(nèi)部或外部命令”，很有可能是是你的環(huán)境變量配置錯(cuò)誤毙石。
(1) 安裝正確安裝將會(huì)看到的結(jié)果问裕。注意：不是在node.js command prompt 中輸入查看版本的命令逮壁，而是在CMD 中。
圖片.png
(2) 另附 node.js 的環(huán)境變量截圖粮宛。注意：我是在將node.js 安裝在D盤的窥淆。第一張圖是我的環(huán)境變量卖宠，第二張圖是我安裝nodeJs 的目錄和文件。
圖片.png
圖片.png
- 安裝npm
當(dāng)安裝好node.js后NPM 也應(yīng)該被安裝好了忧饭。由于新版的nodejs已經(jīng)集成了npm扛伍，所以之前npm也一并安裝好了。同樣可以通過輸入 "npm -v" 來測(cè)試是否成功安裝词裤。命令如下刺洒，出現(xiàn)版本提示表示安裝成功:
圖片.png
- 配置 ANDROID_SDK_HOME 環(huán)境變量
配置 ANDROID_SDK_HOME 環(huán)境變量，變量值為你的SDK吼砂。
圖片.png
另附：SDK 下載地址 http://sdk.android-studio.org/ 由于國(guó)內(nèi)會(huì)出現(xiàn)無法更新的SDK 的問題逆航，順便給你一個(gè)鏡像網(wǎng)站和使用方法。
圖片.png
- 安裝cordova
在你的CMD 中輸入 npm install –g cordova 然后cordova 會(huì)自動(dòng)安裝的渔肩。由于國(guó)內(nèi)環(huán)境因俐，這個(gè)安裝過程可能會(huì)很漫長(zhǎng)，很有可能出現(xiàn)網(wǎng)絡(luò)中斷的現(xiàn)象周偎，重復(fù)輸入命令重新安裝就好了抹剩。
圖片.png
安裝成功后輸入一下版本輸入一下查看cordova 版本信息的命令。出現(xiàn)下面的界面就代表你安裝成功了蓉坎。
圖片.png
- 讓我們創(chuàng)建一個(gè)cordova 應(yīng)用程序吧澳眷。
- 創(chuàng)建cordova 項(xiàng)目
在合適的文件夾內(nèi)輸入：cordova create YANG com.example.YANG YY
YANG::::::: 這個(gè)是我們創(chuàng)建的文件夾的名字
com.example.YANG:::::::::::::::::::: 這個(gè)是我們創(chuàng)建的apk 的包名
YY:::::::::::::::::::::::: 這個(gè)是 應(yīng)用的名字
以上三條都屬于我個(gè)人的理解，若錯(cuò)了蛉艾，別見怪境蔼。
附圖： 沒有報(bào)錯(cuò)，創(chuàng)建成功了伺通。
圖片.png
- 為cordova 添加平臺(tái)
Cordova 可不僅僅創(chuàng)建android \Ios 的應(yīng)用程序箍土，還可以創(chuàng)建windows\Linux 等平臺(tái)的應(yīng)用程序哦。 - 添加一個(gè)android 平臺(tái)罐监。
(1) 進(jìn)入到我們剛剛創(chuàng)建的cordoav 文件中 命令：cd YANG
(2) 添加平臺(tái) 命令： cordova platform add android –save
若出現(xiàn)下列信息證明吴藻，這一步操作正確啦。
圖片.png
９９当ぁ！Ｊ缚铡航罗！但是對(duì)于第一次安裝使用cordova 的人來說，這一步可不是那么容易走的通的屁药。
你可能遇到的第一個(gè)問題是可能會(huì)下載很多的包文件粥血，在你第一次運(yùn)行android平臺(tái)的時(shí)候，cordova 會(huì)向服務(wù)器請(qǐng)求很多的數(shù)據(jù)包，由于國(guó)內(nèi)網(wǎng)絡(luò)環(huán)境這個(gè)過程可能會(huì)的非常非常的慢复亏，總之你就安心等著他下載好趾娃，安裝好就好了。要有耐心缔御。這個(gè)錯(cuò)誤會(huì)報(bào) 請(qǐng)求網(wǎng)絡(luò)超時(shí)的錯(cuò)誤抬闷。
第二個(gè)問題是你的SDK 缺少一個(gè)必要文件。這個(gè)時(shí)候你用
cordova requirements 這個(gè)命令查看一下耕突。下面的信息是我的笤成，我的都是安裝好的了，要是缺少哪些東西控制臺(tái)會(huì)給出提示的眷茁，到時(shí)候去你的ANDROID SDK 那邊兒更新一下需要的東西就行了疹启。
圖片.png
- 運(yùn)行打包以及運(yùn)行程序。
添加好平臺(tái)之后蔼卡，我們就可以打包以及運(yùn)行我們的程序啦。 - Cordova 打包APK
- 命令：cordova build android
圖片.png
在打包之前我們首先看一下我們創(chuàng)建的cordova 項(xiàng)目的目錄：
上圖為cordova 項(xiàng)目的文件目錄挣磨，主要幾個(gè)文件：
a) www :::::::: 這個(gè)文件夾主要存放的是html 頁(yè)面雇逞，注意index.html 引用的cordova.js 這個(gè)文件很重要，不要丟失茁裙。
b) platforms ::::::: 這個(gè)文件夾 主要放的平臺(tái)的信息的塘砸，當(dāng)我們打完包后，apk 就在platforms\android\build\outputs\apk 這個(gè)目錄下晤锥。
c) plugins ::::::::::: 這個(gè)文件夾 主要放插件的 例如打開攝像機(jī)掉蔬，獲取電話簿等等。
d) config,xml :::::: 這個(gè)主要配置安卓一些系統(tǒng)信息的矾瘾。
- 打包
圖片.png
圖片.png
看到上圖的信息說明打包成功女轿。去目錄里去找你的apk 吧。然后安裝在手機(jī)上試試壕翩。
- 運(yùn)行
當(dāng)手機(jī)連接到電腦上的時(shí)候蛉迹，我們可以直接 run 命令，將apk 安裝到你的手機(jī)上放妈。 命令： cordova run android
注意：你的手機(jī)要打開開發(fā)者模式北救，并且在cmd 輸入adb devices 可以看到你的設(shè)備。
圖片.png
現(xiàn)在開始運(yùn)行吧芜抒。
圖片.png
現(xiàn)在可以在你的手機(jī)查看你的應(yīng)用程序啦珍策，雖然只有一個(gè)頁(yè)面，但是畢竟成功了呀宅倒。
- Cordova 插件使用
- 添加一個(gè)插件
- 添加插件 命令：cordova plugin add cordova-plugin-camera
圖片.png
- 查看已安裝的插件 命令：cordova plugin ls
圖片.png
- 使用插件
注意：老版本和新版的的cordova 在這個(gè)地方是有區(qū)別的叭林妗！老版本是手動(dòng)的添加插件的，但是新版的cordova 已經(jīng)幫我們做了這一塊了模聋，所以說老版本的程序用新版本的cordova 重新進(jìn)行打包肩民，會(huì)出現(xiàn)插件失靈的情況。
我們來使用一個(gè)插件功能吧链方，打開攝像機(jī)持痰。
<!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 是不是可以調(diào)用你的相機(jī)了呢。
- Debug 程序（自行整理的）
- 首先打開你的app前酿。
- 運(yùn)行如下命令
圖片.png
現(xiàn)在進(jìn)入了我手機(jī)的shell 窗口患雏，命令窗口。
- 運(yùn)行 logcat –c 這個(gè)是清除之前的log信息罢维。
- 運(yùn)行 logcat *:D 這是查看當(dāng)前系統(tǒng)所有的日志信息淹仑，信息量很大。
- 運(yùn)行 logcat *: D | grep www.example.YANG 這個(gè)這是查 指定app 的日志肺孵。Gerp 后面跟的你app 的包名匀借。
8.常用命令
一.插件相關(guān)常用命令
1，查看所有已經(jīng)安裝的插件
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（調(diào)試控制臺(tái)）
讓程序可以在控制臺(tái)中打印輸出日志。
1 cordova plugin add cordova-plugin-console
2紫新，Connection（網(wǎng)絡(luò)連接）
用來判斷網(wǎng)絡(luò)連接類型（2G均蜜、3G、4G芒率、Wifi兆龙、無連接等）
1 cordova plugin add cordova-plugin-network-information
3，Device（設(shè)備）
獲取一些設(shè)備信息敲董。
1 cordova plugin add cordova-plugin-device
4紫皇，Hardware Nofifications（硬件消息提醒）
讓設(shè)備蜂鳴或振動(dòng)。
1 cordova plugin add cordova-plugin-vibration
5腋寨，Visual Notification（可視化消息提醒）
不同于js的alert()聪铺、confirm()和prompt()方法是同步的。Cordova的alert()萄窜、confirm()和prompt()方法是異步的铃剔，并且對(duì)顯示內(nèi)容有更大的控制權(quán)限撒桨。
1 cordova plugin add cordova-plugin-dialogs
6，Battery（電池）
可以獲取電池狀態(tài)信息键兜。
1 cordova plugin add cordova-plugin-battery-status
7凤类，Accelerometer(加速計(jì))
讓應(yīng)用在三維空間(使用笛卡爾三維坐標(biāo)系統(tǒng))中決定設(shè)備方向。
1 cordova plugin add cordova-plugin-device-motion
8普气，Compass(指南針)
可以讓開發(fā)者讀取移動(dòng)設(shè)備的朝向谜疤。
1 cordova plugin add cordova-plugin-device-orientation
9，Geolocation(地理定位)
讓應(yīng)用判斷設(shè)備的物理位置现诀。
1 cordova plugin add cordova-plugin-geolocation
10夷磕，Camera(相機(jī))
用相機(jī)獲取圖像。
1 cordova plugin add cordova-plugin-camera
11仔沿，Media Capture （媒體捕獲）
與Camera API相比坐桩，不僅能獲取圖像，還可以錄視頻或者錄音封锉。
1 cordova plugin add cordova-plugin-media-capture
12绵跷，Globalization(全球化)
允許應(yīng)用查詢操作系統(tǒng)的當(dāng)前設(shè)置，判斷用戶使用的語言成福。
1 cordova plugin add cordova-plugin-globalization
13碾局，Contacts（聯(lián)系人）
讀取聯(lián)系人列表并在應(yīng)用中使用聯(lián)系人數(shù)據(jù)，或使用應(yīng)用數(shù)據(jù)向聯(lián)系人列表中寫新的聯(lián)系人闷叉。
1 cordova plugin add cordova-plugin-contacts
14，Media（播放/記錄媒體文件）
讓應(yīng)用能記錄或播放媒體文件脊阴。用它可以在手機(jī)后臺(tái)播放音頻文件或玩桌面視頻游戲握侧。
1 cordova plugin add cordova-plugin-media
15，InAppBrowser（內(nèi)置瀏覽器）
允許在在單獨(dú)的窗口中加載網(wǎng)頁(yè)嘿期。例如要向應(yīng)用用戶展示其他網(wǎng)頁(yè)品擎。當(dāng)然可以很容易地在應(yīng)用中加載網(wǎng)頁(yè)內(nèi)容并管理，但有時(shí)候需要不同的用戶體驗(yàn)备徐，InAppBrowser加載網(wǎng)頁(yè)內(nèi)容萄传，應(yīng)用用戶可以更方便的直接返回到主應(yīng)用。
1 cordova plugin add cordova-plugin-inappbrowser
16蜜猾，Splashscreen（閃屏）
用來在Cordova應(yīng)用啟動(dòng)時(shí)顯示自定義的閃屏秀菱。
1 cordova plugin add cordova-plugin-splashscreen
17，exitApp（退出應(yīng)用）
讓 Android 或者 Windows Phone 8 上的APP關(guān)閉退出（iOS系統(tǒng)不支持）蹭睡。
1 cordova plugin add cordova-plugin-exitapp
18衍菱，barcodeScanner（條形碼/二維碼掃描）
不僅可以通過攝像頭識(shí)別二維碼/條形碼，還能生成二維碼肩豁。
1 cordova plugin add cordova-plugin-barcodescanner
19脊串，file（文件訪問操作類）
提供對(duì)設(shè)備上的文件進(jìn)行讀取和寫入的功能支持辫呻。
1 cordova plugin add cordova-plugin-file
20，fileTransfer（文件傳輸）
實(shí)現(xiàn)文件上傳琼锋、下載及共享等功能放闺。
1 cordova plugin add cordova-plugin-file-transfer
常用命令來自：http://www.hangge.com/blog/cache/detail_1158.html ··
