Android integrates JsBridge to achieve interaction with H5

Two ways to integrate JsBridge in Android projects

Add permissions in AndroidManifest.xml

 
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

Method 1: By adding dependencies in app’s build.gradle

1. Add the code under repositories of the build.gradle file in the project root directory, as follows:

repositories {
    // 确保已经添加，不然无法正常使用依赖
    maven { url "https://jitpack.io" }
}

2. Add dependency in the build.gradle file of the app of the project, as follows:

dependencies {
    implementation 'com.github.lzyzsd:jsbridge:1.0.4'
}

 

 3. Use BridgeWebView in the xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WebViewImp">

    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/bridgeImp"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

4. Load the url in the code

bridgeImp.loadUrl("https://www.csdn.net/")

Method 2: Copy source code integration, you can use Tencent x5WebView to replace the native WebView

Note: You need to integrate the Tencent x5 browsing service jar package into the project lib folder, and Add As Library, as shown below

After the Add As Library is added, the build.gradle file of the app will automatically add dependencies, as follows

implementation files('libs\\tbs_sdk_thirdapp_v4.3.0.39_43939_sharewithdownloadwithfile_withoutGame_obfs_20200713_223411.jar')

Next is the Js file and source code related to JsBridge

1. WebViewJavascriptBridge.js download address

2. JsBridge source code download address

3. Download address of JsBridge example Demo.html

After downloading the WebViewJavascriptBridge.js and Demo.html files, copy them to the assets folder of the project, as shown in the figure below. If there is no assets folder, you can create a new one

Unzip and copy the JsBridge source code to the project, as shown in the figure

Open BridgeWebView and you can see that WebView is already imported Tencent's WebView

Communication interaction code writing:

Method registration of calling each other with Js

private fun initView() {

        //加载本地assets文件夹当中的html文件
        bridgeSource.loadUrl("file:android_asset/demo.html")
        //注册handler提供给Js调用
        bridgeSource.registerHandler("submitFromWeb", BridgeHandler { data, function ->

            Toast.makeText(this, data, Toast.LENGTH_SHORT).show()
            //如果Js定义的该handler需要返回值，可以使用该回调
            function.onCallBack("回传给Js的数据")
        })

        bridgeSource.callHandler(
            "functionInJs", "安卓数据"
        ) { data -> Toast.makeText(this@WebViewSource, data, Toast.LENGTH_SHORT).show() }
    }

Precautions after integration:

1. When using BridgeWebView to load url, some pages show blank problems, you can try to add the following settings:

That is, whether to enable local DOM storage, Android turns off this function by default, so on H5 pages with persistent local storage data, if you do not enable this setting, the loaded page will not be displayed.

//Set WebView to support DomStorage storage
webView.getSettings().setDomStorageEnabled(true);