为了提高开发效率,开发人员往往会使用原生app里面嵌套前端h5页面的快速开发方式,这就要涉及到h5和原生的相互调用,互相传递数据,接下来就实践项目中的交互方式做一个简单的记录分享,废话不多说,直接上正文:
先贴上判断访问终端的代码,直接拿去使用:
//判断访问终端
function browserVersion(){
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}
1.安卓调用js传递数据,js接收数据:最原始的安卓调用方式,js全局写一个方法,供安卓原生调用,接收数据,js处理数据,页面渲染,例如:
function testMessage(data){
console.log(data);
//业务逻辑。。。
}
//接受到的data即为原生安卓调用js的方法,传递过来的数据,js拿到数据,处理业务逻辑
2.js调用原生的方法,执行原生的业务逻辑,例如:执行原生的方法,跳转到原生的页面
$(document).on("click",".testButten",function(){
console.log("跳转原生页面")
window.Android.goTestPage();
//安卓直接调用,用来处理简单的逻辑
})
如果业务逻辑比较复杂,建议使用WebViewJavaScriptBridge交互封装,统一管理,方便维护。
// IOS
// 互相调用都要加这个方法
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) {
//注册一个方法(方法名是“registerJSmethod”),客户端进行调用(方法名也是“registerJSmethod”),responseCallback是回调函数
bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
console.log(data)
responseCallback(data)
})
//客户端已经注册好一个名为“registerOCmethod”的方法,H5直接进行调用(方法名也为“registerOCmethod”)就行,调用的时候可以传客户端需要的参数
bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
console.log("registerOCmethod:", responseData)
})
})
三.使用WebViewJavaScriptBridge完成H5和原生的交互(andriod)安卓提供两种方法,第一使用原始的调用方法,第二使用WebViewJavaScriptBridge方法,各取所需:
1.根据设备类型判断设备是android还是ios,执行相应的操作:
function toPageJS(paramData){
if(browserVersion().ios){
//ios执行ios的方法,调用原生
WebViewJavascriptBridge.callHandler('jumpPage',url, function(response){})
}else if(browserVersion().android){
//安卓,执行android方法,调用原生
window.Android.toPage(url);
}
}
}
}
2.WebViewJavaScriptBridge方法,和ios的方式一样:复制下面代码到你的js中
function connectWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
执行相互调用:
connectWebViewJavascriptBridge (function(bridge) {
//注册一个方法(方法名是“registerJSmethod”),客户端进行调用(方法名也是“registerJSmethod”),responseCallback是回调函数
bridge.registerHandler('registerJSmethod', function(data, responseCallback) {
console.log("registerJSmethod:", data)
responseCallback(data)
})
//客户端已经注册好一个名为“registerOCmethod”的方法,H5直接进行调用(方法名也为“registerOCmethod”)就行,调用的时候可以传客户端需要的参数
bridge.callHandler('registerOCmethod', {'key':'value'}, function responseCallback(responseData) {
console.log("registerOCmethod:", responseData)
})
})
完活!有错误欢迎指正。