首页 > 代码库 > cordova插件开发
cordova插件开发
{//-------------------------------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 导入该项目运行
}
{//2. "dialogs" 弹出提示框
> cordova plugin add cordova-plugin-dialogs
修改 hello.html内容为 /*
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.mamicode.com/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 onl oad="onBodyLoad()"> //定义了body的 onl oad事件关联到onBodyLoad处理函数
<h1>use cordova api</h1>
<p>use cordova api demo</p>
</body>
</html>
*/
> cordova build android
用Android Studio 导入该项目运行
}
{//3. "device" 获取设备硬件信息
> cordova plugin add cordova-plugin-device
修改 hello.html内容为 /*
<!DOCTYPE HTML>
<html>
<head>
<script src="http://www.mamicode.com/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 onl oad="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="http://www.mamicode.com/camera.html" />
*/
{//---camera.html
<!DOCTYPE html>
<!-- test use camera plugin
-->
<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="http://www.mamicode.com/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="http://www.mamicode.com/cordova.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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 导入该项目运行
}
}
{//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="http://www.mamicode.com/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="http://www.mamicode.com/cordova.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/network.js"></script>
</body>
</html>
}
{//----network.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener(‘deviceready‘, this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent(‘deviceready‘);
},
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();
function load (){
console.log( ‘load start‘ );
document.getElementById("networkInfo").addEventListener("click", networkInfo);
document.addEventListener("offline", onOffline, false);
document.addEventListener("online", onOnline, false);
function networkInfo() {
console.log( ‘networkInfo start‘ );
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = ‘Unknown connection‘;
states[Connection.ETHERNET] = ‘Ethernet connection‘;
states[Connection.WIFI] = ‘WiFi connection‘;
states[Connection.CELL_2G] = ‘Cell 2G connection‘;
states[Connection.CELL_3G] = ‘Cell 3G connection‘;
states[Connection.CELL_4G] = ‘Cell 4G connection‘;
states[Connection.CELL] = ‘Cell generic connection‘;
states[Connection.NONE] = ‘No network connection‘;
alert(‘Connection type: ‘ + states[networkState]);
}
function onOffline() {
console.log( ‘offline‘ );
alert(‘You are now offline!‘);
}
function onOnline() {
console.log( ‘online‘ );
alert(‘You are now online!‘);
}
}
window.addEventListener(‘load‘,load,false);
}
}
{//6. "geolocation" 地理定位
> cordova plugin add cordova-plugin-geolocation
//----geolocation.html
<button id = "getPosition">CURRENT POSITION</button>
<button id = "watchPosition">WATCH POSITION</button>
{//----geolocation.js
function load (){
console.log( ‘load start‘ );
document.getElementById("getPosition").addEventListener("click", getPosition);
document.getElementById("watchPosition").addEventListener("click", watchPosition);
function getPosition() {
var options = {
enableHighAccuracy: true,
maximumAge: 3600000
}
var watchID = navigator.geolocation.getCurrentPosition(onSuccess, one rror, options);
function onSuccess(position) {
alert(‘Latitude: ‘ + position.coords.latitude + ‘\n‘ +
‘Longitude: ‘ + position.coords.longitude + ‘\n‘ +
‘Altitude: ‘ + position.coords.altitude + ‘\n‘ +
‘Accuracy: ‘ + position.coords.accuracy + ‘\n‘ +
‘Altitude Accuracy: ‘ + position.coords.altitudeAccuracy + ‘\n‘ +
‘Heading: ‘ + position.coords.heading + ‘\n‘ +
‘Speed: ‘ + position.coords.speed + ‘\n‘ +
‘Timestamp: ‘ + position.timestamp + ‘\n‘);
};
function one rror(error) {
alert(‘code: ‘ + error.code + ‘\n‘ + ‘message: ‘ + error.message + ‘\n‘);
}
}
function watchPosition() {
var options = {
maximumAge: 3600000,
timeout: 3000,
enableHighAccuracy: true,
}
var watchID = navigator.geolocation.watchPosition(onSuccess, one rror, options);
function onSuccess(position) {
alert(‘Latitude: ‘ + position.coords.latitude + ‘\n‘ +
‘Longitude: ‘ + position.coords.longitude + ‘\n‘ +
‘Altitude: ‘ + position.coords.altitude + ‘\n‘ +
‘Accuracy: ‘ + position.coords.accuracy + ‘\n‘ +
‘Altitude Accuracy: ‘ + position.coords.altitudeAccuracy + ‘\n‘ +
‘Heading: ‘ + position.coords.heading + ‘\n‘ +
‘Speed: ‘ + position.coords.speed + ‘\n‘ +
‘Timestamp: ‘ + position.timestamp + ‘\n‘);
};
function one rror(error) {
alert(‘code: ‘ + error.code + ‘\n‘ +‘message: ‘ + error.message + ‘\n‘);
}
}
}
window.addEventListener(‘load‘,load,false);
}
}
{//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);
}
}
}
cordova插件开发