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

好了,今天就到這裏了,下期再見。

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