第一步是必写的
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 = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
第二步
setupWebViewJavascriptBridge(function(bridge) {
//和ios和安卓的交互放在这里
}
第三步 写交互
setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) {
log.insertBefore(el, log.children[0])
} else {
log.appendChild(el)
}
}
// registerHandler是注册,ios和安卓那边可以调取你这边的数据
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
log('Java called testJavascriptHandler with', data)
var responseData = {
'Javascript Says': 'Right back atcha!'
}
log('JS responding with', responseData)
responseCallback(responseData)
})
bridge.callHandler('getAuthToken', {//getAuthToken 是调取安卓那边注册事件 需要统一
'foo': 'bar'
}, function(response){
$.ajax({
type: "GET",
headers: {
'Authorization': 'Bearer ' +response,//response 是安卓和ios那边返回的token
},
url: "url",
async: true,
success: function(res) {
console.log(res)
},
error(err) {
console.log(err)
}
})
})
})
附加一个简单的报错插件
<script src='https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0'></script><!-- 也可以使用npm下载--!>
<script>
window.vConsole = new window.VConsole();
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
document.write("错误信息:" , errorMessage,"出错文件:" , scriptURI,"出错行号:" , lineNumber,"错误详情:" , errorObj)
}
throw new Error("出错了!");
</script>