1、使用node.js的依賴包管理工具npm進行Cordova的安裝
打開終端輸入如下命令：
sudo npm install -g cordova // 盡量不要使用sudo
題外話，有安裝就有卸載：
sudo npm uninstall cordova -g
cordova的安裝.png
2、創建Cordova的項目
<h6>2、1 新建一個Cordova的項目</h6>
cordova create hello com.example.hello HelloWorld [--template templatePath]
cordova create ccc com.example.ccc CCC
| Parameter | Description | Notes |
|---|---|---|
hello 參數是必填
|
將為你的項目生成一個hello目錄 | www子目錄是應用程序的主頁，以及各種資源(css,js,img)，遵循共同的web開發文件命名規范。這些資源將存儲在設備上的本地文件系統，而不是遠程服務。config.xml文件包含重要的需要生成和分發應用程序的元數據。 |
com.example.hello 參數可選
|
App ID | 如果不填寫這個參數，第三個參數就要省略，默認值是 io.cordova.hellocordova，但建議你填寫一個適當的值。 |
HelloWorld參數可選
|
應用程序的項目名 | 這個參數的默認值是 HelloCordova，但建議你填寫一個適當的值。 |
[--template templatePath] 參數可選，一般不填寫
|
使用模板創建一個項目。 | 所有文件和文件夾的模板將被復制到新的項目。平臺和插件可能包含在一個模板。這個參數是可選的。模板的路徑可以是一個本地路徑，NPM模塊或Git URL。 |
2、2 添加平臺
所有后續命令需要在項目的目錄中運行，其范圍內或任何子目錄：
cd Desktop/ccc
在創建項目之前，您需要指定一組目標平臺：
cordova platform add ios
- 迭代項目 在ccc目錄中運行下面的命令來構建項目：
cordova build
- 或指定生成iOS平臺的代碼項目：
cordova platform add ios
效果圖.png
3、cordova項目
3、1 cordova項目創建完成
項目創建完成.png
3、2 Events Cordova聲明周期事件
- deviceready 當Cordova加載完成會觸發
將index.html中的文本替換成如下文本：
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
// Now safe to use device APIs
alert("onDeviceReady");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
運行結果：
運行結果.png
- pause 當應用程序進入到后臺會觸發
- resumes 應用程序從后臺進入到前臺會觸發
》》》步驟：替換html文本 -> 運行iOS程序 -> 開發者調試 -> 模擬器進入后臺再進入前臺
將index.html中的文本替換成如下文本：
<!DOCTYPE html>
<html>
<head>
<title>Pause Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("resume", onResume, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("pause", onPause, false);
}
// Handle the pause event
//
function onPause() {
console.log("onPause");
}
// Handle the resume event
//
function onResume() {
console.log("onResume");
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
運行結果.png
3、3Plugin APIs
cordova-plugin-console Cordova Console Plugin
1> 安裝
cordova plugin add cordova-plugin-console
console插件安裝
![Uploading 屏幕快照 2017-02-18 上午1.35.13_535134.png . . .]
2> 實例
將index.html中的文本替換成如下文本：
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function consoleLog(){
console.log("console.log works well");
}
function consoleError(){
console.error("console.error works well");
}
function consoleException(){
console.exception("console.exception works well");
}
function consoleWarn(){
console.warn("console.warn works well");
}
function consoleInfo(){
console.info("console.info works well");
}
function consoleDebug(){
console.debug("console.debug works well");
}
function consoleAssert(){
console.assert("console.assert works well");
}
function consoleDir(){
console.dir("console.dir works well");
}
function consoleDirxml(){
console.dirxml("console.dirxml works well");
}
function consoleTime(){
console.time("console.time works well");
}
function consoleTimeEnd(){
console.timeEnd("console.timeEnd works well");
}
function consoleTable(){
console.table("console.table works well");
}
</script>
<style type="text/css">
button {
width: 200px;height:26px;font-size: 20px;padding: 1px;margin-left: 100px;
}
</style>
</head>
<body>
<div ><br/><br/>
<br/><button onclick="consoleLog()">consoleLog</button><br/>
<br/><button onclick="consoleError()">consoleError</button><br/>
<br/><button onclick="consoleException()">consoleException</button><br/>
<br/><button onclick="consoleWarn()">consoleWarn</button><br/>
<br/><button onclick="consoleInfo()">consoleInfo</button><br/>
<br/> <button onclick="consoleDebug()">consoleDebug</button><br/>
<br/><button onclick="consoleAssert()">consoleAssert</button><br/>
<br/> <button onclick="consoleDir()">consoleDir</button><br/>
<br/> <button onclick="consoleDirxml()">consoleDirxml</button><br/>
<br/><button onclick="consoleTime()">consoleTime</button><br/>
<br/><button onclick="consoleTimeEnd()">consoleTimeEnd</button><br/>
<br/><button onclick="consoleTable()">consoleTable</button><br/>
</div>
</div>
</body>
</html>
運行結果：
Safiri+Xcode+Simulator運行結果
