Code Monkey home page Code Monkey logo

jsbridgekt's Introduction

JsBridgeKt库

我尝试将lzyzsdJsBridge库转为了kotlin版本。内置的交互协议还是一样的,并且和WebView做了解耦,无须固定继承BridgeWebView,你可以自己决定继承Android原生的WebView或者腾讯X5内核的WebView,实现和配置JsBridgeManager即可。

语言

目录

1、引用方式

由于jcenter删库跑路,请大家添加mavenCentral依赖

repositories {
    ...
    mavenCentral()
    ...
}

在你需要调用的module里的dependencies中加入以下依赖

implementation 'ink.lodz:jsbridge-kt:1.0.5'

2、Android端使用方式

如果你想要快捷的使用Android原生的WebView来加载页面,我提供了SimpleBridgeWebView,内部实现了JS交互逻辑,使用方法如下:

1)在布局文件中使用SimpleBridgeWebView

 <com.lodz.android.jsbridgekt.SimpleBridgeWebView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

2)发送给JS

指定接口名xxxx将数据data发送给js

val msg = "12345"
webView.send("xxxx", msg) {data->
    // 这里接收JS返回的数据            
}

数据data发送给js,不指定具体接口名,使用内置默认接口名

val msg = "12345"
webView.send(data = msg)

3)订阅JS来的数据

接收JS发送来的接口名为xxxx的数据

webView.register("xxxx") { data, listener ->
    // data是JS发送过来的数据
    // listener是回调对象,可将本次数据的处理结果返回给JS
    listener.callbackJs("app get param")
}

接收JS发送来的使用内置默认接口名的数据

webView.register { data, listener ->
    // data是JS发送过来的数据
    // listener是回调对象,可将本次数据的处理结果返回给JS
    listener.callbackJs("app get param")
}

如果你想要自定义自己的WebView,可以使用以下方法来实现JS交互:

// 继承你需要的WebView,实现WebViewJavascriptBridge接口
class CustomWebView : WebView, WebViewJavascriptBridge {
    // 声明JsBridgeManager对象
    private lateinit var mJsBridgeManager :JsBridgeManager
    
    init {
        mJsBridgeManager = JsBridgeManager(this) // 对象赋值
        webViewClient = BridgeWebViewClient(this) //这步非常重要,JS的拦截逻辑是在BridgeWebViewClient里实现的
    }
    
    // 实现接口方法
    override fun send(apiName: String, data: String, function: OnCallBackJsListener?) {
        mJsBridgeManager.send(apiName, data, function)
    }

    override fun register(apiName: String, handler: OnReceiveJsListener) {
        mJsBridgeManager.register(apiName, handler)
    }

    override fun handlerJsReturnData(url: String) {
        mJsBridgeManager.handlerJsReturnData(url)
    }

    override fun registerBridgeReceive() {
        mJsBridgeManager.registerBridgeReceive()
    }
}

3、JavaScript使用方式

前端的调用方式可以参考JsBridge.js这个文件,里面同样包含了发送和订阅。

扩展

License

Copyright 2022 Lodz

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

jsbridgekt's People

Contributors

lz9 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

jsbridgekt's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.