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连接吧

Javascript

IOS

ANDROID

更多相关文章

随机推荐