Cordova 插件开发指南
fullstacker 发布于 2021-02-19

插件是一个注入代码包,允许应用程序呈现的Cordova webview与运行它的本机平台通信。插件提供了对设备和平台功能的访问,而这些功能对于基于web的应用程序通常是不可用的。所有主要的cordovaapi特性都是以插件的形式实现的,还有许多其他的特性,比如条形码扫描器、NFC通信或定制日历接口。你可以在Cordova插件搜索页面上搜索可用的插件。

插件包括单个JavaScript接口以及每个支持平台的相应本机代码库。本质上,这隐藏了公共JavaScript接口后面的各种本机代码实现。
本节将逐步介绍一个简单的echo插件,该插件将字符串从JavaScript传递到本机平台,然后再传递回来,您可以将其用作构建更复杂功能的模型。本节讨论基本插件结构和面向外部的JavaScript接口。对于每个相应的本机接口,请参阅本节末尾的列表。
除了这些说明,当准备编写插件时,最好查看现有的插件以获得指导。


构建一个插件

应用程序开发人员使用CLI的plugin add命令将插件添加到项目中。该命令将包含插件代码的git存储库的URL作为参数。此示例实现了Cordova的设备API:

cordova plugin add https://github.com/apache/cordova-plugin-device
如果插件发布到npm,那么命令还可以接收包名作为参数:

 cordova plugin add cordova-plugin-device
插件库必须具有顶级plugin.xml清单文件。有很多方法可以配置这个文件,详细信息可以在插件规范中找到。
此设备插件的简化版本提供了一个简单的示例,可作为模型使用:
 <?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
        id="cordova-plugin-device" version="0.2.3">
    <name>Device</name>
    <description>Cordova Device Plugin</description>
    <license>Apache 2.0</license>
    <keywords>cordova,device</keywords>
    <js-module src="www/device.js" name="device">
        <clobbers target="device" />
    </js-module>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="Device">
                <param name="ios-package" value="CDVDevice"/>
            </feature>
        </config-file>
        <header-file src="src/ios/CDVDevice.h" />
        <source-file src="src/ios/CDVDevice.m" />
    </platform>
</plugin>
顶级plugin标签的id属性通常遵循cordova plugin-{plugin name}模式,并匹配插件的npm包名称。
js module标记指定公共JavaScript接口的路径。
在本例中,platform标记为ios平台指定一组相应的本机代码。
config file标记封装了一个特性标记,该特性标记被注入到特定于平台的配置.xml文件以使平台了解附加的代码库。
头文件和源文件标记指定库的组件文件的路径。


JavaScript接口

JavaScript接口提供了面向前端的接口,使其成为插件中最重要的部分。你可以随意构造你插件的JavaScript,但是你需要调用cordova.exec公司要与本机平台通信,请使用以下语法:

 cordova.exec(function(winParam) {},
             function(error) {},
             "service",
             "action",
             ["firstArgument", "secondArgument", 42, false]);

以下是每个参数的工作原理:
function(winParam){}:一个成功的回调函数。假设exec调用成功完成,此函数将与传递给它的任何参数一起执行。
function(error){}:一个错误回调函数。如果操作未成功完成,则此函数将使用可选的错误参数执行。
“service”:在本机端调用的服务名称。这对应于本机类,下面列出的本机指南中提供了有关该类的详细信息。
“action”:在本机端调用的操作名称。这通常对应于本机类方法。请参阅下面列出的本机指南。
[/*arguments*/]:要传递到本机环境的参数数组。

Javascript样本

此示例显示了实现插件JavaScript接口的一种方法:

 window.echo = function(str, callback) {
    cordova.exec(callback, function(err) {
        callback('Nothing to echo.');
    }, "Echo", "echo", [str]);
};
在本例中,插件将自身作为echo函数附加到窗口对象,插件用户将按如下方式调用该函数:

 window.echo("echome", function(echoValue) {
    alert(echoValue == "echome"); // should alert true.
});
请看传递给cordova.exec公司功能。第一个调用Echo服务,一个类名。第二个请求echo操作,该类中的一个方法。第三个是包含echo字符串的参数数组,它是window.echo函数的第一个参数。
传递到exec的成功回调只是对的回调函数的引用window.echo. 如果本机平台触发错误回调,它只调用成功回调并传递一个默认字符串。

Native Interfaces

一旦为插件定义了JavaScript,就需要用至少一个本机实现来补充它。下面列出了每个平台的详细信息,每个平台都基于上面的简单Echo插件示例:

在开发过程中测试插件

在开发过程中手动测试插件的最简单方法是像往常一样创建一个Cordova应用程序,并使用--link选项添加插件:

cordova plugin add ../path/to/my/plugin/relative/to/project --link
使用Plugman验证插件

您可以使用plugman实用程序检查插件是否为每个平台正确安装。使用以下node命令安装plugman:

 npm install -g plugman
您需要一个有效的应用程序源目录,例如包含在默认CLI生成的项目中的顶级www目录,如 Create your first app 指南中所述。
然后运行如下命令以测试iOS依赖项是否正确加载:

plugman install --platform ios --project /path/to/my/project/www --plugin /path/to/my/plugin


有关plugman选项的详细信息,请参阅使用plugman管理插件。有关如何实际调试插件的信息,请参阅上面列出的每个平台的本机接口


发布插件

您可以将插件发布到任何基于npmjs的注册表中,但推荐使用npm注册表。其他开发人员可以使用plugman或Cordova CLI自动安装您的插件。
要将插件发布到npm,需要执行以下步骤:
安装plugman CLI:

$ npm install -g plugman
创建package.json插件的文件:

$ plugman createpackagejson /path/to/your/plugin
发布

$ npm adduser # that is if you don't have an account yet
$ npm publish /path/to/your/plugin
有关npm用法的更多详细信息,请参阅npm文档网站上的发布npm包。


全栈者
关注 私信
文章
31
关注
0
粉丝
0