原 WebViewJavascriptBr

jojo

发布于 2018-05-03 15:09:47

7310

发布于 2018-05-03 15:09:47

文章被收录于专栏：jojo的技术小屋jojo的技术小屋

作者：汪娇娇

时间：2017年8月3日

H5和客户端（IOS、安卓）想要交互怎么办（手动头疼）？

答案是肯定的，必要的时候还是要借助一定的工具啦。

我主要研究的是JavascriptBridge，所以今天要说的就这种方法。

而且基于我自己是做前端的，所以单方面的只说JS部分，客户端可以参考：

https://github.com/wangjiaojiao77/WebViewJavascriptBridge（IOS）和

https://github.com/wangjiaojiao77/JsBridge（安卓）。

分批说，先说IOS吧。

1、IOS

先把下面这段代码（这段代码可是会更新的哦，注意及时更新就ok啦）copy到你的JS中。

function setupWebViewJavascriptBridge(callback) {
	if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
	if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
	window.WVJBCallbacks = [callback];
	var WVJBIframe = document.createElement('iframe');
	WVJBIframe.style.display = 'none';
	WVJBIframe.src = 'https://__bridge_loaded__';
	document.documentElement.appendChild(WVJBIframe);
	setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

然后直接写交互就ok啦（交互无非也就2种：注册一个方法 和 调用已经注册好的方法）。

setupWebViewJavascriptBridge(function(bridge) {
	
	//注册一个方法（方法名是“JS Echo”），客户端进行调用（方法名也是“JS Echo”），responseCallback是回调函数
	bridge.registerHandler('JS Echo', function(data, responseCallback) {
		console.log("JS Echo called with:", data)
		responseCallback(data)
	})

    //客户端已经注册好一个名为“ObjC Echo”的方法，H5直接进行调用（方法名也为“ObjC Echo”）就行，调用的时候可以传客户端需要的参数
	bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
		console.log("JS received response:", responseData)
	})
})

2、Android

so，安卓也很easy啦。

先把下面这段代码（这段代码可是会更新的哦，注意及时更新就ok啦）copy到你的JS中。

function connectWebViewJavascriptBridge (callback) { 
     if (window.WebViewJavascriptBridge) {
           callback(WebViewJavascriptBridge)
     } else {
           document.addEventListener(
               'WebViewJavascriptBridgeReady'
                , function() {
                     callback(WebViewJavascriptBridge)
                },
                false
           );
     }
}

然后直接写交互就ok啦（其实和IOS一样）。

connectWebViewJavascriptBridge (function(bridge) {
	
	//注册一个方法（方法名是“JS Echo”），客户端进行调用（方法名也是“JS Echo”），responseCallback是回调函数
	bridge.registerHandler('JS Echo', function(data, responseCallback) {
		console.log("JS Echo called with:", data)
		responseCallback(data)
	})

    //客户端已经注册好一个名为“ObjC Echo”的方法，H5直接进行调用（方法名也为“ObjC Echo”）就行，调用的时候可以传客户端需要的参数
	bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
		console.log("JS received response:", responseData)
	})
})

基本的就是这么写就完啦，详细的可以参照我上面发的网址~~~

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java