H5如何与原生App(ios,安卓,RN)通信？

使用iframe方式，以唤起Native;以唤起分享组件为例

// h5 js code 将它封装一下

function createIframe(url){

var url = ‘jsbridge://getShare?title=分享标题&desc=分享描述&link=http%3A%2F%2Fwww.douyu.com&cbName=jsCallClientBack’;

var iframe = document.createElement(‘iframe’);

iframe.style.width = ‘1px’;

iframe.style.height = ‘1px’;

iframe.style.display = ‘none’;

iframe.src = https://segmentfault.com/a/url;

document.body.appendChild(iframe);

setTimeout(function() {

iframe.remove();

}, 100);

}

然后客户端通过拦截这个请求，并且解析出相应的方法和参数：这里以ios为例：

// IOS swift code

func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {

let url = request.URL

let scheme = url?.scheme

let method = url?.host

let query = url?.query

if url != nil && scheme == “jsbridge” {

switch method! {

case “getShare”:

self.getShare()

default:

print(“default”)

}

return false

} else {

return true

}

}

看不懂就略过，非重点。。。。。

这里我们在请求参数中加上了cbName=jsCallClientBack，这个jsCallClientBack为JS调用客户端所定义的回调函数，在业务层jsBridge封装中，我们传入一个匿名函数作为回调，底层将这个函数绑定在window的jsbridge对象下并为其定义一个独一无二的ke