混合開發js與Andorid互調
作者:IT魔幻師
部落格:www.huyingzi.top
轉載請註明出處:https://www.jianshu.com/p/23f74055e999
一、Android端初始配置
-
定義java類
在需要被呼叫的Java函式加上@JavascriptInterface註解
/** * @專案名: JsOrJavaDemo * @包名: com.hubin.jsorjavademo * @檔名: JavaScriptBridge * @建立者: 胡英姿 * @建立時間: 2018/8/24 16:13 * @描述: 與js互動的介面類 */ public class JavaScriptBridge{ private Context mContext; public JavaScriptBridge(Context context, WebView webview) { mContext = context; } /** * 提供js呼叫彈出javatoast * @param msg */ @JavascriptInterface //android4.2 以上,js呼叫android方法有安全問題 public void showTast(String msg){ Toast.makeText(mContext, ""+msg, Toast.LENGTH_SHORT).show(); } }
-
配置webview,建立對映關係
//建立JavaScriptBridge JavaScriptBridge jsBridge = new JavaScriptBridge(mContext); //設定js和android通訊橋樑介面 JavaScriptBridge 對應對映欄位-->jsInterface; Webview.addJavascriptInterface(jsBridge, "jsInterface"); mWebview.getSettings().setJavaScriptEnabled(true); //載入本地模板,需要將web相關程式碼放置assets目錄下 mWebview.loadUrl("file:///android_asset/index.html");//本地模板
二、js呼叫Android方法
//使用json格式 var json = {"message":"你好,我是js"}; //物件.方法名(引數) window.jsInterface.showTast(JSON.stringify(json));
三、Android呼叫js方法
-
js端:定義一個函式,引數約定json格式
//接收json物件 function showMsg(json){ var message = json.message; var name = json.name; showLog("name="+name+",message="+message); alert(JSON.stringify(json)); };
-
Android端,呼叫js需在UI執行緒執行
//使用json格式封裝引數 JSONObject json = new JSONObject(); json.put("name", "android"); json.put("message", "Hello Android world!"); //切換到主執行緒 mHandler.post(new Runnable() { @Override public void run() { //呼叫js方法webview.loadUrl("javascript:方法名(引數)"); mWebview.loadUrl("javascript:showMsg("+json.toString()+")"); } });
四、引入CallBack實現Android回撥並解耦
-
js端定義回調回函
function receiveAndroid(json){ showLog("接收android回撥資料="+JSON.stringify(json)); };
-
js呼叫Android函式
//呼叫android獲取資料函式 //json中約定callback欄位,欄位值為js中定義的接收函式名字 var json = {"callback":"receiveAndroid"}; window.jsInterface.getData(JSON.stringify(json));
-
Android端定義getData函式,解析json中約定的回撥函式名,拿到資料後回撥給js
@JavascriptInterface public void getData(String jsJson){ //從伺服器獲取json資料 try { //解析js callback欄位中的函式名字 JSONObject jsonObject = new JSONObject(jsJson); final String callback = jsonObject.optString("callback"); showLog("js回撥方法="+callback); final JSONObject json = new JSONObject(); json.put("hotel_name", "8天連鎖"); json.put("hotel_price", "28.88塊錢"); json.put("hotel_address", "廣東省 深圳市 寶安區"); mHandler.post(new Runnable() { @Override public void run() { //android呼叫js方法必須在主執行緒 mWebview.loadUrl("javascript:"+callback+"(" + json.toString() + ")"); } }); } catch (JSONException e) { e.printStackTrace(); } }