native 与 js 通信及其 jsbridge 前端逻辑

 

native 与 js 通信

原生 native 与 js 的通信主要应用于现在的 hybirdApp 混合应用中,主要解决的一些 h5 不能实现但是可以调用原生的功能的通信。

主要包含了,native 调用 js 、js 调用 native 的通信方式。

 

IOS 与 js 通信

1、通过获取 jsContext( JavaScript 的全局上下文 ) 来实现通信

  ios 获取 jsContext ,执行某一个方法并且注入方法供js执行

// 获取到全局上下文
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];  
NNSting *alert = @"alert('something')"   
// 调用上下文的 alert 方法    
[context evaluateScript:alert]    
// 在上下文中注入了 call 方法,调用的时候触发 native 函数    
context[@"call"] = *() {   
  NSArray *args = [JSContext currentArguments]   
  NSLog(@"message");   
}   

  

2、ios 通过 stringByEvalautingJavascriptFromString 方法来调用 全局上下文上面方法

// 调用全局的 alert 方法
webview.stringByEvaluatingJavaScriptFromString("alert('something')")

  

3、通过拦截请求实现 js 效用 ios

jsbridge://methodName?param1=value1&param2=value2    // js 调用原生的一般传参格式。

  ios 拦截请求

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
   NSURL *URL = [request URL]; 
   if ([[URL scheme] isEqualToString:@"jsbridge"]) {
       // parse the rest of the URL object and execute functions
   } 
}

  

  

andriod 与 js 通信

1、andriod 向全局上下文注入方法,供 h5 调用 native

// 向全局注入一个 method 方法,h5 调用的时候执行 native 操作
webView.addJavascriptInterface(new JSInterface(), "method");

  

2、andriod 调用全局上下文的方法

webView.loadUrl("javascript:alert('hello.')");

  

上面总常见的 native 和 js 通信的方法

下面介绍 jsbridge 的相关模型

 

jsbridge h5简单模型

/*
* 假设 native 向全局住了一个 __call 方法
* native 每次执行完成后回调 __callback 方法
* */
const _handlers = {};
window.__callback = (...args) => {
    let [callBackMethod, ...params] = args
    // 进行解析
    if (typeof params === 'string') params = JSON.parse(params)
    // 更具回调方法执行对应的回调
    _handlers[callBackMethod](params)
    delete _handlers[callBackMethod]
}
let id = 0
window.call = (...args) => {
    id++
    let [method, params, callback] = args
    const callBackMethod = `${method}_${id}`
    // 将回调注册到_handlers供__callback使用
    _handlers[callBackMethod] = callback
    params.callback = callBackMethod
    // 调用相关的方法,传入参数
    window.__call(method, JSON.stringify(params))
}

  

简单模型,更能看明白原理。

 

 

 

  

  

 

posted @ 2020-11-11 14:11  小结巴巴吧  阅读(204)  评论(0编辑  收藏  举报