h5初始化代码例子
function connectWebViewJavascriptBridge(callback) {
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终端
if (isAndroid) {
// Android使用
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function () {
callback(WebViewJavascriptBridge);
},
false
);
}
}
if (isiOS) {
// iOS使用
if (window.WebViewJavascriptBridge) {
return callback(window.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);
}
}
connectWebViewJavascriptBridge(function (bridge) {
bridge.init(function (message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
if (responseCallback) {
console.log('JS responding with', data);
responseCallback(data);
}
});
bridge.registerHandler("functionInJs", function (data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
if (responseCallback) {
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
}
});
})
采用技术
Android:参考https://github.com/lzyzsd/JsBridge
iOS:参考https://github.com/marcuswestin/WebViewJavascriptBridge
H5与原生交互公共插件
插件方法名前缀以platform开头,后面接上要实现的功能名称,比如platformCamera
方法 |
h5调用例子 |
h5入参 |
原生出参 |
备注 |
---|---|---|---|---|
方法 |
h5调用例子 |
h5入参 |
原生出参 |
备注 |
蓝牙模块:连接蓝牙 步骤序列:②
|
window.WebViewJavascriptBridge.callHandler( , &# |