作者: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调用弹出java toast * @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(); } }
网友评论