Android中WebView与原生通信

Posted 清风Coolbreeze

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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文件,参考:MainActivityKotlinactivity_main

  • 在xml文件中引入JsBridgeWebView
<com.core.web.JsBridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

当然,如果没有特殊需要使用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的方法最多支持两个参数,无参数:代表原生不传递参数过来也不用回调给原生; 一个参数:可以是参数也可以是回调;两个参数:有序,第一个为参数,第二个为回调,代表原生传递过来参数,且需要回调给原生

以上是关于Android中WebView与原生通信的主要内容,如果未能解决你的问题,请参考以下文章

RN系列:Android原生与RN如何交互通信

Android WebView实现原生与JavaScript的交互

Android WebView实现原生与JavaScript的交互

Android WebView与H5交互汇总

Android WebView与H5交互汇总

Android WebView与H5交互汇总