Android中WebView与原生通信

在Android原生开发中，应该80%的都会遇到原生与Js的混合调用，网上有很多示例，都可以实现需求，但是基本是表层实现，当然也有一些也写的非常不错，但是不知为什么就没有更新了，然后工程还缺少文件。其实我们在WebView和原生相互调用，无非就以下几个问题：

• 原生调用Js，Js如何异步回调给原生，同一个调用多次回调呢，一次回调、两次回调、三次......呢？
• Js调用原生，原生如何异步回调给Js，同一个调用多次回调呢，一次回调、两次回调、三次......呢？不通过WebView的loadUrl执行js进行回调呢？
• 我想在写Js时候这样操作呢？

  JsBridge.nativeDeleteCallback("调用原生方法后删除回调",function(result){
        alert(JSON.stringify(result))
    },function(error){
        alert(JSON.stringify(result))
  });

针对上面问题，本文也相应的解决了这写问题，参考Demo ,也可以先下载Demo运行之后一目了然。

SDK支持

• Js调用原生方法并支持异步回调和同步回调
• 原生调用Js方法并支持异步回调
• Js调用名称空间可自由配置，统一管理命名空间
• 支持Js调用原生方法多次回调，如果不想多次回调可以删除回调方法
• 支持部分Js框架中window并非顶级window

API介绍

callJsFunction(function: String)
原生调用Js的方法，不支持传递参数和回调

参数:
function:调用Js的方法名称

callJsFunction(function: String, callback: JsCallback?)
原生调用Js的方法，不支持传递参数但支持回调

参数
function:调用Js的方法名称
callback:回调函数

callJsFunction(function: String, data: String?)
原生调用Js的方法，支持传递参数，但不支持回调

参数
function:调用Js的方法名称
data:字符串，传递给Js的参数

callJsFunction(function: String, data: String?, callback: JsCallback?)
原生调用Js的方法，支持传递参数和回调

参数
function:调用Js的方法名称
data:字符串，传递给Js的参数
callback:回调函数

jsCallName()
Js调用原生的API命名空间，SDK统一了命名空间，默认为JsBridge，整个Js调用中只会使用这个命名，当然，如果是你不喜欢这个命名，或者需要根据项目更改为项目有关的命名，可以自定义WebView继承至BaseWebView重写该方法。

getWindow()
Js中获取window的方法，建议不要随意修改。在特殊的Js框架中，获取系统的window需要window.window才能获取到，所以这时候可以自定义WebView继承至BaseWebView重写该方法。

如何使用

依赖引入

Step 1.先在 build.gradle(Project:XXX) 的 repositories 添加:

allprojects {
  repositories {
  ...
  maven { url "https://jitpack.io" }
  }
}

Step 2. 然后在 build.gradle(Module:XXX) 的 dependencies 添加:

dependencies {
          implementation 'com.github.ChinaLike:JsBridge:0.0.2'
}

新建Js调用原生方法的类，参考：JsBridgeToast

package com.like.jsbridge

import android.content.Context
import android.os.Handler
import android.util.Log
import android.webkit.JavascriptInterface
import android.widget.Toast
import com.core.web.Callback
import com.core.web.CallbackBean

class JsBridgeToast(private val context: Context)  {

    @JavascriptInterface
    fun nativeNoArgAndNoCallback(){
        Toast.makeText(context,"调用原生无参数无回调方法",Toast.LENGTH_SHORT).show()
    }

    @JavascriptInterface
    fun nativeNoArgAndCallback(callback: Callback){
        callback.success()
    }

    @JavascriptInterface
    fun nativeArgAndNoCallback(params:String){
        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
    }

    @JavascriptInterface
    fun nativeArgAndCallback(params:String,callback: Callback):Boolean{
        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
        callback.success()
        return false
    }

    @JavascriptInterface
    fun nativeDeleteCallback(params:String,callback: Callback){
        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
        callback.success(isDelete = true)
        Handler().postDelayed(Runnable {
            callback.error(1,"错误回调")
        },3000)
    }

    @JavascriptInterface
    fun nativeNoDeleteCallback(params:String,callback: Callback){
        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
        callback.success(isDelete = false)
        Handler().postDelayed(Runnable {
            callback.error(1,"错误回调")
        },3000)
    }

    @JavascriptInterface
    fun nativeSyncCallback():String{
        return "原生同步回调"
    }
}

新建MainActivity和xml文件,参考：MainActivityKotlin和activity_main

• 在xml文件中引入JsBridgeWebView

当然，如果没有特殊需要使用JsBridgeWebView就可以了，如果有定制WebView，则引入自己定制那个WebView就可以了，但是自定义的WebView需要继承BaseWebView

• 在Activity中调用addJavascriptInterface添加

import com.core.web.JsBridgeWebView;

class MainActivityKotlin : AppCompatActivity() {
    private var webView: JsBridgeWebView? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webView = findViewById(R.id.webView)
        webView?.addJavascriptInterface(JsBridgeToast(this))
        webView?.loadUrl("file:///android_asset/test.html")
}

注意：webView的addJavascriptInterface方法可以多次调用，开发时可以根据业务功能进行解耦，addJavascriptInterface方法支持传递一个或两个参数，传递两个参数时第二个参数无效。

在Js中调用原生方法，参考：test.html

• Js调用原生无参无回调方法

  • Kotlin代码

  @JavascriptInterface
  fun nativeNoArgAndNoCallback(){
      Toast.makeText(context,"调用原生无参数无回调方法",Toast.LENGTH_SHORT).show()
  }
  

  • Java代码

  @JavascriptInterface
  public void nativeNoArgAndNoCallback(){
      Toast.makeText(context,"调用原生无参数无回调方法",Toast.LENGTH_SHORT).show();
  }
  

  • Js代码

  JsBridge.nativeNoArgAndNoCallback();
  

• Js调用原生无参有回调方法

  • Kotlin代码

  @JavascriptInterface
  fun nativeNoArgAndCallback(callback: Callback){
      callback.success()
  }
  

  • Java代码

  @JavascriptInterface
  public void nativeNoArgAndCallback(Callback callback){
      callback.success();
  }
  

  • Js代码

  JsBridge.nativeNoArgAndCallback(function(result){
      alert(JSON.stringify(result));
  });
  

• Js调用原生有参无回调方法

  • Kotlin代码

  @JavascriptInterface
  fun nativeArgAndNoCallback(params:String){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
  }
  

  • Java代码

  @JavascriptInterface
  public void nativeArgAndNoCallback(String params){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show();
  }
  

  • Js代码

  JsBridge.nativeArgAndNoCallback("调用原生有参数无回调方法");
  

• Js调用原生有参有回调方法

  • Kotlin代码

  @JavascriptInterface
  fun nativeArgAndCallback(params:String,callback: Callback){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
      callback.success()
  }
  

  • Java代码

  @JavascriptInterface
  public void nativeArgAndCallback(String params,Callback callback){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show();
      callback.success();
  }
  

  • Js代码

  JsBridge.nativeArgAndCallback("调用原生有参数有回调方法",function(result){
      alert(JSON.stringify(result))
  });
  

• Js调用原生有参有回调方法，且只能回调一次

  • Kotlin代码

  @JavascriptInterface
  fun nativeDeleteCallback(params:String,callback: Callback){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
      callback.success(true)
      Handler().postDelayed(Runnable {
          callback.error(1,"错误回调")
      },3000)
  }
  

  • Java代码

  @JavascriptInterface
  public void nativeDeleteCallback(String params,Callback callback){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show();
      callback.success(true);
      new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {
              callback.error(1,"错误回调");
          }
      },3000);
  }
  

  • Js代码

  JsBridge.nativeDeleteCallback("调用原生方法后删除回调",function(result){
      alert(JSON.stringify(result))
  },function(error){
      alert(JSON.stringify(result))
  });
  

• Js调用原生有参有回调方法，且能回调多次

  • Kotlin代码

  @JavascriptInterface
  fun nativeNoDeleteCallback(params:String,callback: Callback){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show()
      callback.success(false)
      Handler().postDelayed(Runnable {
          callback.error(1,"错误回调")
      },3000)
  }
  

  • Java代码

  @JavascriptInterface
  public void nativeNoDeleteCallback(String params,Callback callback){
      Toast.makeText(context,params,Toast.LENGTH_SHORT).show();
      callback.success(false);
      new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {
              callback.error(1,"错误回调");
          }
      },3000);
  }
  

  • Js代码

  JsBridge.nativeNoDeleteCallback("调用原生方法后不删除回调",function(result){
      alert(JSON.stringify(result))
  },function(error){
      alert(JSON.stringify(error))
  });
  

• Js调用原生同步回调数据

  • Kotlin代码

  @JavascriptInterface
  fun nativeSyncCallback():String{
      return "原生同步回调"
  }
  

  • Java代码

  @JavascriptInterface
  public String nativeSyncCallback(){
      return "原生同步回调";
  }
  

  • Js代码

  var  result = JsBridge.nativeSyncCallback();
  alert(result)
  

注意：被@JavascriptInterface注解的方法，只支持最多两个参数，不论顺序。无参数：代表Js不传递参数过来也不回调；一个参数：可以是传递过来的参数或回调；两个参数：一个为参数，一个是回调。

在原生中调用Js方法，参考：MainActivity

• 原生调用JS无参数无回调

  • Js代码

  function jsNoArgAndNoCallback(){
      alert("原生调用JS无参数无回调");
  }
  

  • Java代码

  webView.callJsFunction("jsNoArgAndNoCallback");
  

  • Kotlin代码

  webView?.callJsFunction("jsNoArgAndNoCallback")
  

• 原生调用Js无参数有回调

  • Js代码

  function jsNoArgAndCallback(callback){
          alert("原生调用JS无参数有回调");
          callback("我是JS回调数据");
  }
  

  • Java代码

  webView.callJsFunction("jsNoArgAndCallback", callback -> Toast.makeText(this, "" + callback, Toast.LENGTH_SHORT).show());
  

  • Kotlin代码

  webView?.callJsFunction("jsNoArgAndCallback", object : JsCallback {
          override fun onCallback(callback: Any) {
              Toast.makeText(this@MainActivityKotlin, "$callback", Toast.LENGTH_SHORT).show()
          }
      })
  

• 原生调用Js有参数无回调

  • Js代码

  function jsArgAndNoCallback(params){
          alert(params);
  }
  

  • Java代码

  webView.callJsFunction("jsArgAndNoCallback", "原生传递过来的参数");
  

  • Kotlin代码

  webView?.callJsFunction("jsArgAndNoCallback","原生传递过来的参数")
  

• 原生调用Js有参数有回调（可回调多次）

  • Js代码

  function jsArgAndCallback(params,callback){
          alert(params);
          callback("我是JS第一次回调数据");
          setTimeout(function() {
                  callback("我是JS第二次回调数据");
          }, 500);
  }
  

  • Java代码

  webView.callJsFunction("jsArgAndCallback", "原生传递过来的参数", callback -> Toast.makeText(this, "" + callback, Toast.LENGTH_SHORT).show());
  

  • Kotlin代码

  webView?.callJsFunction("jsArgAndCallback","原生传递过来的参数", object : JsCallback {
          override fun onCallback(callback: Any) {
              Toast.makeText(this@MainActivityKotlin, "$callback", Toast.LENGTH_SHORT).show()
          }
      })
  

• 调用Js有参数有回调（只能回调一次）

  • Js代码

  function jsArgAndDeleteCallback(params,callback){
          alert(params);
          callback("我是JS第一次回调数据",true);
          setTimeout(function() {
                  callback("我是JS第二次回调数据");
          }, 500);
  }
  

  • Java代码

  webView.callJsFunction("jsArgAndDeleteCallback", "原生传递过来的参数", callback -> Toast.makeText(this, "" + callback, Toast.LENGTH_SHORT).show());
  

  • Kotlin代码

  webView?.callJsFunction("jsArgAndDeleteCallback","原生传递过来的参数", object : JsCallback {
          override fun onCallback(callback: Any) {
              Toast.makeText(this@MainActivityKotlin, "$callback", Toast.LENGTH_SHORT).show()
          }
      })
  

注意：原生调用Js代码，Js的方法最多支持两个参数，无参数：代表原生不传递参数过来也不用回调给原生； 一个参数：可以是参数也可以是回调；两个参数：有序，第一个为参数，第二个为回调，代表原生传递过来参数，且需要回调给原生

如有问题欢迎留言 源码地址