本文首發(fā)于公眾號【一個老碼農】
無論Android還是iOS，Webview都具有與js交互的能力雨让，這使得我們可以利用混合開發(fā)(原生+h5)滿足相對復雜的業(yè)務需求雇盖。但是由于Android和iOS系統(tǒng)的差異，原生App在與js交互時宫患，js需要判斷不同的系統(tǒng)從而調用不同的代碼刊懈，從而使js代碼的維護成本更高。
原生與js交互的傳統(tǒng)做法
- 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')
}
如果只是簡單的交互娃闲，使用這種方法簡單快捷虚汛。如果接口過多，或者存在參數回調的情形皇帮，則這種方式對各端都不太友好卷哩。客戶端還封裝處理回調相關的代碼属拾，前端則需要大量的判斷系統(tǒng)的代碼将谊。這個時候我們就可以使用幫我們封裝好的第三方庫的方式來解決冷溶。
使用第三方庫讓原生App與js優(yōu)雅交互
接下來我來介紹一下怎么使用第三方庫的，讓js與原生app互相調用尊浓，且支持參數回調逞频，且js代碼統(tǒng)一，總之讓原生App與js的交互更加優(yōu)雅栋齿。
在ios中我們使用WebViewJavascriptBridge苗胀，在android中我們使用jsbridge
下面我們來看一下各端的代碼具體都是怎么寫：
- iOS代碼配置
- ios引入
WebViewJavascriptBridge
引入以下代碼至Podfile中并執(zhí)行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系統(tǒng)中亭畜，js需要初始化bridge扮休。而在ios中迎卤，bridge則由客戶端初始化后傳入。
js調用客戶端方法統(tǒng)一用bridge.callHandler('方法名','參數',function(response){})
js為客戶端提供方法則統(tǒng)一用bridge.registerHandler('方法名',function (data, responseCallback) {})
