眾所周知,app的一些功能可能會使用到H5開發,這就難免會遇到java與js 的相互調用,android 利用WebViewJavascriptBridge 實現js和java的交互,這裡介紹下JsBridge第三方函式庫的使用。
github傳送門:https://github.com/lzyzsd/JsBridge
java與js互相呼叫如下:
java傳送資料給js,js接收並回傳給java
同理,js發送資料給java,java接收並回傳給js
同時兩套流程都存在「預設接收」 與「指定接收」
大致呼叫流程圖如下:
專案 build.gradle
repositories { // ... maven { url "https://jitpack.io" } }
app build.gradle
dependencies { compile 'com.github.lzyzsd:jsbridge:1.0.4'}
xml裡直接使用com.github.lzyzsd.jsbridge.BridgeWebView
取代原生WebView
另外放置兩個Button
用於測試使用
html檔案裡簡單放置兩個按鈕發送數據,同時提供列印訊息
Title
打印信息
這裡我本地跑的一個簡單的django項目,起了個服務供使用
webView.loadUrl("http://10.0.0.142:8000/cake/jsbridge");
webview
載入頁面
#button
註冊監聽
javaToJsDefault.setOnClickListener(this); javaToJsSpec.setOnClickListener(this);
按鈕點擊事件,java傳遞資料給js
//java传递数据给js @Override public void onClick(View v) { switch (v.getId()) { case R.id.java_to_js_default: //默认接收 webView.send("发送数据给js默认接收", new CallBackFunction() { @Override public void onCallBack(String data) { //处理js回传的数据 Toast.makeText(WebTestActivity.this, data, Toast.LENGTH_LONG).show(); } }); break; case R.id.java_to_js_spec: //指定接收参数 functionInJs webView.callHandler("functionInJs", "发送数据给js指定接收", new CallBackFunction() { @Override public void onCallBack(String data) { //处理js回传的数据 Toast.makeText(WebTestActivity.this, data, Toast.LENGTH_LONG).show(); } }); break; default: break; } }
jsWebViewJavascriptBridge
註冊事件監聽,接收資料