Android的WebView与H5前端JS代码交互的实例代码

前段时间项目有深度和前端对接过，也是碰了一些坑，现在有时间就拿出来分享下

js调用原生不外乎就两种，一种是传假的url，也就是url拦截的方式，类似于下面这种：

//js代码
 function sendcommand(param){
  var url="js-call://"+param;
  document.location = url;
 }
 sendcommand("playsnake");

//java代码
 mwebview.setwebviewclient(new webviewclient() {
   @override
   public boolean shouldoverrideurlloading(webview view, string url) {
     if (url.contains("js-call:")) {
       if (url.contains("playsnake")) {
        log.d("x5webviewactivity", "玩蛇");
       } else if (url.contains("whatdoesthefoxsay")) {
        log.d("x5webviewactivity", "叮铃铃铃叮铃铃");
       } else {
        showinfoastoast("龟儿娃，你调得不对");
       }
       return false;
     }
     view.loadurl(url);
     return true;    
   }
 });

这种方法来调用原生，好处就是集成比较迅速，约定一个标识，类似于示例中的“js-call”，再约定一波type，比如“玩蛇”之类的，代码很简单，毕竟大家都很忙。

但是如果你打算长期把这个项目做下去的话，这种方式还是不要了吧，缺点太明显了。首先是给原生传数据，只能是字符串；然后业务扩展起来，你的else if越写越多，里面再加一大把switch，代码越来臃肿，维护起来那感觉真的酸爽。

另一种就是通过谷歌提供的js与java绑定的接口，约定好要交互的对象名，类似于下面的“app”

//通过webview提供的addjavascriptinterface这行代码，我们在浏览器的js环境中创建了一个"app"对象
//这个对象下的函数就是自定义接口类里面通过 @javascriptinterface注解的java方法转换而来的

mwebview.addjavascriptinterface(new javafuckjsinterface(this), "app");

/**
 * 自定义的交互接口类
 */
public class javafuckjsinterface{
  private weakreference<x5webviewactivity> x5webviewactivity;

  public javafuckjsinterface(x5webviewactivity context) {
    x5webviewactivity = new weakreference<>(context);
  }
  //通过这个@javascriptinterface转化成绑定的“app”对象下的同名函数，js代码可以直接调用
  @javascriptinterface
  public void presentcamera(string data) {
    //拍照上传
    x5webviewactivity.get().presentcamera(data);
  }
}

//js代码
 var parameter = {};
 parameter.size = "1024*768";
 parameter.format = "jpeg";
 var parameterstr = json.stringify(parameter);
 app.presentcamera(parameterstr);

这样写的话，规范了不少，即使函数再多，这个接口里面也是一目了然，调函数就是调函数，传参数就是传参数，相比于之前那个方法，可读性高了不少

不过上面写的这些破玩意网上资料一大把，我特么是吃多了么，再写一遍？

nonono，这些东西确实足够我们与js交互了，但是前端不想搞json.stringify(parameter)这种操作啊，他要直接传对象过来。为什么别人ios都可以拿到我的对象，你拿的就是undefined？为什么别人ios能给我对象，你就不给我对象，偏要给我字符串？凭什么别人ios能拿到我的匿名回调函数来调用，你偏偏让我写一个回调函数给你调？

ok，也不是不能做到，不过这就需要通过注入js代码来完成了

talk is cheap , show me the code

下面这个微型的sdk能够实现互调传json对象，调用js传入的匿名函数

 //需要注入的js代码，加//"是因为简书会忽略\"这个回引号，不加的话后面的代码都是字符串的颜色了

 //原理是通过这个sdknativeevents来保存传入的匿名函数callback，等原生做完该做的操作之后
 //接着去调用sdk_nativecallback这个函数来运行存进去的callback
 var sdknativeevents = {}
 function sdk_launchfunc(funcname,data,callback){
   if(!data){
     alert(\"必须传入data\");//"
     return;
   }
   if(!callback){
     alert(\"必须传入回调function\");//"
     return;
   }
   sdknativeevents[funcname] = callback;
   var jsobj={};
   jsobj.funcname=funcname;
   jsobj.data=json.stringify(data);
   var str = json.stringify(jsobj);
   app.native_launchfunc(str) //这个函数要在javascriptinterface里申明
 }
 function sdk_nativecallback(funcname,data){
   var obj= json.parse(data);
   if(sdknativeevents[funcname]){
     sdknativeevents[funcname](obj);
     if(funcname != \"updatelocation\"){//定位回调会不定时去重复触发，不做置空操作"
       sdknativeevents[funcname] = null;
     }
   }
 }
 //下面实现的功能和通过@javascriptinterface注解的java方法是一样的，app为约定好的注入对象名
 //app.xxx为暴露给前端的js函数
 app.login = function(data,callback){
   sdk_launchfunc(\"login\",data,callback);//"
 }
 app.xxxxxxxxxxxxx = function(data,callback){
   sdk_launchfunc(\"xxxxxxxxxxxxx\",data,callback);//"
 }
 ...

上面那些app.xxx的函数其实也可以不用注入，实现起来就是把 sdk_launchfunc这个函数注入到app对象下面，让前端直接调用，这样不用增加一个调用就多注入一个函数，前端只用改funcname就能实现所有的调用。但是我觉得，调函数就是调函数，传参数就是传参数，将每个功能拆成function可以提高代码的可读性

注入js代码也很简单，把上面那些js代码都粘贴到string这个资源文件里面，再通过mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code1))来注入就行，其中js_sdk_code1就是js代码的字符串

示例代码：

//在网页加载时提前注入，可以保证页面一旦加载完毕前端就能立即调到函数
 mwebview.setwebchromeclient(new webchromeclient() {
      @override
      public void onprogresschanged(webview webview, int i) {
        super.onprogresschanged(webview, i);
        if (i >= 10 && caninject) {
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code1));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code2));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code3));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code4));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code5));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code6));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code7));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code8));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code9));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code10));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code11));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code12));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code13));
          mwebview.loadurl("javascript:" + getstring(r.string.js_sdk_code14));
          caninject = false;
        }
        if (i == 100) {
          caninject = true;
        }
     }
});

这个时候有人就要问了，怎么注入这么多次，我也不想啊，这里有个坑的，一次注入的代码超过三行左右(分号结束为一行)吧，就会有几率出现注入失败，会造成所有js代码都没法注入进去，我就干脆直接一次注入一行代码来跳出这个坑，比如下面的js_sdk_code3就可以注入，虽然这个function内部有好几行代码，但是整体来说也算一行代码，这行代码定义了这个function。然而我又试了，在这个function里面再多加一行代码就会注入失败，搞得现在我也不确定他失败的零界点在哪里，反正尽量拆开注入吧。

将要注入的js代码拆开注入

细心的同学已经发现了，搞了这么多花里胡哨的，最关键的原生怎么来响应js的调用还没说明，别急，下面上代码

  //@javascriptinterface的代码应该放在哪里不用我讲了吧
  //通过与js交互的接口类来拿到做什么事，以及传过来的json对象转成的字符串
  @javascriptinterface
  public void native_launchfunc(string data) {
    try {
      jsonobject jsonobject = new jsonobject(data);
      string funcname = jsonobject.getstring("funcname");
      string datastr = jsonobject.getstring("data");
      switchname(funcname, datastr);
    } catch (jsonexception e) {
      e.printstacktrace();
    }
  }
  
  private void switchname(string funcname, string datastr) {
    if (funcname == null) {
      return;
    }
    switch (funcname) {
      case "login":
        x5webviewactivity.get().login(data);
        break;
      case "xxx":
        x5webviewactivity.get().xxx(data);
        break;
    }
  }

   //这里演示调用了login让原生来登陆，等登陆成功之后，我们去调用js的匿名回调，并传入token
   jsonobject jsonobject = new jsonobject();
   jsonobject.addproperty("token", preferenceshelper.getinstance().gettoken());
   string js = "javascript:sdk_nativecallback(\'login\',\'" + jsonobject + "\')";
   mwebview.loadurl(js);

android原生调用js代码也有两种，一种是通过上面的loadurl，一种是下面这种：

  string script = "sdk_nativecallback(\'login\',\'" + jsonobject + "\')";
  mwebview.evaluatejavascript(script, responsejson -> {
     if (!textutils.isempty(responsejson)) {
       //拿到js函数的返回值
     }
 });

区别就是一个能拿到js函数的返回值，一个拿不到，这个根据自己的需求来选用

前端js调用原生传入匿名回调的示例代码：

//js代码
 var fucker = {};
 fucker.name = "pdd";
 fucker.age = 18;
 app.login(fucker, function (data) {
    if (data.err) {
     alert(data.err);
    }
    alert(data.token);
 });

我们可以看到，前端给我们传入的是对象和匿名回调函数，匿名回调需要的参数依然是个对象，我们通过注入的sdk保存了这个回调函数，并自己做了对象和字符串转换，实际上java代码最终拿到和传出去还都是字符串，我们通过这个sdk统一的进行了转换，前端js代码那边不用判断手机是iphone或者是android，统一发出和接受对象，传入回调函数，能够减少他们很多工作量。

对了，因为android版本不一致，webview的兼容性参差不齐，选用了腾讯的x5内核浏览器来加载，其中有个坑就是全屏播放视频会有qq浏览器的广告，这个可以通过代码去掉，也拿出来分享下吧：

 //去掉qq浏览器广告
 private void removetbsad() {
  getwindow().getdecorview().addonlayoutchangelistener
      ((v, left, top, right, bottom, oldleft, oldtop, oldright, oldbottom) -> {
        arraylist<view> outview = new arraylist<>();
        view decorview = getwindow().getdecorview();
        decorview.findviewswithtext(outview, "相关视频", view.find_views_with_text);
        decorview.findviewswithtext(outview, "qq浏览器", view.find_views_with_text);
        if (outview.size() > 0) {
          outview.get(0).setvisibility(view.gone);
        }
      });
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。