cordova + ionic前端框架 js和android ios原生(native)交互

因为项目是大部分代码是js+html 写的，现在想在js中打开原生的页面（Android为activity；ios是ViewController），解决android 的时候发现了两种方法，其中一种是android和ios通用的，另一种只能在android上使用。

-、android/ios通用的

使用github上的插件：cordova-broadcaster

在之前先说一下cordova的工作原理，android大家都知道就是得有一个"main" Acitvity,cordova就是在mainActivity中加载一个webview然后webview加载html +js ;同理，在iOS中，在“main”ViewController中加载webview然后webview加载html +js 。

进入正题：

这个插件是通过广播在js和原生之间传递消息，可以原生发送广播js接收广播，也可以js发送广播原生接收广播，那么解决方案就出来，在js中调用原生的页面可以在js中发送广播，在原生的main Activity(ViewController)中监

听广播事件，js发送特定广播，原生收到广播在跳转界面（android mainActivity跳转其他Activity；ios mianViewController跳转其他controller）。这样就可以实现js跳转原生界面了。下面上代码：

Javascript

  window.broadcaster.fireNativeEvent( "open.native", { item:'test data' }, function() {
    	console.log( "native fired!" );
    } );

IOS

[[NSNotificationCenter defaultCenter] addObserverForName:@"open.native"
                                                  object:nil
                                                   queue:[NSOperationQueue mainQueue]
                                              usingBlock:^(NSNotification *note) {

                                                      NSLog(@"Handled 'js to native' [%@]", note.userInfo[@"item"]);
							AddressViewController *add = [storyboard instantiateViewControllerWithIdentifier:@"AddressViewController"];
                                                      [self presentViewController:add animated:true completion:nil ];
                                                    }];

ANDROID

final BroadcastReceiver receiver = new BroadcastReceiver() {
  @Override
  public void onReceive(Context context, Intent intent) {
          final JSONObject data = new JSONObject( intent.getBundle().getString("userdata"));

          Log.d("js to Native","js to Native:"+data.toString()));	
	startActivity(new Intent(MainActivity.this,TargetActivity.class));
}
};

LocalBroadcastManager.getInstance(this)
            .registerReceiver(receiver, new IntentFilter("open.native"));
}

当然，处理完原生界面，可能需要返回数据给js，也可以使用，只是这个是原生发送广播，js接收广播

Javascript

window.broadcaster.addEventListener( "return.js", function( e ) {
                //log: return js received! userInfo: {"data":"test"}
                console.log( "return js received! userInfo: " + JSON.stringify(e)  );
    });

IOS

[[NSNotificationCenter defaultCenter] postNotificationName:@"return.js"
                                                    object:nil
                                                  userInfo:@{ @"data":@"test"}];

Android

final Intent intent = new Intent("return.js");

Bundle b = new Bundle();
b.putString( "userdata", "{ data: 'test'}" );
intent.putExtras( b);

LocalBroadcastManager.getInstance(this).sendBroadcastSync(intent);

二、android js to native

使用github插件cordova-webintent

window.plugins.webintent.startActivity({
      action: window.plugins.webintent.ACTION_VIEW,
      url: theFile.toURL(),
      type: 'application/vnd.android.package-archive'
    },
    function() {},
    function() {
      alert('Failed to open URL via Android Intent.');
      console.log("Failed to open URL via Android Intent. URL: " + theFile.fullPath)
    }
);

具体不详细说了，点击github连接吧