在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
<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的方法最多支持两个参数，无参数：代表原生不传递参数过来也不用回调给原生；一个参数：可以是参数也可以是回调；两个参数：有序，第一个为参数，第二个为回调，代表原生传递过来参数，且需要回调给原生