H5与原生APP交互，WebViewJavascriptBridge

首页 > 我的学习历程作者：月丶 2020年2月26日 20:25 星期三热度：3670° 百度已收录

时间：2020-2-26 20:25 热度：3670°

此记录为H5端：

新建bridge.js文件

		var u = navigator.userAgent;
	
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	
		// 注册jsbridge
	
		function connectWebViewJavascriptBridge(callback) {
	
		    if (isAndroid) {
	
		        if (window.WebViewJavascriptBridge) {
	
		            callback(WebViewJavascriptBridge)
	
		        } else {
	
		            document.addEventListener(
	
		                'WebViewJavascriptBridgeReady',
	
		                function () {
	
		                    callback(WebViewJavascriptBridge)
	
		                },
	
		                false
	
		            );
	
		        }
	
		        return;
	
		    }
	
		    if (isiOS) {
	
		        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)
	
		    }
	
		}
	
		// 调用注册方法
	
		connectWebViewJavascriptBridge(function (bridge) {
	
		    if (isAndroid) {
	
		        bridge.init(function (message, responseCallback) {
	
		            responseCallback(data);
	
		        });
	
		    }
	
		});

然后引入工程，我使用的是VUE，则在main.js引入bridge.js文件

在需要使用的地方：

		window.WebViewJavascriptBridge.callHandler('payByAli',{orderInfo:data},function(res) {
	
		            window.console.log(res)
	
		        });

payByAli 为APP端定义的方法名，中间为参数，后面函数返回结果

APP调用js方法：

			window.WebViewJavascriptBridge.registerHandler('testFunction',function(data,responseCallback){
		
			            // data 是 APP 传递过来的数据.
		
			            // responseCallback 是 JS 调用完毕之后传递给 APP 的数据
		
			            alert("JS 被 app 调用了.");
		
			            responseCallback({data: "js 的数据",from : "JS"});
		
			        })