JSBridge,JavaScript和原生Native 交互,iOS和HTML5交互

大家好,我是OB。
故不积洼步,无以至千里。今天给大家分享一下native和js的交互。

用到了一个小工具:OBJSBridge
支持pod 集成 : pod 'OBJSBridge'
如果不想用pod,也可以直接把源码拖到项目中去。只需要OBJSBridge.h OBJSBridge.m 就可以了。代码地址
记得star哟。

最近项目中加载了很多HTML页面,所以nativejs 的交互显得格外重要。
最主要运用场景是:客户端登录,如何把用户的登录信息传递给js;另一面在商品详情页(html)中选购的商品id如何传递给native,在原生页面发起订单及付款;

1. OC 向 JS 传递参数,可以是字典,也可以是字符串。

效果图

代码如下

[[OBJSBridge shareBridge] registerPushFunction:@"pushUserId" webView:self.wkwebView params:@{@"userID": @"2345432"}];


注意:动态向js传入参数,需要把握时机,就是等到textfield.text有值了,再向js中注入方法。
当方法注入了js中,js就可以直接使用方法了。

      if (typeof(pushUserId) === 'function') {
        this.info = pushUserId(); 
      }

pushUserId() 这里就是oc注入的方法,js直接使用。该方法的返回值就是oc传过去的参数。

2. JS 向OC传递参数,可以是字典,也可以是字符串。

前提是oc向js中注入方法,该方法有回调,

[[OBJSBridge shareBridge] registerReceiveFunction:@"getJSProductUser"  webView:self.wkwebView   didReceiveScriptMessage:^(WKScriptMessage * _Nonnull message) {
        NSLog(@"getJSProductUser:%@",message.body);
    }];

b:方法注册完成后,js直接调用方法,并传递参数。

if (typeof(getJSProductUser) === 'function') {
        getJSProductUser({"userName":"lishuyang","usreID":"32345"});
}

getJSProductUserr({"userName":"lishuyang","usreID":"32345"})该方法也可在js直接调用,因为oc已经将方法注入到js中。
可在控制台看到js传过来的参数

daode

img

好了,今天就到这里了,下期再见。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章