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 [email protected] --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 > //定义了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 >
<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>
<!-- 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="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();

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

时间： 2024-10-11 00:05:35

cordova插件开发的相关文章

cordova 插件开发

从事基于cordova开发混合APP也快一年了,一直没有自己"亲自操刀"写一个插件,因为网上插件太丰富了,可耻了. 今天完整的记录一次插件开发. cordova环境6.4.0 第一步安装:plugman npm install -g plugman 第二步:创建插件 plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path

Android Cordova 插件开发之创建项目

使用命令行创建项目 cordova 创建项目的命令是 cordova create <dir> <packageName> <projectName> 第一个参数 < dir >:项目目录文件夹的名称 第二个参数< packageName >:项目的包名 第三个参数< projectName >:项目名称  那么,我们创建一个HelloWorld项目,通过命令行cd到项目要创建的根目录下,然后执行命令 cordova create h

Android Cordova 插件开发之编写自定义插件

前言 本文适合Android+web的复合型人才,因为cordova本身就是混合开发,所以在Android开发的基础上,还要懂web相关技术(HTML+CSS+JS),但是也有例外,比如我,只需负责Android方面,web方面的交由其他web组人员开发.虽然,web略懂一点,但我主要还是搞Android开发的. 编写自定义插件类 本节的内容是,自定义一个dialog插件,供web调用,显示系统弹窗. 新建一个包名,我这里使用org.apache.cordova.dialog,然后创建个类Cus

Cordova Android源码分析系列一（项目总览和CordovaActivity分析）

PhoneGap/Cordova是一个专业的移动应用开发框架,是一个全面的WEB APP开发的框架,提供了以WEB形式来访问终端设备的API的功能.这对于采用WEB APP进行开发者来说是个福音,这可以避免了原生开发的某些功能.Cordova 只是个原生外壳,app的内核是一个完整的webapp,需要调用的原生功能将以原生插件的形式实现,以暴露js接口的方式调用. Cordova Android项目是Cordova Android原生部分的Java代码实现,提供了Android原生代码和上层We

cordova开发自定义的插件

1.环境搭建 (ios)   andriod(http://www.wenzhixin.net.cn/2014/03/20/cordova_my_plugin) cordova插件开发前需要安装一些软件和配置环境 1.1 node.js环境搭建 到node.js官网(https://nodejs.org/)下载安装就好 , 或者命令行  用homebrew 也很方便:百度一堆资料 1.2 cordova 的安装 在窗口输入下面命令全局安装cordova npm install -g cordov

Android基于cordova3.3插件开发

最近的工作项目,需要使用cordova插件开发,详细Cordova角色,不会走,你可以去百度自身OK该,直接启动.详细过程,我有一个小Demo解说提前进行. 还只是接触,东西太理论基础,我也不太清楚,或启动和上升Demo,去的动力-大家多多不吝赐教- Step1.准备工作: 首先将我提供的Demo实例包中的HelloWorld-CordovaLib引入到工作空间中,我是使用的Eclipse.接着创建projectMultiImageChooser,同一时候将HelloWorld-CordovaL

Cordoval在iOS中的运用整理

一:关于Cordoval理论知识 1:PhoneGap是手机平台上流行的一款中间件.它构建在各种手机平台所提供的WebView(浏览器内核)组件的基础之上,使用javascript语言对应用开发者提供统一的接口(如调用相机.调用其他本地组件),从而屏蔽了各手机平台上OS的异构.在无线小组的调研任务中,我的任务主要是负责iOS平台上的调研,本文简单描述了iOS平台上PhoneGap与平台本地的互操作性的实现. 2:PhoneGap因为被捐赠给了Apache而改名为Cordova,所以PhoneGa

iOS开发基础知识--碎片42

iOS开发基础知识--碎片42  iOS开发基础知识--碎片42 1:报thread 1:exc_bad_access(code=1,address=0x70********) 闪退 这种错误通常是内存管理的问题,一般是访问了已经释放的对象导致的,可以开启僵尸对象(Zombie Objects)来定位问题: 在Xcode的菜单: Product->Scheme->Edit Scheme->Run 右边的选项中,选中Enable Zombie Objects,就可以查看详细的错误信息: 2

cordova跨平台app开发02_自定义插件开发与安装

视频地址:http://t.cn/RacmXiy cordova的自定义插件由js.原生代码文件(java.oc).plugin.xml三部分组成. cordvoa提供了命令来创建插件模版项目. 创建插件模版 1.     pluman的安装 npm install –g plugman 2.     在d:\cordovaplugins创建一个名称为helloplugins,id为com.zql. helloplugins,版本号为1.0.0的插件 cd D:\cordovaplugins p