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\",callback);//" } App.xxxxxxxxxxxxx = function(data,callback){   sdk_launchFunc(\"xxxxxxxxxxxxx\",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);        }      }); }

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

总结

以上是内存溢出为你收集整理的Android的WebView与H5前端JS代码交互的实例代码全部内容，希望文章能够帮你解决Android的WebView与H5前端JS代码交互的实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。