webjs与native交互SDK(android，ios通用)

说明：嵌入客户端中的H5页面，可能会出现需要与native交互的触发操作或传递数据的情况。在此说明一种实现方案，以供参考。

一、使用到第三方工具

IOS 

Android

二、使用方法

1、定义一个设备类型判断方法

//设备类型判断

function deviceType(){

var  isIDevice = (/iphone|ipod/gi).test(navigator.platform),

isIDeviceIpad = (/ipad/gi).test(navigator.platform),

isAndroid = (/Android/gi).test(navigator.userAgent);

if ((isIDevice || isIDeviceIpad) && !isAndroid) {

return "isIos";

}else if(isAndroid){

return "isAndroid";

}

}

2、声明初始化方法

function setupWebViewJavascriptBridge(callback) {

if (deviceType()=="isIos") {

//ios监听window.WebViewJavascriptBridge

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 = 'wvjbscheme://__BRIDGE_LOADED__';

document.documentElement.appendChild(WVJBIframe);

setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)

} else if(deviceType()=="isAndroid"){

//安卓监听window.WebViewJavascriptBridge

if (window.WebViewJavascriptBridge) {

callback(WebViewJavascriptBridge)

} else {

document.addEventListener(

'WebViewJavascriptBridgeReady'

, function() {

callback(WebViewJavascriptBridge)

},

false

);

}

}

}

3、调用初始化方法，并注册相关交互方法

setupWebViewJavascriptBridge(function(bridge) {

if(deviceType()=="isAndroid"){

//若果是安卓必须要注册bridge.init，用于接收客户端反馈

bridge.init(function(message, responseCallback) {});

}

// 获取分享按钮DOM

var weixinShareButton = document.getElementById("share_weixin");

// 绑定点击事件，与客户端交互

weixinShareButton.onclick = function(e) {

e.preventDefault();

//调用客户端方法

bridge.callHandler('nativeShare',

{'shareType': 'weixin'},

function(response) {

/* do something */

}

);

}

pyqShareButton.onclick = function(e) {

e.preventDefault();

bridge.callHandler('nativeShare',

{'shareType': 'pyq'},

function(response) {

/* do something 接收客户端响应*/

}

);

}

});