计算机知识

当前位置:澳门新葡萄京 > 计算机知识 > JS bridge学习小结

JS bridge学习小结

来源:http://www.hhmtch.com 作者:澳门新葡萄京 时间:2020-02-08 05:13
  • html的渲染图

    图片 1image.png

  • 通讯图

图片 2image.png

什么是JS bridge , 首先是 web和native之间相互通讯 这个是web 与 native进行通讯 ,通过 jsbridge 做为沟通的桥梁 同样 native 和 web 进行通讯 也要通过 jsbridge做为沟通的桥梁所以JS bridge 就是 js native 的代码

  • JS bridge完整调用过程

图片 3image.png

  • JS构造iframe 请求
let iframe = document.createElement;iframe.src = "jsbridge://xxx?c=123";document.body.appendChild;
  • Native拦截请求 接收js的调用
- webView:(WKWebView *)webView decidePolicyForNavigationAction: (WKNavigationAction *)navigationAction decisionHandler:(WKNavigationActionPolicy))decisionHandler { // 拦截所有的webview内部的请求 NSURL *URL = navigationAction.request.URL; // 如果当前的这个请求url是jsbridge开头的 if ([[URL scheme] isEqualToString:@"jsbridge"]) { JSPluginSystem *jsplugin = [[JSPluginSystem alloc] init]; [jsplugin dealWithJSAPI:URL webview:webView]; } decisionHandler(WKNavigationActionPolicyAllow);} 

上面的代码 Native对webView进行监听 所有webView的请求都会经过这个方法jsbridge请求都会一个安全校验

  • Native调用js执行callbakck
// 执行callback // window.CALLBACK0; [self.webView evaluateJavaScript:[NSString stringWithFormat:@“window.%@;",callback] completionHandler:^(id _Nullable response, NSError * _Nullable error) { NSLog(@"value: %@ error: %@", response, error);}];

webView中 evaluateJavaScript方法参数是接收 一串js代码 实际上这是一个 callback

调用 window.CALLBACK0这个方法 传入 110这个参数这段代码webView执行完之后 给H5页面回调的逻辑

本文由澳门新葡萄京发布于计算机知识,转载请注明出处:JS bridge学习小结

关键词: 葡京赌场注册 小结 JS bridge

上一篇:AngularJS 表达式写在双大括号内

下一篇:没有了