Android
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>方法实现</title>
<meta name="author" content="m.gome.com.cn">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="js/zepto.js"></script>
</head>
<body>
<h1>JS_Android交互测试</h1>
<script type="text/javascript">
function test(){
var _log = document.createElement(‘p‘);
document.body.appendChild(_log);
_log.innerHTML = ‘JS handler [test] was called‘;
}
//打印错误日志
window.onerror = function(err) {
var errlog = document.createElement(‘p‘);
document.body.appendChild(errlog);
errlog.innerHTML = err;
}
Zepto(function(){
bridge.send(‘Enemy spotted‘);
})
window.onload = function(){
var uniqueId = 1;
//日志记录
function log(message, data) {
var log = document.getElementById(‘log‘),
el = document.createElement(‘div‘);
el.className = ‘logLine‘;
el.innerHTML = uniqueId++ + ‘. ‘ + message + (data ? ‘: ‘ + JSON.stringify(data) : ‘‘);
if (log.children.length) {
log.insertBefore(el, log.children[0]);
}
else {
log.appendChild(el);
}
}
log(‘window onload Ready‘);
/* 功能1
* 页面加载完成后给Native传值
* Native随时给js传值
* 应用场景: H5页面传值给Native,动态生成顶栏标题。
* 测试用例: 页面加载完成后,js给Native传值,Native拿到后传值给js,页面打印日志
*/
/* 功能2
* Native调用js方法,执行完后回调
* 应用场景: Native返回按钮调用H5返回功能
* 测试用例: 项目js和wap公用js(不影响现有wap站js库,且调用灵活)
*/
// bridge.delayJsCallBack(0, ‘call back haha‘, function (msg) {
// bridge.alert(msg);
// });
//bridge.registerHandler(‘test‘, wapJs());
//test();
/* 功能3
* js调用Native方法，执行完后回调
* 应用场景: H5分享按钮调用Native分享功能
* 测试用例: alert
*/
var Btn = document.getElementById(‘btn‘);
Btn.ontouchstart = function(e){
e.preventDefault();
log("Calling Native handler testOC");
bridge.callHandler(‘testOC‘,{‘id‘: ‘123‘}, function(response) {
log(‘Got response from testOC callBack‘, response)
})
}
}
</script>
<button id=‘btn‘>js call Native</button>
<div id=‘log‘></div>
</body>
</html>
IOS:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>方法实现</title>
<meta name="author" content="m.gome.com.cn">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.effect.js"></script>
</head>
<body>
<h1>JS_OC交互测试</h1>
<script type="text/javascript">
window.onerror = function(err) {
log(err);
}
//给WebViewJavascriptBridgeReady事件注册一个Listener
document.addEventListener(‘WebViewJavascriptBridgeReady‘, onBridgeReady, false)
//事件的响应处理
function onBridgeReady(event) {
var bridge = event.bridge,
uniqueId = 1;
//日志记录
function log(message, data) {
var log = document.getElementById(‘log‘),
el = document.createElement(‘div‘);
el.className = ‘logLine‘;
el.innerHTML = uniqueId++ + ‘. ‘ + message + (data ? ‘: ‘ + JSON.stringify(data) : ‘‘);
if (log.children.length) {
log.insertBefore(el, log.children[0]);
}
else {
log.appendChild(el);
}
}
log(‘WebView2Javascript Bridge Ready‘);
/* 功能1
* 页面加载完成后给Native传值
* Native随时给js传值
* 应用场景: H5页面传值给Native,动态生成顶栏标题。
* 测试用例: 页面加载完成后,js给Native传值,Native拿到后传值给js,页面打印日志
*/
bridge.send(‘Enemy spotted‘);
//初始化操作，并定义默认的消息处理逻辑
bridge.init(function(message) {
log(‘Roger that, 3Q js!‘, message);
})
/* 功能2
* Native调用js方法,执行完后回调
* 应用场景: Native返回按钮调用H5返回功能
* 测试用例: 项目js和wap公用js(不影响现有wap站js库,且调用灵活)
*/
bridge.registerHandler(‘test‘, function(data, response) {
log(‘JS handler [test] was called‘, data);
response.respondWith({ ‘Javascript‘:‘Roger!‘ });
})
//bridge.registerHandler(‘test‘, wapJs());
/* 功能3
* js调用Native方法，执行完后回调
* 应用场景: H5分享按钮调用Native分享功能
* 测试用例: alert
*/
var Btn = document.getElementById(‘btn‘);
Btn.ontouchstart = function(e){
e.preventDefault();
log("Calling Native handler testOC");
bridge.callHandler(‘testOC‘,{‘id‘: ‘123‘}, function(response) {
log(‘Got response from testOC callBack‘, response)
})
}
}
</script>
<button id=‘btn‘>js call Native</button>
<div id=‘log‘></div>
</body>
</html>
时间： 2024-10-11 02:30:21