目录
前言
在WebView的开发中,经常需要用到本地函数与H5界面或者Js交互,传递数据等,但是都知道Android本身自带的WebView与Js交互方式通过addJavascriptInterface这种桥接方式存在安全隐患问题,这个可以网上查一大堆,这里提供一种可行的方式进行交互,方便Android与IOS同时使用–WebViewJavascriptBridge。
github地址
https://github.com/lzyzsd/JsBridge
功能
- Js调用Android(IOS)本地方法(获取回调);
- Android(IOS)本地调用Html函数;
- Android(IOS)本地调用Html函数并获取回调;
使用方法
添加依赖
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
这里需要注意的一个坑:不建议直接添加github依赖,1.0.4版本存在很多问题,会在使用中出现不稳定情况,例如js无法获取Android(IOS)的回调值等。
推荐方式
直接将该库中的library clone下来,作为Module导入并依赖。
简单封装JS库文件
为了使Android和IOS同时使用,方便开发时Html界面调用,这里抽出一个JS库,统一Android和IOS的调用方式。
以下代码都是js文件中的(NativeApp.js)
判断手机类型
/**
* 获取系统类型 (根据userAgent判断)
* IOS 苹果
* ANDROID 安卓
* UNKOWN 未知
*/
getOSType : function(){
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){
return 'ANDROID';
}else if(isiOS){
return 'IOS';
}else{
return 'UNKOWN';
}
}
设置Android手机桥接
Android在使用该库时需要初始化配置,这段代码必须设置在Js中。
/**
* android系统js桥接口设置
* @param {Object} callback 桥接口回调函数 桥接方式固定写法
*/
setUpAndroidBridge: function (callback) {
if(window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
return callback(WebViewJavascriptBridge);
},
false
);
}
}
设置IOS手机桥接
IOS在使用时配置该库的代码如下:
/**
* IOS系统js桥接口设置
* @param {Object} callback 桥接口回调函数 桥接方式固定写法
*/
setUpIOSBridge : function (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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
设置Android和IOS统一桥接口
为了方便Html端的调用,在JS文件中,将Android和IOS的桥接口统一设置。
/**
* Android和IOS 统一桥接口
*
* data 请求参数封装
* 如 var data = {
* 'action': 'closeWebViewPage',
* 'data':'关闭当前webView视图'
*
* };
*
* callback 结果返回值回调
* 如 var callbackFun = function(resultdata){
* //resultdata 为具体返回值封装
* }
*
*
*/
setUpBridge:function(data,resultCallback){
var osType = this.getOSType();//获取系统类型
//按系统类型 分别执行原生交互
if(osType=='IOS') {
//苹果手机交互方式 消息体为字面量对象(json格式): action 代表执行的动作 data 代表传递的数据
this.setUpIOSBridge(function(bridge) {
bridge.callHandler('IOSNativeApp',data, function(response) {
if(typeof resultCallback == 'function') {
resultCallback(response);
}
});
});
} else if(osType == 'ANDROID') {
//安卓手机交互方式
this.setUpAndroidBridge(function(bridge) {
bridge.callHandler('AndroidNativeApp', data, function(response) {
if(typeof resultCallback == 'function') {
resultCallback(response);
}
});
});
}else {
//其他类型
}
}
JS调用函数
在Js中设置两个函数,分别实现不同的功能(一个是关闭本地界面,一个是回传用户信息),为了方便在Html中调用,这里在JS中设置了两个方法,可以根据自己的实际情况封装,这里只是为了演示。
关闭(返回)界面:
/**
* 关闭当前WebView视图页面,并返回上一级原生界面
*/
closeWebViewPage : function() {
var data = {
'action': 'closeWebViewPage',
'data':'关闭当前webView视图'
};
this.setUpBridge(data,null);
}
获取当前登录用户:
/**
* 获取当前用户信息
* resultCallback 为一个回调处理函数,函数参数为返回值
* 如
* var resultCallback = function(resultData){
*
* }
*
*/
getCurrentUserInfo :function(resultCallback) {
var data = {
'action': 'getCurrentUserInfo',
'data':'获取用户信息'
};
this.setUpBridge(data,resultCallback);
}
JS库文件整体代码
var NativeApp = {
closeWebViewPage : function() {...}
getCurrentUserInfo :function(resultCallback) {...}
getOSType : function(){...}
setUpBridge:function(data,resultCallback){...}
setUpIOSBridge : function (callback) {...}
setUpAndroidBridge: function (callback) {...}
}
Html页面设置
这里需要将定义好的Js库引入使用,这里设置了两个点击按钮用于调用java本地方法(一个关闭界面,一个获取用户数据),并定义两个用于显示内容的标签(一个显示java主动调用带的参数,一个用于显示主动获取的java数据)。
<!DOCTYPE html>
<!--导入-->
<script type="text/javascript" src="NativeApp.js" ></script>
<script>