cordova插件开发

最新推荐文章于 2024-04-11 16:55:27 发布

weixin_34221332

最新推荐文章于 2024-04-11 16:55:27 发布

阅读量75

点赞数

文章标签： javascript 移动开发 ViewUI

原文链接：http://www.cnblogs.com/iriliguo/p/6476105.html

版权

{//-------------------------------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="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 ο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>
<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 οnlοad="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 导入该项目运行
}

}

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

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();

}

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

weixin_34221332

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cordova插件开发

{//-------------------------------Cordova Plugin 插件开发------------------{//1. helloworld > cordova create hello > cd hello > dir /*目录如下 config.xml: // 配置文件 hooks目录: //存放自定义cordova命令的脚本文件。每...
复制链接

扫一扫