浅尝 JsBridge

之前从来没有接触过前端与 Native App 交互的开发。最近在做百度畅听项目,头一次接触到了 NA 的一些知识,在此先对 JsBridge 做以记录吧。

概念

前端与 NA 交互,NA 通过 Webview 组件可以轻而易举执行前端 Js 代码。那么前端 Js 代码要怎么执行 NA 的一些操作呢?答案是 JsBridge 技术。

原理

Webview 里的 iframe 请求会被 NA 拦截,NA 可以拿到所请求的 URL。  

譬如说我点击一个 HTML 的 Button,需要调起系统自带的分享组件。那么我们在 Webview 里新建一个 iframe 节点。iframe 请求会被 NA 拦截下来, NA 拿到请求的目标 URL,NA 再去解析这个 URL,看看前端需要做什么,以此间接完成信息的传递。


实习生不敢乱复制公司的代码,就 Copy 一段网上的吧。下面这段代码来自 简书的这篇文章

// 以 jsbridge 开头告知 NA
var url = 'jsbridge://doAction?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';

// 创建一个不可见 iframe
var iframe = document.createElement('iframe');  
iframe.style.display = 'none';  
iframe.src = url;  
document.body.appendChild(iframe);

// 请求发出后就可以移除 iframe 了
setTimeout(function() {  
    iframe.remove();
}, 100);