ionic 作為一個跨平臺h5框架，收到越來越多的開發人員的歡迎，如何通過ionic去呼叫原生開發的SDK？可以通過 js 呼叫cordova 外掛的方式來實現。本文通過一個簡單的例子程式，來實現通過ionic 來呼叫 原生介面。該例子通過網頁開啟原生的的一個UIViewController。 

 1. 安裝plugman

    npm install -g plugman

 可以不安裝，只要按照要求的目錄機構建立檔案即可，plugman可以幫助我們快速的生成外掛的目錄結構。

2. 生成corodva 框架模板

    plugman create --name customPlug --plugin_id custom-plugin-demo --plugin_version 1.0

3. 新增模板支援

    plugman platform add --platform_name ios

    經過以上幾步，就再customPlug目錄生成了如下檔案

4. 修改plugin.xml 為

<?xml version='1.0' encoding='utf-8'?>
    <plugin id="custom-plugin-demo" 
        version="1" xmlns="http://apache.org/cordova/ns/plugins/1.0" 
        xmlns:android="http://schemas.android.com/apk/res/android">
        <name>customPlug</name>
        <js-module name="customPlug" src="www/customPlug.js">
            <clobbers
                target="customPlug" />
            </js-module>
        <platform name="ios">
            <config-file parent="/*" target="config.xml">
            <feature name="m'y">
            <param name="ios-package" value="customPlug" />
            </feature></config-file>
            <source-file src="src/ios/customPlug.m" />
        </platform>
    </plugin>
 

var argscheck = require('cordova/argscheck'),
exec = require('cordova/exec');

var customPlugin = {};

customPlugin.echo = function(successCallback, errorCallback, arg0 ,arg1 ,arg2) {
exec(successCallback, errorCallback, "myplug", "helloworld", [arg0,arg1,arg2]);
};

module.exports = customPlugin;
 

/********* customPlug.m Cordova Plugin Implementation *******/

#import <Cordova/CDV.h>

@interface customPlug : CDVPlugin {
  // Member variables go here.
}

- (void)helloworld:(CDVInvokedUrlCommand*)command;
@end

@implementation customPlug

- (void)helloworld:(CDVInvokedUrlCommand*)command
{
    CDVPluginResult* pluginResult = nil;
    NSString* echo = [command.arguments objectAtIndex:0];

    if (echo != nil && [echo length] > 0) {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];
    } else {
        pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];
    }

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

plugman createpackagejson <directory>

8 . 安裝plugin

   sudo cordova plugin add ../customPlug/

9.ionic 呼叫cordova外掛

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';


declare var customPlug: any;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }


toSetting() {


  customPlug.helloworld(function (msg) {
      }, function (msg) {

      }, 'true', 'ios', "dfsdfsdfsdf" );
   
  }

  
}

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  

  <p class="setting_name" (click)="toSetting()">測試</p>
</ion-content>

呼叫的另外viewcontroller 返回的方法是