本文首发于公众号【一个老码农】
无论Android还是iOS，Webview都具有与js交互的能力，这使得我们可以利用混合开发(原生+h5)满足相对复杂的业务需求。但是由于Android和iOS系统的差异，原生App在与js交互时，js需要判断不同的系统从而调用不同的代码，从而使js代码的维护成本更高。
原生与js交互的传统做法
- android一般这样为js提供接口：
webview.addJavascriptInterface(new JsInteraction(), "Android");
public class JsInteraction {
@JavascriptInterface
public void action(String param) {
//TODO
}
}
- ios一般这样js提供接口：
webView!.configuration.userContentController.add(self, name: "action")
extension ViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if message.name.caseInsensitiveCompare("action") == .orderedSame {
guard let param = message.body as? String else {
return
}
//TODO
}
}
}
- 而js的调用是这样的：
if (isiOS) { // ios
window.webkit.messageHandlers.action.postMessage('xxxxx')
}else{
//android
Android.action('xxxxx')
}
如果只是简单的交互，使用这种方法简单快捷。如果接口过多，或者存在参数回调的情形，则这种方式对各端都不太友好。客户端还封装处理回调相关的代码，前端则需要大量的判断系统的代码。这个时候我们就可以使用帮我们封装好的第三方库的方式来解决。
使用第三方库让原生App与js优雅交互
接下来我来介绍一下怎么使用第三方库的，让js与原生app互相调用，且支持参数回调，且js代码统一，总之让原生App与js的交互更加优雅。
在ios中我们使用WebViewJavascriptBridge，在android中我们使用jsbridge
下面我们来看一下各端的代码具体都是怎么写：
- iOS代码配置
- ios引入
WebViewJavascriptBridge
引入以下代码至Podfile中并执行pod install
pod 'WebViewJavascriptBridge'
- ios webview配置
class BaseWebView: WKWebView {
var bridge: WKWebViewJavascriptBridge?
override init(frame: CGRect, configuration: WKWebViewConfiguration) {
super.init(frame: frame, configuration: configuration)
}
init(frame: CGRect) {
let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
configuration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
super.init(frame: frame, configuration: configuration)
bridge = WKWebViewJavascriptBridge(for: self)
addFunc()
getHtmlPageUrl()
}
func addFunc() {
//注册供js调用的方法（获取客户端版本号）
bridge!.registerHandler("getVersion", handler: {[weak self] data, responseCallback in
guard let this = self else {
return
}
responseCallback?("1.0.0")
})
}
//调用js的getPageUrl方法，获取url
func getHtmlPageUrl() {
bridge!.callHandler("getPageUrl", data: nil) { response in
print("getPageUrl:\(response ?? "")")
}
}
}
class H5ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
addWebView()
}
func addWebView() {
webView = BaseWebView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height))
webView!.bridge!.setWebViewDelegate(self)
let path = Bundle.main.path(forResource: "jsBridge", ofType: "html")
let url = URL(fileURLWithPath: path!)
webView!.load(URLRequest(url: url))
view.addSubview(webView!)
}
}
在ios中，需要初始化bridge(WKWebViewJavascriptBridge类型)，
为js提供方法用bridge.registerHandler()进行注册，调用js方法用bridge.callHandler()进行调用。
- Android代码配置
- Android 引入
jsbridge
gradle中添加
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
- Andriod webview配置
public class H5Activity extends AppCompatActivity {
private BridgeWebView webview;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_h5);
webview = (BridgeWebView) findViewById(R.id.wv1);
WebSettings webSetting = webview.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setMediaPlaybackRequiresUserGesture(false);
webSetting.setJavaScriptCanOpenWindowsAutomatically(false);
webSetting.setAllowFileAccess(true);
webview.loadUrl("file:///android_asset/web/jsBridge.html");
addFunc();
getPageUrl();
}
private void addFunc() {
//注册供js调用的方法（获取客户端版本号）
webview.registerHandler("getVersion", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i("TAG", data + "");
function.onCallBack("1.0.0");
}
});
}
public void getPageUrl() {
//调用js的getPageUrl方法，获取url
webview.callHandler("getPageUrl", null, new CallBackFunction() {
@Override
public void onCallBack(String data) {
Log.e("getPageUrl",data);
}
});
}
}
Android的写法基本与ios一样，与ios不同的是不需要初始化bridge（需要前端初始化）。
为js提供方法用webview.registerHandler()进行注册，调用js方法用webview.callHandler()进行调用。
- js代码写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vconsole.min.js"></script>
<script> var vConsole = new VConsole(); </script>
<title>Document</title>
</head>
<body>
<div id="content">内容</div>
<button id="btn1">获取版本号</button>
<script>
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
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){
let uagent = window.navigator.userAgent
let isAndroid = uagent.indexOf('Android') > -1 || uagent.indexOf('Adr') > -1
if (isAndroid) {
//android需要初始化bridge
bridge.init(function(message, responseCallback) {
var data = {
'Javascript Responds': 'Wee!'
};
responseCallback(data);
});
}
//注册可供原生调用的方法（获取页面同url）
bridge.registerHandler("getPageUrl", function (data, responseCallback) {
console.log("call过来了 getPageUrl")
responseCallback(document.location.toString())
})
//点击按钮，获取app版本号
document.getElementById('btn1').onclick = function(e) {
console.log(bridge)
bridge.callHandler('getVersion', null, function(response) {
document.getElementById('content').innerHTML = "版本号：" + response
})
}
});
</script>
</body>
</html>
在Android系统中，js需要初始化bridge。而在ios中，bridge则由客户端初始化后传入。
js调用客户端方法统一用bridge.callHandler('方法名','参数',function(response){})
js为客户端提供方法则统一用bridge.registerHandler('方法名',function (data, responseCallback) {})
网友评论