自定义 Cordova插件详解

一、Cordova的基础点

在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识。

那Cordova插件的基础要点是什么呢?其实就是把原生代码调用方法映射为js的统一接口,供H5使用而已.

Cordova 自定义插件的官方文档

二、观察现有应用结构

打开任意一个基于Cordova技术的hybird app的开发目录,添加过平台(android、ios等)和安装过插件的话,你会发现结构大致是这样子的:

├── platforms
|    ├── android
|    ├── ios
|    └── ...
├── plugins
|    ├── org.apache.cordova.device
|    └── ...
├── config.xml
└── www

这里的 platforms 是我们应用支持的平台目录,plugins是我们安装的插件目录,config.xml 是应用的配置信息(应用名称、描述等),www 是我们的 web 工程目录。

也就是说,如果我们创建一个新的插件并安装,也会添加到plugins目录中,同时修改其它文件信息。那下一步就来开始进行验证。

三、使用plugman开发Cordova插件

一个独立插件的目录基本结构是这样的:

MyToast
├── src
|    ├── android
|    |    └── MyToast.java
|    ├── ios
|    └── ...
├── www
|    └── MyToast.js
└── plugin.xml

src存放的是各平台的原生代码,plugin.xml为插件描述及配置文件www是web工程目录(其实主要就是MyToast.js这个js中间件),我们可以手动创建这几个目录及文件,然而这并不是一个好的方式,因为效率不高,推荐的方式是使用plumam。
1、首先安装plumam命令行工具

npm install -g plugman

2、安装完之后,创建plugin

使用plumam创建插件的命令是:

plugman create --name pluginName --plugin_id pluginID --plugin_version version [--path path] [--variable NAME=VALUE]

参数说明:

pluginName:插件名称,如MyToast;
pluginID:插件id, 如:org.demo.mytoast;
version:版本号, 如:0.0.1;
path:插件存放的绝对或相对路径;
variable NAME=VALUE:扩展参数,如说明或作者,如woodstream

于是命令行中敲入以下代码:
plugman create --name MyToast --plugin_id org.demo.mytoast --plugin_version 0.0.1
这样将会在当前目录创建一个MyToast插件,进入插件目录,打开plugin.xml查看,注意以下内容及说明:

plugin
- id:插件唯一标识
- version:版本号
- js-module
    src:js中间件相对文件地址(www目录下的那个js)
    name:模块名称
    clobbers/merges
        target:H5通过它调用js中间件方法(ts调用方法的前缀)
- platform
    name:对应平台android | ios
    source-file
        src:类名
        tartget-dir:插件文件复制到到原生项目位置
        feature
             name:js中间件通过它调用原生方法(包名)
        uses-permission:相关原生权限

也就是说,我们可以写这样一个插件,不写一句原生代码,只是为了设置权限和拷贝文件。

等你消化完plugin.xml文件后,敲入命令进入插件目录:
cd MyToast
添加支持平台
plugman platform add --platform_name android
plugman platform add --platform_name ios
这样,就会分别创建src/android/MyToast.javasrc/ios/MyToast.m两个文件,这里只演示android的代码,所以打开MyToast.java观察:

public class MyToast extends CordovaPlugin {

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if (action.equals("coolMethod")) {
        String message = args.getString(0);
        this.coolMethod(message, callbackContext);
        return true;
    }
    return false;
  }

  private void coolMethod(String message, CallbackContext callbackContext) {
    if (message != null && message.length() > 0) {
        callbackContext.success(message);
    } else {
        callbackContext.error("Expected one non-empty string argument.");
    }
  }
}

其中execute是必须的方法,是和www目录中的MyToast.js关联打交道用的,至于MyToast.jsMyToast.java怎么关联,是由Cordova解释plugin.xml处理的,内部细节不需要知道,只需按方法格式编写即可。CallbackContext为回调上下文,coolMethod为可选的默认生成的示例方法,一般里面就写原生的代码,我们把它改成我们想要的:showToast,然后补充基本的一些原生代码,最后文件变成这样:

public class MyToast extends CordovaPlugin {

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if (action.equals("showToast")) {
        String message = args.getString(0);
        this.showToast(message, callbackContext);
        return true;
    }
    return false;
  }

  private void showToast(String message, CallbackContext callbackContext) {
    if (message != null && message.length() > 0) {
        Activity activity = this.cordova.getActivity();
        Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();
        callbackContext.success(message);
    } else {
        callbackContext.error("Expected one non-empty string argument.");
    }
  }
}

然后再打开www/MyToast.js修改如下:

  //showToast为安装后js调用的方法名,参数可以为任意多个
  exports.showToast = function(msg, success, error) {
      //"showToast"为给MyToast.java判断的action名
      exec(success, error, "MyToast", "showToast", [msg]);
  };

3、创建package.json文件
本来执行完上述步骤,一个插件就完成了的,但后来的Cordova版本要求添加一个package.json来管理插件,而plumam没有给我们创建这样一个文件,于是我们手动创建,借助npm init命令创建package.json。里面的参数从plugin.xml拿过来便是:

{
 "name": "MyToast",
  "version": "0.0.1",
  "description": "demo",
  "cordova": {
    "id": "com.demo.mytoast",
    "platforms": [
      "android"
    ]
  },
  "keywords": [],
  "author": "demo",
  "license": "MIT"
}

这样一个插件就开发完成了。

四、安装已开发完成的插件

如果没有现成的项目,可以创建一个新的Cordova项目来测试:
cordova create hello com.example.hello HelloWorld
注:

hello:项目文件夹名
com.example.hello:项目包名
HelloWorld:项目名

然后进入到该Cordova项目目录,像平常添加插件一样,运行如下命令:(add 后面为插件所在本地或网络路径):
cordova plugin add /Users/cordova/MyToast
如果已有项目,且是ionic项目,则命令前追加上ionic:
ionic cordova plugin add /Users/cordova/MyToast

在ionic2或以上使用时,打开任意一个ts文件,在头部声明如下:
declare let cordova: any;
然后调用即可(如果是普通js调用,则可以省掉上面那步):
cordova.plugins.MyToast.showToast("hello"); //后两个success, error参数省略不写

五、其他命令

删除插件:
ionic cordova plugin remove XXXXX(你的plugin_id)
查看已安装插件
ionic cordova plugin list

原文地址:https://www.cnblogs.com/Free-Thinker/p/10768267.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


公司前端界面用的是vue,我要嵌入到Android中生成App第一步:安装nodenode安装:直接进入官网https:/odejs.org/zh-cn/,下载最新版本安装。安装之后在命令行中使用”node-v”检查安装是否成功。npm安装:由于新版的nodejs已经集成了npm,所以node安装时npm也一并安装好了。同样可以通过输
Q:我用cordova开发项目,想在app内跳转外部链接,安装了cordova-plugin-inappbrowser后确实可以跳转,但是跳转的页面有个按钮,原本点击会下载app,现在点击后毫无反应,求大神解惑。A:已经找到解决办法了,把cordova.InAppBrowser.open的打开网页方式改为“_system”即可,即用手机默认浏览器打
我正在使用https://github.com/arnesson/cordova-plugin-firebase/在基于离子的应用上接收GoogleFirebase消息.设置证书后,安装插件并设置Firebase帐户我能够通过Firebase控制台接收通知(在Android和ios设备上).但是,当我通过FirebaseAPI(https://firebase.google.com/docs/clo
一、Cordova的基础点在混合式应用中,我们通过现有的Cordova插件,可以轻松的在H5上调用手机native的功能。现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件、或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的
cordova自定义插件注意:存放自定义cordova插件目录不能有空格可能会报错cordova的安装下载node.js,安装完成后你可以在命令行中使用node和npm.安装cordova使用node.js的npm工具。打开控制台输入npminstall-gcordova-g是全局安装cordova。安装完成后就可以在命令行
一、问题VueAPP中有一个文件下载功能,用了各种方法来实现下载功能,app都没有反应。JS实现html页面点击下载文件这个博客里面几乎包含了我试过的大部分方法,发现PC端没问题,手机不可以。二、经过这些方法PC端没问题,安卓就不行,问了一个接触过安卓的后台小伙伴,说是
helloindex.html1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>我的App<itle>6<metaname="format-detection"content="telephone=no&q
1.plugman安装npminstall-gplugman如果提示permissiondenied需要加sudosudonpminstall-gplugman2.创建插件sudoplugmancreate--name插件名--plugin_id插件id--plugin_version0.0.13创建package.json文件cd上面床架的插件文件夹下,plugmancreate
最近学习了cordova插件,记录一下大概的过程,仅供参考。前期的配置就不记录了网上好多。在简书上从新写了一个更详细的cordova插件教程,有需要的可以点这里进去看看。第一步创建一个cordova项目输入命令:cordovacreate项目名包名例子:cordovacreatedemocom.zc.demo项目的大概目
我知道这个链接:https://cordova.apache.org/docs/en/latesteference/cordova-plugin-file/#where-to-store-files但我想将文件保存在Downloads目录中.这可以使用Ionic在任何路径中保存文件吗?如果是这样,请分享这个例子.这是代码:downloadImage(image){this.platform.ready(
我想在我的HTML5PhonegapJavaScript应用程序中添加状态栏通知.可能吗?解决方法:Ourteam已发布用于phonegapAndroid状态栏通知的插件.https://github.com/phonegap/phonegap-plugins/commits/master/Android/StatusBarNotification
使用cordova-plugin-geoloaction插件我正在检索用户在其移动设备上的位置.我的onSuccess()函数返回纬度和经度,现在我想在应用程序中显示相应的地址:<scripttype="text/javascript"charset="utf-8">//WaitfordeviceAPIlibrariestoload//document.addEventListe
我正在检查Android的PhoneGapAPI,并正在尝试相机示例应用程序示例并安装在我的Android手机(2.1GalaxyS)中.然而,在运行应用程序并拍照后,未检索到图像.根据我在代码中的理解,拍摄照片后,图像将显示在按钮下方60×60.我尝试在警报消息中打印出base64值,但我也没有得到任何响应(也
我刚刚在Eclipse中创建了一个包含所有phonegap和cordova文件的Android项目.但是,我没有这样的目录,因此没有config.xml.根据ApacheCordova文档,它应该位于:app/res/xml/config.xml.对于/res目录,我的文件夹结构如下:es/drawable-hdpies/drawable-ldpies/drawable-
我正试图在phonegap中设置一个新的开发环境.以下是我的路径变量设置在Windows中的外观:C:\Users\Mrinal\AppData\Roaming\npm;C:\android\development\sdk\platform-tools;C:\android\development\sdk\tools;C:\ProgramFiles\Java\jdk1.7.0_17\bin;C:\ant\bin现在在第三行
我正在将Worklight用于Android应用程序,当我尝试添加启动画面时publicclassMyAppextendsWLDroidGap{@OverridepublicvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);super.setIntegerProperty("splashscreen",
我正在创建一个可在所有3个移动平台(Android,iOSa和WindowsMobile8)上运行的HTML5移动应用程序.我正在使用javascript进行本地化(https://github.com/eligrey/l10n.js/#readme).该应用程序在浏览器上正常工作.但是当我在移动模拟器上部署它时,本地化不起作用.我认为问题是java
我有通过cordova成功构建的代码.但是,当我尝试模拟它时,我收到此错误“错误:cmd:命令失败,退出代码为1”.关于如何解决这个问题的任何想法?Hereismyoutputfromattemptingtoemulatethecode解决方法:我有同样的问题.看起来你没有任何AVD在运行.我不认为ionic的教程指定你需要这
我尝试添加各种标签并尝试添加相对路径:’//’这些是我尝试过的各种元标记<metahttp-equiv="Content-Security-Policy"content="default-src'self'"><metahttp-equiv="Content-Security-Policy"content="style-src'self''u
我正在Cordova/PhoneGap中编写一个应用程序,它试图使用Dropbox.js从Dropbox获取文件.Cordova版本为3.0.1,Dropbox.js版本为0.10.0.我的Javascript在桌面浏览器上工作得很好:varclient=newDropbox.Client({key:"<mykey>",secret:"<mysecret>"});client.authenticate