如何在cordova plugin add引入 require js

收藏,1.1k 浏览
本文承接上篇《使用Cordova API开发(下)》。
前面讨论的工具和插件都是Cordova框架一部分,但如果框架缺少相应的插件可以自已构建。
3.0以后由plugman和CLI提供的功能让插件有所改变。接下来将会讨论如何创建只有js的插件,还有Android的Native插件,其他平台的构建过程基本也是一样的。
剖析Cordova插件
在构建之前先解析下插件的结构。Cordova有大量的关于如何构建插件的文档。"Plugin Development Guide"说明了如何为插件创建js接口,还有为每个移动平台创建native插件组件各自的指南。
Cordova插件是一组扩展或提升Cordova应用功能的文件。开发者向项目中添加插件,通过提供的js接口和插件交互。插件中包括一个叫plugin.xml的配置文件,一个或多个js文件,加上一些native代码文件(可选),库文件,和相关的内容(HTML, CSS和其他内容文件)。
plugin.xml文件描述了插件并且告诉CLI复制哪些部分的文件,这些文件在每个平台上都不一样。plugin.xml中还有配置,由CLI用来设置平台方面的config.xml配置。plugin.xml文件中有许多可用选项。
一个插件中至少有一个js源文件,用来定义插件公开的方法、对象和属性。可以把所有的都封装到一个文件或多个。也可以把其他js类库打包(如jQuery)。
除了上述两种文件,剩下的文件主要用来定义插件。一般来说,插件要有每个支持平台的一个或多个native源码文件。它们上面还包括其他native文件(源码或预编译的)或内容(图像文件,样式表,HTML文件)。
构建插件的一个好参考是有大量的可用的示例。项目中下载的插件是zip包,可以解压并分析如何构建。一个方法是修改现有插件来满足需求。
创建一个简单的插件
Cordova插件不一定要有native代码,可以完全由js代码组成。在写native插件之前开始写个简单的插件用来说明插件结构和格式。
给下面这个例子中的插件起名叫"Meaning of Life"。创建插件前首先创建一个叫"mol"的文件夹(Meaning of Life"的缩写),在其中创建一个描述插件的plugin.xml文件,代码如下,它是由其他插件的plugin.xml复制过来修改的。
&?xml version="1.0" encoding="UTF-8"?&
&plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="com.learningplugin.meaningoflife" version="1.0.0"&
&name&mol&/name&
&description&Calculates the meaning of the life&/description&
&author&Zhang San&/author&
&keywords&mol, meaning of life&/keywords&
&license&Apache 2.0 License&/license&
&engine name="cordova" version="5.0.0" /&
&/engines&
&js-module src="mol.js" name="mol"&
&clobbers target="mol" /&
&/js-module&
&info&This plugin exists to demonstrate how to build a simple, Javascript-Only plugin for Apache Cordova.&/info&
plugin.xml中一些内容作为文档说明作者和目的。 其他的用于驱动plugman或Cordova CLI插件安装过程。下表列出不同的plugin.xml元素。
定义命名空间,ID和插件版本。应该用定义在*http://apache.org/cordova/ns/plugins/1.0*命名空间。plugin的ID在输入*cordova plugins*命令时在插件列表中显示。
定义插件的名字。
description
定义插件的描述信息。
定义插件作者的名字。
定义与插件相关的关键字。Cordova研发组建立了公开、可搜索的插件仓库,添加的关键字能在你把插件提交到仓库后帮助被发现。
定义插件的许可。例中是Cordova默认的许可,还可以是许可描述或许可期限的链接。
用来定义插件支持的Cordova版本。再添加*engine*元素定义每个支持的Cordova版本。
指js文件名,而这个文件会自动以`&script`&标签的形式添加到Cordova项目的起始页。通过在*js-module*中列出插件,可以减少开发者的工作。*clobbers*元素说明了*module.exports*自动添加到*window*对象,让插件方法能够在窗口级别使用。
它是另一个除了*description*外说插件信息的地方。
接下来在mol文件夹中定义一个叫mol.js的文件。代码如下,它简单的创建了一个mol对象,然后定义了一个calculateMOL方法计算"生活的意义"。最后一行输出了mol对象,它等于对象和相关函数以便使用插件的应用调用。
var mol = {
calculateMOL: function() {
return 42;
module.exports =
这样就完成了创建一个简单插件的工作。为了证明它能起作用,创建一个简单的MoL Demo应用。首先在命令行工具中进入开发文件夹,输入以下CLI命令:
cordova creat simplePlugin com.learningplugin.simplePlugin SimplePlugin
cd simplePlugin
cordova platform add android
cordova plugin add your_plugin_location
创建一个名叫simpleplugin.html的页面,其中有一个按钮,点击后执行doMOL函数,调用了mol.calculateMOL()并用alert对话框显示结果。代码如下:
&!DOCTYPE html&
&html lang="en"&
&meta http-equiv="Content-Type" content="text/charset=utf-8"&
&meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-"&
&script src="cordova.js"&&/script&
&script type="text/javascript" charset="utf-8"&
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
function doMol() {
var res = mol.calculateMOL();
alert("Meaning of Life =' + res);
&title&Meaning of Life Demo&/title&
&body onload="onBodyLoad()"&
&h1&MoL Demo&/h1&
This is a Cordova application that uses my custom Meaning of Life plugin.
&button onclick="doMOL();"&
Calculate Meaning of Life
运行结果如下图:
创建一个Native插件
下面的例子用来说明如何创建一个Native插件,它向Cordova容器公开了一些native电话API.参考了Android SDK文档找到一些简单有趣的可供公开的接口。接下来几个部分是如何组织plugin代码;知道插件如何工作后向插件添加其他API或较复杂的API会很容易。
首先创建一个叫"carrier"的插件的文件夹,其中有js接口定义和plugin.xml。还创建了一个叫src的子文件夹并向其中创建了一个名叫"android"的文件夹用来存放native代码。这么做不是必要的但显得有条理。
在写native代码前要定义向Cordova应用公开的js接口。创建方法跟上个例子一样,这个例子中创建一个叫carrier的对象,在其中定义了一个或多个能被Cordova应用调用的方法,本例中将公开getCarrierName和getCountryCode方法。
不像上个MoL插件,这些方法不做计算,也不直接返回任何值;相反,它们调用cordova.exec方法,由它向native代码要控制权。这就是著名的Javscript-to-native桥接,可以让Cordova应用执行native API。native代码执行完后,调用回调函数并把结果返回给js对象。
cordova.exec方法声明如下:
cordova.exec(successCallback, errorCallback, 'Pluginobject', 'pluginMethod', [arguments]);
successCallback和errorCallback参数是插件方法调用成功或失败时执行的函数名。'Pluginobject'参数是一个字符串用于识别包括被调用方法的native对象,'pluginMethod'参数是一个字符串,用来识别要执行的方法,最后的'arguments'是一个可选的参数数组,用来传递给pluginMethod。
例子中的getCarrierName和getCountryCode方法不需要任何参数,arguments参数为空并表示为"[]"。
下面是carrier.js的代码,插件的js接口。它开始用声明了一个cordova对象,指向加载的公开exec方法的cordova js库。接下来创建carrier对象,定义两个方法。每个方法都调用了cordova.exec并传入了cordova对象必要的函数名、对象和方法名,用来定位正确的完成功能的native对象和方法。文件最后是module.exports赋值,让carrier对象向Cordova应用公开。代码如下:
var cordova = require('cordova');
var carrier = {
getCarrierName : function(successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, 'CarrierPlugin', 'getCarrierName', []);
getCountryCode : function(successCallback, errorCallback) {
cordova.exec(successCallback, errorCallback, 'CarrierPlugin', 'getCountryCode', []);
module.exports =
接下来就可以写插件的native部分的代码了。先写js还是native部分不重要,一般来说比较复杂的插件先写native会更容易。
创建Android插件
可以通过创建一个Cordova项目创建插件,然后向应用中写Java类和js接口文件。应用中插件可以工作后再把它们抽取出来放在单独的文件夹用来发布。照这么做的话,可以为插件创建一个文件夹,然后创建一个新的Cordova项目,并使用CLI把插件添加进去。这样就可以独立开发插件并同时测试plugin.xml了。
这个插件将向Cordova应用返回的信息来自于电话API。使用这个API前应用必须引入Context和TelephoneManager类:
import android.content.
import android.telephony.TelephonyM
然后在应用里定义一个对象实例来公开一些方法, 我们用这些方法调用carrier名和国家代码:
tm = (TelephonyManager)getSystemService(Context.TELEPHONY_SERVICE);
要确定carrier名,插件会调用tm.getSimOperatorName()方法,要获得国家代码会调用tm.getSimCountryIso()。
下面的表列出了用于Android插件的Java代码;它定义了一个叫CarrierPlugin的简单的类,这个类公开了exec方法,它是向js的cordova.exec调用执行的内容。
这个类定义了两个常量ACTION_GET_CARRIER和ACTION_GET_COUNTRY_CODE,用来确定Cordova应用调用哪个方法。这样做在以后更改方法名时更容易。
接下来类定义了一个tm对象,它首先调用了super.initialize,这个方法让cordova对象适当的初始化。没有这个方法Java代码就不知道Cordova容器。接下来代码获得了一个当前应用上下文的句柄,用它把tm对象传递给由Telephony API公开的服务。
接下来Java代码重载了exec方法并实现了直接处理来自Cordova应用的调用的代码。在这里实现了一个单独的操作,它确定了调用了哪个动作(能过比较由调用cordova.exec传递的动作名和开始定义的常触发相应的动作)。
如果exec方法确定请求的是getCarrierName动作,之后它调用了Android的getSimOperatorName方法,并通过调用callbackContext.success()方法把结果传回Cordova应用。如果请求的是getCountryCode动作,之后调用Android的getSimCountryIso()方法并通过callbackContext.success()方法把结果传回Cordova应用。
如果过程中某处失败了,代码执行callbackContext.error并把适当的错误消息或错误对象传回用来指出出了什么错。
package com.learningplugin.
import org.apache.cordova.CordovaI
import org.apache.cordova.CallbackC
import org.apache.cordova.CordovaP
import org.apache.cordova.CordovaWebV
import android.content.C
import android.telephony.TelephonyM
import org.json.JSONA
import org.json.JSONE
public class CarrierPlugin extends CordovaPlugin {
public static final String ACTION_GET_CARRIER_NAME = "getCarrierName";
public static final String ACTION_GET_COUNTRY_CODE = "getCountryCode";
public TelephonyM
public void initialize(CordovaInterface cordova, CordovaWebView webView) {
super.initialize(cordova, webView);
Context context = this.cordova.getActivity().getApplicationContext();
tm = (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE);
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (ACTION_GET_CARRIER_NAME.equals(action)) {
callbackContext.success(tm.getSimOperatorName());
if (ACTION_GET_COUNTRY_CODE.equals(action)) {
callbackContext.success(tm.getSimCountryIso());
callbackContext.error("Invalid Action");
} catch (Exception e) {
System.err.println("Exception: " + e.getMessage());
callbackContext.error(e.getMessage());
以上是所有需要的编码。在使用CLI添加新插件之前还需要创建一个plugin.xml文件,它和前边MoL示例相似,但其中因为多了native组件,还需要些额外的设置。内容如下:
&?xml version="1.0" encoding="utf-8"?&
&plugin xmlns="http://apache.org/cordova/ns/plugins/1.0" id="com.learningplugin.carrier" version="1.0.0"&
&name&Carrier&/name&
&author&Zhang San&/author&
&description&Expose mobile carrier related values to Cordova application.&/description&
&keywords&carrier&/keywords&
&license&Apache 2.0 License&/license&
&engine name="cordova" version="5.0.0" /&
&/engines&
&js-module src="carrier.js" name="carrier"&
&clobbers target="carrier" /&
&/js-module&
&platform name="android"&
&source-file src="src/android/CarrierPlugin.java" target-dir="src/com/cordovalearingplugin/carrier" /&
&config-file target="res/xml/config.xml" parent="/*"&
&feature name="CarrierPlugin"&
&param name="android-package" value="com.cordovalearingplugin.carrier.CarrierPlugin"/&
&/feature&
&/config-file&
&config-file target="AndroidManifest.xml"&
&uses-permission android:name="android.permission.READ_PHONE_STATE" /&
&/config-file&
&/platform&
文件中js-module元素定义了js的名字,它将在应用开始时自动加载。它定义了向Cordova公开的js接口。clobbers元素指明了js对象赋值给加载的js对象。本例中,Carrier插件通过一个carrier对象向Cordova应用公开。
&js-module src="carrier.js" name="carrier"&
&clobbers target="carrier" /&
&/js-module&
Cordova应用通过carrier对象访问getCarrierName方法:
carrier.getCarrierName(onSuccess, onFailure);
和前边例子的plugin.xml不同地方是platform节:
&platform name="android"&
&source-file src="src/android/CarrierPlugin.java" target-dir="src/com/cordovalearingplugin/carrier" /&
&config-file target="res/xml/config.xml" parent="/*"&
&feature name="CarrierPlugin"&
&param name="android-package" value="com.cordovalearingplugin.carrier.CarrierPlugin"/&
&/feature&
&/config-file&
&config-file target="AndroidManifest.xml"&
&uses-permission android:name="android.permission.READ_PHONE_STATE" /&
&/config-file&
&/platform&
它定义了某个移动平台专用的设置,包括了相关native代码的设置。可以有一个或多个平台。里边的source-file元素指出了一个或多个Android native源代码文件,当插件安装时由CLI安装。下面的例子指示plugman或CLI复制CarrierPlugin.java文件到Cordova项目Android平台文件夹的*src/com/cordovalerningplugin/carrier文件夹中。
&source-file src="src/android/CarrierPlugin.java" target-dir="src/com/cordovalearingplugin/carrier" /&
config-file元素定义了在插件安装过程中的改动。在例子中,一个叫CarrierPlugin的特性添加到Android项目的config.xml文件中,指向Java类com.cordovalearningplugin.carrier.CarrierPlugin:
&config-file target="res/xml/config.xml" parent="/*"&
&feature name="CarrierPlugin"&
&param name="android-package" value="com.cordovalearingplugin.carrier.CarrierPlugin"/&
&/feature&
&/config-file&
platform最后一个元素定义了另一个配置文件设置。在Android上访问Telephony API需要特别授权。任何要用API的应用都必须向应用的AndroidManifest.xml文件添加入口。这里就要向清单添加android.permission.READ_PHONE_STATE许可:
&config-file target="AndroidManifest.xml"&
&uses-permission android:name="android.permission.READ_PHONE_STATE" /&
&/config-file&
为了测试插件创建一个简单的应用。打开命令行,输入以下命令:
cordova create nativePlugin com.cordovalearningplugin.nativePlugin NativePlugin
cd nativePlugin
cordova platform add android
cordova plugin add your_carrier_plugin_location
在应用的index.html中显示两个按钮,一个调用getCarrierName另一个调用getCountryCode。执行相同的execute函数来显示两个方法的结果,代码如下:
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Carrier Demo&/title&
&meta http-equiv="Content-Type" content="text/charset=utf-8"&
&meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"&
&script type="text/javascript" charset="utf-8" src="cordova.js"&&/script&
&script type="text/javascript" charset="utf-8"&
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
function doSomething1() {
carrier.getCarrierName(onSuccess, onFailure);
function doSomething2() {
carrier.getCountryCode(onSuccess, onFailure);
function onSuccess(result) {
var resStr = "Result: " +
function onFailure(err) {
console.log("onFailure: " + JSON.stringify(err));
alert("Failure: " + err);
&body onload="onBodyLoad()"&
&h1&Carrier Demo&/h1&
This is a Cordova application that uses my fancy new Carrier Plugin.
&button onclick="doSomething1();"&GetCarrierName&/button&
&button onclick="doSomething2()"&GetCountryCode&/button&
程序运行后如下图1,点各按钮的弹出信息见图2和3。
部署插件的时候有几种方法。可以把插件文件夹打包成zip格式(插件文件夹包括plugin.xml文件和所有的源代码文件)。用户拿到之后先解压到一个文件夹,再使用cordova plugin add安装。
还可以通过gitHub发布,你可以创建GitHub帐号并把插件放在里边。文件升级时可以让其他开发者知道这一消息。PhoneGap开发团队创建了一个仓库(),在这你可以发布你的插件的信息。团队致力于开发一个插件发现系统,以便让开发者更方便的定位在应用中用到的插件。
你可能感兴趣的文章
4 收藏,1.1k 浏览
13 收藏,1.2k 浏览
1 收藏,1.1k 浏览
本文隶属于专栏
记录平时学习的一些心得
分享到微博?
与我们一起探索更多的未知
专业的开发者技术社区,为用户提供多样化的线上知识交流,丰富的线下活动及给力的工作机会
加入只需一步
举报理由:
推广(招聘、广告、SEO 等)方面的内容
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复(请编辑该提问指向已有相同问题)
不友善内容
答非所问,不符合答题要求
其他原因(请补充说明)
补充说明:
扫扫下载 App
SegmentFault
一起探索更多未知Cordova 3.x 源码分析(3) -- cordova.js模块系统require/define - Fish Where The Fish Are - ITeye技术网站
博客分类:
类似于Java的package/import,在JavaScript中也有类似的define/require,它用来异步加载module化的js,从而提高运行效率。
define 定义注册一个module
require 加载使用一个module
模块化加载的必要性,起源于nodejs的出现。但是JavaScript并没有内置模块系统,所以就出现了很多规范。
主要有2种:和。还有国内兴起的
CommonJS主要面对的是服务器,代表是;AMD针对浏览器进行了优化,主要实现;CMD是。
cordova-js最开始采用的是require.js作者写的(兼容AMD和CommonJS),但之后由于特殊需求(比如模块不存在的时候要throw异常),最终从almond.js fork过来实现了一个简易CommonJS风格的模块系统,同时提供了和nodejs之间很好的交互。在cordova.js中可以直接使用define()和require(),在其他文件可以通过cordova.define()和cordova.require()来调用。所以src/scripts/require.js中定义的就是一个精简的JavaScript模块系统。
源码如下:
// file: src/scripts/require.js
// 定义2个cordova.js内部使用的全局函数require/define
var require,
// 通过自调用的匿名函数来实例化全局函数require/define
(function () {
// 全部模块
var modules = {},
// 正在build中的模块ID的栈
requireStack = [],
// 标示正在build中模块ID的Map
inProgressModules = {},
SEPARATOR = ".";
// 模块build
function build(module) {
// 备份工厂方法
var factory = module.factory,
// 对require对象进行特殊处理
localRequire = function (id) {
var resultantId =
if (id.charAt(0) === ".") {
resultantId = module.id.slice(0, module.id.lastIndexOf(SEPARATOR)) + SEPARATOR + id.slice(2);
return require(resultantId);
// 给模块定义一个空的exports对象,防止工厂类方法中的空引用
module.exports = {};
// 删除工厂方法
delete module.
// 调用备份的工厂方法(参数必须是require,exports,module)
factory(localRequire, module.exports, module);
// 返回工厂方法中实现的module.exports对象
return module.
// 加载模块
require = function (id) {
// 如果模块不存在抛出异常
if (!modules[id]) {
throw "module " + id + " not found";
// 如果模块正在build中抛出异常
} else if (id in inProgressModules) {
var cycle = requireStack.slice(inProgressModules[id]).join('-&') + '-&' +
throw "Cycle in require graph: " +
// 如果模块存在工厂方法说明还未进行build(require嵌套)
if (modules[id].factory) {
// 标示该模块正在build
inProgressModules[id] = requireStack.
// 将该模块压入请求栈
requireStack.push(id);
// 模块build,成功后返回module.exports
return build(modules[id]);
} finally {
// build完成后删除当前请求
delete inProgressModules[id];
requireStack.pop();
// build完的模块直接返回module.exports
return modules[id].
// 定义模块
define = function (id, factory) {
// 如果已经存在抛出异常
if (modules[id]) {
throw "module " + id + " already defined";
// 模块以ID为索引包含ID和工厂方法
modules[id] = {
factory: factory
// 移除模块
define.remove = function (id) {
delete modules[id];
// 返回所有模块
define.moduleMap =
// 如果处于nodejs环境的话,把require/define暴露给外部
if (typeof module === "object" && typeof require === "function") {
module.exports.require =
module.exports.define =
其中 factory(localRequire, module.exports, module);&
第一个参数“localRequire”实质还是调用全局的require()函数,只是把ID稍微加工了一下支持相对路径。cordova.js没有用到相对路径的require,但在一些Plugin的js中有,比如Contact.js 中 ContactError = require('./ContactError');
不知道什么原因要把module.exports单做为工厂方法的第两个参数,cordova.js中除了个别地方用到第二个参数(base64.js、uilder.js、modulemapper.js、pluginloader.js、utils.js),大部分都是在用第三个参数在工厂方法里调用module.exports。Plugin的js代码中也基本是module.exports。
rensanning
浏览: 979614 次
来自: 大连
浏览量:22093
浏览量:295162
浏览量:189158
浏览量:14391
我擦,博主,gps定位根本不能用啊,
我怎么在新创建的项目里找不到下面几个类呢?CordovaWeb ...
android.view.InflateException:Cordova webapp实战开发:(5)如何写一个Andorid下自动更新的插件? - 推酷
Cordova webapp实战开发:(5)如何写一个Andorid下自动更新的插件?
》中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个Andorid下的cordova插件。
本次练习你能学到的
学习如何实现自动更新功能
学习插件类的编写
学习插件的配置
学习插件的调用
打开APP后检查版本更新,如果有更新则弹出更新对话框
APP中【检查更新】显示当前版本号,并可以点击进行版本检查更新
如何实现自动更新功能
你可以自己写代码,也可以网上找代码抄一下,我之前的&
& 就是从网上下的一个代码片段放进我的项目中的。不过今天和大家说的不是如何编写自动更新代码,因为我们今天要做的是如何更快的用别人写好的东西来加速自己产品开发的进度和质量。
自动更新这个东西也不涉及到什么技术难度,一般第三方要是提供了也不会出什么质量问题,能够拿来就用岂不是很好呢?网上找了一下,发现&
很好,那就直接用这个吧,Andorid和iOS都可以用。
如何集成到我们的产品中,看他们自己写的文档:
& ,我就不多说了,如果遇到问题,可以在咱们群里问问大家。
插件类的编写
原生Andorid中如果调用,就看上面说的他们自己写的文档。如果我们现在要在APP中【设置】中增加自动检查和显示当前版本,则需要我们开始学习如何编写cordova插件了。
这里我们会编写一个插件,两个方法,一个方法用来检测更新,另一个方法用来获得当前APP的版本号。
闲话不说了,直接来代码。
public class GCAppPlugin extends CordovaPlugin {
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (&version&.equals(action)) {
version(callbackContext);
return true;
else if (&checkUpdate&.equals(action)) {
final Context mContext = this.cordova.getActivity();
UmengUpdateAgent.setUpdateAutoPopup(false);
UmengUpdateAgent.setUpdateListener(new UmengUpdateListener() {
public void onUpdateReturned(int updateStatus, UpdateResponse updateInfo) {
switch (updateStatus) {
case UpdateStatus.Yes: // has update
UmengUpdateAgent.showUpdateDialog(mContext, updateInfo);
case UpdateStatus.No: // has no update
Toast.makeText(mContext, &现在使用的已是最新版本了&, Toast.LENGTH_SHORT).show();
case UpdateStatus.NoneWifi: // none wifi
Toast.makeText(mContext, &没有wifi连接, 只在wifi下更新&, Toast.LENGTH_SHORT).show();
case UpdateStatus.Timeout: // time out
Toast.makeText(mContext, &超时&, Toast.LENGTH_SHORT).show();
UmengUpdateAgent.forceUpdate(mContext);
return true;
private synchronized void version(CallbackContext callbackContext) {
PackageInfo packI
packInfo = this.cordova.getActivity().getPackageManager().getPackageInfo(this.cordova.getActivity().getPackageName(),0);
String version = packInfo.versionName +&(&+packInfo.versionCode+&)&;
callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version));
} catch (NameNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
Javascript如何得到插件调用后的返回结果?主要通过类似&callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, version)); 代码返回PluginResult,失败和成功都可以触发Javascript执行对应的自定义函数
插件的配置
插件写完了,很多人遇到的下一个问题就是怎么配置才能在Javascript中调用呢?我们今天也不解析源码,为什么呢?因为我没看:)不过,我一定要给大家说清楚如何配置,否则就永远调用不了插件。
打开res/xml/config.xml文件,添加feature,必须匹配类名,因为源码中是通过这些去配对的。上面我们写了更新插件,现在就是要配置一下这个插件类到功能名称,我在配置文件中加入了下文粗体部分内容
&?xml version='1.0' encoding='utf-8'?&
&widget id=&com.glodon.gcapp& version=&2.0.0& xmlns=&http://www.w3.org/ns/widgets& xmlns:cdv=&http://cordova.apache.org/ns/1.0&&
&name&掌中广材&/name&
&description& 随时随地查找全国最完整最及时的信息价
&/description&
&author email=&& href=&http://www.中国信息价.cn&&
周金根 &/author&
&content src=&html/scj/scj.html& /&
&access origin=&*& /&
&access origin=&tel:*& launch-external=&yes&/&
&access origin=&geo:*& launch-external=&yes&/&
&access origin=&mailto:*& launch-external=&yes&/&
&access origin=&sms:*& launch-external=&yes&/&
&access origin=&market:*& launch-external=&yes&/&
&preference name=&SplashScreen& value=&screen& /&
&preference name=&SplashScreenDelay& value=&30000& /&
&preference name=&SplashMaintainAspectRatio& value=&false& /&
&preference name=&LoadingDialog& value=&正在加载中...& /&
&feature name=&Device&&
&param name=&android-package& value=&org.apache.cordova.device.Device& /&
&/feature&
&feature name=&NetworkStatus&&
&param name=&android-package& value=&org.apache.cordova.networkinformation.NetworkManager& /&
&/feature&
&feature name=&SplashScreen&&
&param name=&android-package& value=&org.apache.cordova.splashscreen.SplashScreen& /&
&/feature&
&feature name=&Camera&&
&param name=&android-package& value=&org.apache.cordova.camera.CameraLauncher& /&
&/feature&
&feature name=&BarcodeScanner&&
&param name=&android-package& value=&com.phonegap.plugins.barcodescanner.BarcodeScanner& /&
&/feature&
&feature name=&Gcapp&&
&param name=&android-package& value=&com.gldjc.guangcaiclient.GCAppPlugin& /&
&/feature&
代码贴完了,我还是要再多说一下,
com.gldjc.guangcaiclient.GCAppPlugin
是插件类的全面
Gcapp是 feature 名称,下面大家就知道在哪里会用到了
以上文件就是告诉cordova,我们新增了一个Gcapp功能,这个功能会调用我们的原生插件Java对象,接下来就是Javascript如何能调用到这个类了,最重要的就是这个Gcapp功能名称。
我们接着就要写Javascript代码来调用这个功能了,如何写呢?继续往下看,我在assets/www/plugins/下新增目录并建立了文件gcapp.js,完整路径是&assets/www/plugins/com.gldjc.guangcaiclient/www/gcapp.js,代码如下:
cordova.define('com.gldjc.guangcaiclient.gcapp', function(require, exports, module) {
var exec = require(&cordova/exec&);
function Gcapp() {};
Gcapp.prototype.version = function (getversion) {
exec(getversion, null, 'Gcapp', 'version', []);
Gcapp.prototype.checkUpdate = function () {
exec(null, null, 'Gcapp', 'checkUpdate', []);
var gcapp = new Gcapp();
module.exports =
exec是cordova.js中内部的函数,当插件返回&PluginResult.Status.OK 时会执行exec的成功回调函数,如果插件返回的是错误,则会执行exec的错误回调函数。这里我们解释一下
exec(null, null, 'Gcapp', 'checkUpdate', []);
其中Gcapp就是我们在上一步骤加的feature名称,大小写匹配着写,通过这个名称,cordova才能找到调用那个java插件类,然后通过checkUpdate知道调用这个插件类的哪个方法,后面[]中则是参数。因为我这个插件不需要参数,所以为空。
Javascript插件类也配对成功了,那如何调用呢?你可以直接在html中包括这个js,不过我们一般会再配置一个js,那就是assets/www/cordova_plugins.js,这样就不用对每个插件类都去写一遍了,cordova会遍历你的配置去加载它们。
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
&file&: &plugins/org.apache.cordova.device/www/device.js&,
&id&: &org.apache.cordova.device.device&,
&clobbers&: [
&file&: &plugins/org.apache.cordova.networkinformation/www/network.js&,
&id&: &org.apache.cordova.networkinformation.network&,
&clobbers&: [
&navigator.connection&,
&navigator.network.connection&
&file&: &plugins/org.apache.cordova.networkinformation/www/Connection.js&,
&id&: &org.apache.cordova.networkinformation.Connection&,
&clobbers&: [
&Connection&
&file&: &plugins/org.apache.cordova.splashscreen/www/splashscreen.js&,
&id&: &org.apache.cordova.splashscreen&,
&clobbers&: [
&navigator.splashscreen&
&file& : &plugins/org.apache.cordova.camera/www/CameraConstants.js&,
&id& : &org.apache.cordova.camera.Camera&,
&clobbers& : [ &Camera& ]
&file& : &plugins/org.apache.cordova.camera/www/CameraPopoverOptions.js&,
&id& : &org.apache.cordova.camera.CameraPopoverOptions&,
&clobbers& : [ &CameraPopoverOptions& ]
&file& : &plugins/org.apache.cordova.camera/www/Camera.js&,
&id& : &org.apache.cordova.camera.camera&,
&clobbers& : [ &navigator.camera& ]
&file& : &plugins/org.apache.cordova.camera/www/CameraPopoverHandle.js&,
&id& : &org.apache.cordova.camera.CameraPopoverHandle&,
&clobbers& : [ &CameraPopoverHandle& ]
&file& : &plugins/com.phonegap.plugins.barcodescanner/www/barcodescanner.js&,
&id& : &com.phonegap.plugins.barcodescanner.barcodescanner&,
&clobbers& : [ &barcodescanner& ]
&file&: &plugins/com.gldjc.guangcaiclient/www/gcapp.js&,
&id&: &com.gldjc.guangcaiclient.gcapp&,
&clobbers&: [
module.exports.metadata =
// TOP OF METADATA
&org.apache.cordova.device&: &0.2.13&
// BOTTOM OF METADATA
file表示我们去哪里找脚本插件定义js,id是之前我们在gcapp.js中开头cordova.define中写的标识,cordova通过这个标志去找到我们的Javascript插件定义,而clobbers则是我们在前端通过什么对象名来调用这个插件。这里我写的是gcapp,则后面调用则只需要写成gcapp.checkUpdate 即可
插件的调用
万事俱备,只欠东风,你们可以开始看到结果了,如果从头到这里一步成功,那应该还是蛮兴奋的事情吧。
具体前端页面如何设计我就不说了,我的页面效果就如本文最前面的图片,在js中我是这些调用version的,至于checkUpdate就是一样了,在按钮的click事件中调用&gcapp.checkUpdate(); 即可
$(document).on(&PG_pageinit&, function(event) {
gcapp.version(function(version){
$(&#version&).html(version);
如果你对以上内容感兴趣,那就继续关注吧,依旧如此,喜欢这个系列的就点赞,点的越多,更新就会越快,超过20个赞或20个回复后,开始写下一篇,欢迎你写下你想要我写的内容
PhoneGap App开发
已发表评论数()
已收藏到推刊!
请填写推刊名
描述不能大于100个字符!
权限设置: 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示

我要回帖

更多关于 cordova plugin 的文章

 

随机推荐