iOS/Android原生App与js优雅交互
无论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'
2.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,bridge为
WKWebViewJavascriptBridge类型。
为js提供方法用bridge.registerHandler()进行注册,调用js方法用bridge.callHandler()进行调用。
-
Android 代码配置
1.Android 引入jsbridge
gradle中添加
implementation 'com.github.lzyzsd:jsbridge:1.0.4'
2.Andriod 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!) } }
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) {})