JsBridge

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:x.x.x'//x.x.x换成最新的版本号
}

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

注意：桥梁类需要实现IJavascriptInterface接口，如果不实现则是普通的桥梁类

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) : IJavascriptInterface  {

    @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需要继承JsBridgeWebView

在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方法支持传递一个或两个参数，传递两个参数时第二个参数无效。但是如果没有实现IJavascriptInterface接口的类第二个参数应该传递自己想要的

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

Name		Name	Last commit message	Last commit date
Latest commit History 23 Commits
app		app
gradle/wrapper		gradle/wrapper
library		library
screenshots		screenshots
.gitignore		.gitignore
README.md		README.md
build.gradle		build.gradle
gradle.properties		gradle.properties
gradlew		gradlew
gradlew.bat		gradlew.bat
settings.gradle		settings.gradle

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

JsBridge

SDK支持

API介绍

如何使用

依赖引入

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

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

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

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

About

Releases 12

Packages

Languages

ChinaLike/JsBridge

Folders and files

Latest commit

History

Repository files navigation

JsBridge

SDK支持

API介绍

如何使用

依赖引入

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

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

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

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

About

Topics

Resources

Stars

Watchers

Forks

Releases 12

Packages 0

Languages

Packages