cordova插件開發

時間 2019-11-18

原文原文鏈接

{//-------------------------------Cordova Plugin 插件開發------------------
{//1. helloworld
> cordova create hello
> cd hello
> dir /*目錄以下
config.xml: // 配置文件
hooks目錄: //存放自定義cordova命令的腳本文件。每一個project命令均可以定義before和after的Hook，好比：before_build、after_build。Hook能夠採用任何編程語言來寫，Cordova CLI採用的是Node.js，因此通常都是用它來寫.
platforms目錄: //各個平臺的原生代碼工程，不要手動修改，由於在build的時候會被覆蓋
plugins目錄: //插件目錄（cordova提供的原生API也是以插件的形式提供的）。
www目錄: //源代碼目錄，.html爲應用的入口文件
*/
在 www目錄下建立 hello.html /*並輸入下面內容
<!DOCTYPE HTML>
<html>
<head>
<title>HelloWorld1</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a sample Cordova application</p>
</body>
</html>
*/
修改config.xml，把src屬性改成hello.html，//修改啓動頁面爲hello.html
> cordova platform add browser
> cordova platform add android@6.0 --save
> cordova build android
用Android Studio 導入該項目運行
}javascript

{//2. "dialogs" 彈出提示框
> cordova plugin add cordova-plugin-dialogs
修改 hello.html內容爲 /*
<!DOCTYPE HTML>
<html>
<head>
<script src="cordova.js" type="text/javascript" charset="uft-8"></script> // 加載了核心的Cordova API基本庫
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false); //註冊了deviceready事件的監聽器爲onDeviceReady函數
}
function onDeviceReady() { //當改onDeviceReady被調用時，輸出提示信息
navigator.notification.alert("Cordova API alert Message "); //調用cordova api前需添加其對應的插件例如 dialogs
}
</script>
<titile> use cordova api</title>
</head>
<body onload="onBodyLoad()"> //定義了body的 onload事件關聯到onBodyLoad處理函數
<h1>use cordova api</h1>
<p>use cordova api demo</p>
</body>
</html>
*/css

> cordova build android
用Android Studio 導入該項目運行
}

{//3. "device" 獲取設備硬件信息
> cordova plugin add cordova-plugin-device
修改 hello.html內容爲 /*
<!DOCTYPE HTML>
<html>
<head>
<script src="cordova.js" type="text/javascript" charset="uft-8"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() { //經過device. 的方式獲取設備信息
br = "<br />";
var element = document.getElementById("appInfo");
element.innerHTML = 'Cordova Version: ' + device.cordova + br + 'Platform: ' + device.platform + br + 'Model: ' + device.model + br + 'OS Version: ' + device.version;
}
</script>
<titile> use cordova api</title>
</head>
<body onload="onBodyLoad()">
<h1>use cordova api</h1>
<p>use cordova api device</p>
<p id="appInfo">Waiting for Cordova Initialization to complete</p> //注意若是前面不添加cordova-plugin-device插件成功，將一直顯示該信息
</body>
</html>
*/
> cordova build android
用Android Studio 導入該項目運行
}

{//4. "camera" 實現最簡獲取camera圖片
> cordova plugin add cordova-plugin-camera
> cordova plugin add cordova-plugin-console //想看到console.log的信息，必需要安裝此插件

更改config.html /*
<content src="camera.html" />
*/

{//---camera.html
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet"a type="text/css" href="css/index.css">
<title>test camera plugin</title>
</head>
<body>
<h1>Camera Demo</h1>
<button id="takeBtn">Take Photo</button>
<div id="feedback"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
</body>
</html>
}

{//---js/camera.js
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},

// Bind Event Listeners：
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},

// deviceready Event Handler：
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
feedback = document.getElementById("feedback");
feedback.innerHTML = "Ready!";
app.receivedEvent();
},

// Update DOM on a Received Event
receivedEvent: function() {
var getPictureButton = document.getElementById("takeBtn");

getPictureButton.onclick = this.onClickTakeBtn;
},

onClickTakeBtn: function() {
feedback.innerHTML += "<br/> Taking Photo";
var cameraOptions = {};
navigator.camera.getPicture(app.cameraSuccess, app.cameraError, cameraOptions);
},

cameraSuccess: function(imgData) {
feedback.innerHTML += "<br/> Received photo";
feedback.innerHTML += "<br/>" + imgData;
},

cameraError: function() {
feedback.innerHTML = "Get failed";
}

};

app.initialize();
}

{//---運行
> cordova build android
用Android Studio 導入該項目運行
}

}html

{//5. "network" 獲取當前網絡狀態
> cordova plugin add cordova-plugin-network-information
{//----network.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>net device info</title>
</head>
<body>
<div class="app">
<h1>Net Device</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<button id = "networkInfo">INFO 11</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/network.js"></script>
</body>
</html>
}

{//----network.js
var app = {
initialize: function() {
this.bindEvents();
},java

bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},android

onDeviceReady: function() {
app.receivedEvent('deviceready');
},git

receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);
}
};編程

app.initialize();api

}

{//7. "motion" 加速度傳感器
>sudo cordova plugin add cordova-plugin-device-motion

{//----motion.html
<button id = "getAcceleration">GET ACCELERATION</button>
<button id = "watchAcceleration">WATCH ACCELERATION</button>
}

{//----motion.js
function load (){
console.log( 'load start' );

document.getElementById("getAcceleration").addEventListener("click", getAcceleration);
document.getElementById("watchAcceleration").addEventListener("click", watchAcceleration);
function getAcceleration(){
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

function accelerometerSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
};

function accelerometerError() {
alert('onError!');
};

}

function watchAcceleration(){

var accelerometerOptions = {
frequency: 3000
}

var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess, accelerometerError, accelerometerOptions);

function accelerometerSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');

setTimeout(function() {
navigator.accelerometer.clearWatch(watchID);
}, 10000);

};

function accelerometerError() {
alert('onError!');
};

}

}
window.addEventListener('load',load,false);
}
}
}app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。