ionic2中利用自定义cordova插件(Plugin)ts调iOS原生的值(iOS原生的值传给ts)

一、安装插件

1、安装plugman

$npm install -g plugman

如果出现下面的错误，在前面加"sudo"(sudo可以将权限提升到超级用户级别，即Windows中的管理员)，换成“sudo npm install -g plugman”,另外还能避免下面第3步出现问题。

（plugman的所有命令可用“$plugman --help”查看）

2、生成插件

plugman create --name <pluginname> --plugin_id <pluginid> --plugin_version 0.0.1。例如，

$plugman create --name MyPlugin --plugin_id com.plugin.myPlugin --plugin_version 0.0.1,

注意，此时生成的插件存放都在根目录，如图。如果存放在其他目录可以在最后面加" -path 文件名"，如plugman create --name MyPlugin --plugin_id com.plugin.myPlugin --plugin_version 0.0.1 -path MP。

这时候src文件里面是空


3、添加平台

以iOS为例，Android亦可。

$cd MyPlugin

$plugman platform add --platform_name ios

如果出现“can't find a plugin.xml.  Are you in the plugin?”，这是因为你的操作权限低，说明你在第1步没有用sudo，所以再执行第1步“sudo npm install -g plugman”。

此时再看，src文件夹里面增加了iOS文件。注意，如果只生成了iOS文件夹，没有.m文件，就手动删除iOS文件，再plugman platform remove --platform_name iOS，这样就彻底删除了，如果还不行，就要修改更新一下你的环境了，包含node.js、npm、ionic，再执行plugman platform add --platform_name ios就可以了。

4、安装插件

首先，找到MyPlugin的路径

$pwd MyPlugin

拿到路径

 $ionic plugin add (你拿到的插件路径)。

新环境可能会报“Error: Invalid Plugin! /Users/用户名/项目名/插件名 needs a valid package.json”错误，这需要手动添加package.json文件

$sudo plugman createpackagejson (插件路径)

然后文件中就会出现package.json文件了，然后再执行$ionic plugin add (你拿到的插件路径),就可以了。

查看plugins文件夹里面多了一个名为com.plugin.myPlugin的文件夹

二、插件调用

1、ts文件

在src/pages里面找到需要调用原生的.ts文件

先在@Component之前，import之后，添加“declare let cordova: any;“，否则，不能调用cordova。

先设置.html文件，使其可以展示结果

<p id="testde">    Take a look at the <code>src/pages/</code> directory to add or change tabs,    update any existing page or create new pages.  </p>  <button ion-button="" color="secondary" (click)="ttfunc()">Secondary</button>

.ts文件

ttfunc(){  cordova.plugins.MyPlugin.coolMethod("传来的参数",  function (msg) {    alert('成功');    console.log(msg);    document.getElementById("testde").innerHTML=msg;  },  function (msg) {    alert('失败');  });}

 ttfunc()这个方法就是ts这边的调用，cordova.plugins.MyPlugin.coolMethod这个方法中MyPlugin是插件名，coolMethod是方法名，去插件中查看MyPlugin.js就明白了。




在这个地方值得一提的是，ts中的这个方法用在js里面基本也是可以的。

2、iOS原生文件

找到文件打开

iOS原生的主要问题是，怎么把数据传给插件。我测试了一下，个人觉得属性传值和通知传值都不合适，单例传值还是比较靠谱的，其他传值方式大家可以自己试试。

单例自己封装或者用nsuserdefaults都可以，原理就是先把数据本地化，再赋值给插件。

#import <Foundation/Foundation.h>@interface DataSingle : NSObject//根据自己的需要自定义你需要的类型@property(nonatomic,copy)NSString *dataStr;@property(nonatomic,strong)NSArray *dataArr;@property(nonatomic,strong)NSDictionary *dataDic;    +(instancetype)shareDataSingle;        @end

如图，iOS的插件类只生成了.m文件

以下是MyPlugin.m文件内容

/********* MyPlugin.m Cordova Plugin Implementation *******/#import <Cordova/CDV.h>#import "DataSingle.h"@interface MyPlugin : CDVPlugin {  // Member variables go here.}- (void)coolMethod:(CDVInvokedUrlCommand*)command;@end@implementation MyPlugin  - (void)coolMethod:(CDVInvokedUrlCommand*)command{    NSLog(@"----coolmethod-----");    [self.commandDelegate runInBackground:^{        CDVPluginResult* pluginResult = nil;        DataSingle *ds=[DataSingle shareDataSingle];        NSLog(@"===========dataStr==%@==========",ds.dataStr);        NSString* echo =[command.arguments objectAtIndex:0];//echo：ts端传来的参数        NSLog(@"-----------echo===%@",echo);        NSUserDefaults *usr=[NSUserDefaults standardUserDefaults];        if (echo != nil && [echo length] > 0) {            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:ds.dataStr];//ds.dataStr：原生数据，传给ts            pluginResult=[CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:[usr objectForKey:@"text"]];        } else {            pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];        }        [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];    }];}@end

以上就是iOS原生传值给ts的整个流程。

注意，文件名尽可能避免有空格！！！

（欢迎指正！）

转发请标明出处！