cordova自定义插件_如何使用iOS创建自定义Cordova插件（Swift）

cordova自定义插件

什么是Cordova插件？ (What is a Cordova Plugin?)

A plugin is a bridge for building native apps for the app stores that lets us build our app in a web view, and call native code from JavaScript. It allows the javascript app to communicate with the native platform. Plugins provide access to device and platform functionality that is ordinarily unavailable to web-based apps. All the main Cordova API features are implemented as plugins, and many others are available that enable features such as bar code scanners, NFC communication, accessing HealthKit data on iOS, or using the Fingerprint scanner on Android, etc.

插件是为应用商店构建本机应用的桥梁，使我们可以在Web视图中构建应用，并从JavaScript调用本机代码。 它允许javascript应用程序与本机平台进行通信。 插件提供对通常基于Web的应用程序不可用的设备和平台功能的访问。 Cordova API的所有主要功能都实现为插件，还有许多其他功能可启用这些功能，例如条形码扫描器，NFC通信，在iOS上访问HealthKit数据或在Android上使用指纹扫描器等。

Let's get started….

让我们开始吧…。

创建插件的步骤 (Steps to create a plugin)

1. Download and install node.js from https://nodejs.org/en/

   从https://nodejs.org/en/下载并安装node.js

2. Install plugman globally on your machine using the command

   使用以下命令在您的计算机上全局安装Plugman

npm install -g plugman

3. Create the plugin

3.创建插件

plugman create --name DemoPlugin --plugin_id cordova-plugin-demoplugin --plugin_version 1.0

The above command creates a project for you that you can open in your choice of Editor. (I use Visual Studio Code which you can download from here).

上面的命令为您创建了一个项目，您可以在选择的编辑器中打开它。 (我使用Visual Studio Code，您可以从此处下载)。

You will notice that src, www (.js) and plugin.xml files are already created for you by plugman

您会注意到plugman已经为您创建了src，www(.js)和plugin.xml文件

4. Add the native platform of your choice in the plugin with this command. This will create a folder named ios under the src folder which will have a DemoPlugin.m with some demo code.

4.使用此命令在插件中添加您选择的本地平台。 这将在src文件夹下创建一个名为ios的文件夹，该文件夹将带有一个DemoPlugin.m及其演示代码。

plugman platform add --platform_name ios

Add platform-specific code to perform any particular native action. Here we will write a code snippet to add two numbers in Swift. So delete the DemoPlugin.m, create a new file and name it DemoPlugin.swift. Add the following code to add two numbers in your .swift file

添加特定于平台的代码以执行任何特定的本机操作。 在这里，我们将编写一个代码片段，在Swift中添加两个数字。 因此，删除DemoPlugin.m，创建一个新文件，并将其命名为DemoPlugin.swift 。 添加以下代码以在您的.swift文件中添加两个数字

@objc(DemoPlugin) class DemoPlugin : CDVPlugin{// MARK: Properties
var pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR)@objc(add:) func add(_ command: CDVInvokedUrlCommand) {
var pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR)let param1 = (command.arguments[0] as? NSObject)?.value(forKey: "param1") as? Int
let param2 = (command.arguments[0] as? NSObject)?.value(forKey: "param2") as? Intif let p1 = param1 , let p2 = param2 {
if p1 >= 0 && p1 >= 0{
 let total = String(p1 + p2)
pluginResult = CDVPluginResult(status: CDVCommandStatus_OK, messageAs: total)
}else {
pluginResult = CDVPluginResult(status: CDVCommandStatus_ERROR, messageAs: "Something wrong")
}
}self.commandDelegate!.send(pluginResult, callbackId: command.callbackId)
}
}

5. Register the methods that can be used from the plugin in the DemoPlugin.js file of the plugin.

5.在插件的DemoPlugin.js文件中注册该插件可以使用的方法。

module.exports.add = function (arg0, success, error) {exec(success, error, 'DemoPlugin', 'add', [arg0]);};

6. Now create a package.json file for the plugin using the following command and answer all the questions asked

6.现在，使用以下命令为插件创建一个package.json文件，并回答所有提出的问题

npm init

7. Change the clobbers target value in the plugin.xml file as this value can be used to refer to the plugin in your project.

7.在plugin.xml文件中更改clobbers目标值，因为该值可用于引用项目中的插件。

<clobbers target="DemoPlugin"/>

在您的Ionic项目中使用插件 (Using the plugin in your Ionic Project)

1. Create New Ionic project using the following command
   使用以下命令创建新的Ionic项目

ionic start IonicDemo blank

2. Add the platform in your ionic project

2.在您的离子项目中添加平台

ionic cordova platform add ios

3. Add the cordova plugin in your project

3.在您的项目中添加cordova插件

ionic cordova plugin add <git_repo_url or local_path> --save

4. If you would like to check whether your plugin is successfully added, you can run this command to get the plugin list

4.如果要检查是否成功添加了插件，可以运行此命令以获取插件列表。

ionic cordova plugin list

5. Create a provider/service as a wrapper in order to communicate with the plugin from you ionic project

5.创建一个提供程序/服务作为包装，以便与您的离子项目中的插件进行通信

ionic generate service PluginService

6. Now add the following code in your plugin-service.service.ts file to register the plugin and to use its methods in your project.

6.现在，在您的plugin-service.service.ts文件中添加以下代码，以注册插件并在您的项目中使用其方法。

import { Injectable } from '@angular/core';import { cordova, IonicNativePlugin } from '@ionic-native/core';@Injectable({
providedIn: 'root'
})export class PluginService extends IonicNativePlugin { //name in package.json file of plugin
 static pluginName = 'demoplugin';  // plugin id in the plugin.xml of plugin
 static plugin = 'cordova-plugin-demoplugin'; // clobbers target in the plugin.xml of plugin
 static pluginRef = 'DemoPlugin'; static repo = 'YOUR_GITHUB_URL'; static platforms = ['iOS']; add(num1, num2): Promise<any> {
 const x = cordova(this, 'add', {}, [{ param1: num1, param2: num2         }]);
 return x;
 }
}

You can now use this service to perform actions from your Ionic components and use the benefits of the plugin.

现在，您可以使用此服务从Ionic组件执行操作并使用插件的好处。

Fine complete code for demo Cordova Plugin here and demo Ionic project here

为演示科尔多瓦插件精细完整的代码在这里和演示项目离子这里

翻译自: https://medium.com/@kddeveloper110/how-to-create-a-custom-cordova-plugin-in-ios-swift-6520b3a30a2d

cordova自定义插件