cordova插件开发-白红宇

cordova插件开发

阅读量：5773 次

发布时间：2019-06-18

本文共 10913 字，大约阅读时间需要 36 分钟。

{//-------------------------------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>

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 οnlοad="onBodyLoad()"> //定义了body的 onload事件关联到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>

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>

<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 /*

{//---camera.html

<!DOCTYPE html>

<!-- test use camera plugin

-->

<html>

<head>

<title>test camera plugin</title>

</head>

<body>

<h1>Camera Demo</h1>

<button id="takeBtn">Take Photo</button>

</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>

<title>net device info</title>

</head>

<body>

<h1>Net Device</h1>

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</div>

</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, onError, 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 onError(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, onError, 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 onError(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);

}

转载于:https://www.cnblogs.com/iriliguo/p/6476105.html

你可能感兴趣的文章

浅谈Java等软件和嵌入式的区别，给你明确一个方向

查看>>

利用App漏洞获利2800多万元，企业该如何避免类似事件？

14Exchange Server 2010跨站点部署-发送连接器

LinuxCon的中国首秀请了哪些开源大咖？

Wyn Enterprise 核心功能：系统集成