ionic2 与 iOS 互相传值的最简单方式

本文代码是以iOS为示例的,安卓也同样适用,详情请参考链接:
*** https://github.com/bsorrentino/cordova-broadcaster ***

本篇文章主要探讨ionic 2 与native 互相传值的问题,之前有同事做过相关研究,用的是自己制作插件的方式,有兴趣的同学可以点这里,但是本人觉得也许有更简单的方式,下面直接上代码

(一)互相传值功能

ionic

• 安装插件

$ ionic plugin add --save cordova-plugin-broadcaster
$ npm install --save @ionic-native/broadcaster
 

• home.ts

 
    sendData(){
      // 这句代码是 用于传值给 原生的 
     this.broadcaster.fireNativeEvent('jsToNative', {"item":'我是来自ionic的值'}).then(() => console.log('success'));
       // 这句代码 添加了一个监听者, 用于接收原生 传来的值   
     this.broadcaster.addEventListener('eventName').subscribe((event) => console.log('(2) 这句话是在ionic 里面打印的:===='+event['key']));
// 把这两句代码写在一起,是为了 在 传值的 同时,创建了 监听者(其实创建监听者 的操作在 ionViewDidLoad-页面加载 时最合适,但目前实现不了,还有待研究 )

    }
 

• 原生 mainViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor yellowColor];
    // ionic 传给原生
    
    [[NSNotificationCenter defaultCenter] addObserverForName:@"jsToNative" object:nil queue: [NSOperationQueue mainQueue] usingBlock:^(NSNotification * _Nonnull note) {
        
        NSLog(@"(1)这句话是在原生里面打印的 [%@]", note.userInfo[@"item"]);
        
        UIViewController *vc = [[RedViewController alloc] init];

        [self presentViewController: [[UINavigationController alloc]
                                      initWithRootViewController:vc] animated:true completion:nil];
        
    }];

}

• 原生 redViewController

- (void)btnClick {
    //原生传给ionic
    NSLog(@"点击了原生的按钮");
    NSDictionary *userInfo = @{@"key": @"我是来自原生的值"};
    [[NSNotificationCenter defaultCenter] postNotificationName:@"eventName" object:nil userInfo: userInfo];

    [self dismissViewControllerAnimated:true completion:^{
        
    }];
}

• 打印日志

log.png

• over!
• 很简单有木有!
• 预览效果:

6.gif

(二) 从相册选择照片(或者拍照)并展示功能,上传视频功能

*** 注:想了解更多功能请看参考链接***

*** 此功能最好用真机测试哦!***

• 效果图

Snip20170512_16.png

• 一定要记得,先安装插件

$ ionic plugin add --save cordova-plugin-camera
$ npm install --save @ionic-native/camera

• 具体代码已上传到GitHub,请自行下载