AndroidはJsBridgeを統合して、H5との相互作用を実現します

JsBridgeをAndroidプロジェクトに統合する2つの方法

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"/>

方法1：アプリのbuild.gradleに依存関係を追加する

1.次のように、プロジェクトルートディレクトリのbuild.gradleファイルのリポジトリの下にコードを追加します。

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

2.次のように、プロジェクトのアプリのbuild.gradleファイルに依存関係を追加します。

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

3.xmlファイルでBridgeWebViewを使用します

<?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.コードにURLをロードします

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

方法2：ソースコード統合をコピーします。Tencentx5WebViewを使用してネイティブWebViewを置き換えることができます

注：以下に示すように、Tencentx5ブラウジングサービスjarパッケージをプロジェクトのlibフォルダーとAddAsLibraryに統合する必要があります。

[名前を付けてライブラリを追加]が追加されると、アプリのbuild.gradleファイルは次のように依存関係を自動的に追加します

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

次は、JsBridgeに関連するJsファイルとソースコードです。

1. WebViewJavascriptBridge.jsダウンロードアドレス

2. JsBridgeソースコードのダウンロードアドレス

3. JsBridge例Demo.htmlのダウンロードアドレス

WebViewJavascriptBridge.jsファイルとDemo.htmlファイルをダウンロードしたら、次の図に示すように、プロジェクトのアセットフォルダーにコピーします。アセットフォルダーがない場合は、新しいフォルダーを作成できます。

図に示すように、JsBridgeソースコードを解凍してプロジェクトにコピーします

BridgeWebViewを開くと、WebViewがすでにTencentのWebViewにインポートされていることがわかります。

通信相互作用コードの記述：

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() }
    }

統合後の注意事項：

1. BridgeWebViewを使用してURLをロードするときに、一部のページに空白の問題が表示される場合は、次の設定を追加してみてください。

つまり、ローカルDOMストレージを有効にするかどうかにかかわらず、Androidはデフォルトでこの機能を無効にするため、永続的なローカルストレージデータがあるH5ページでは、この設定を有効にしないと、ロードされたページは表示されません。

// DomStorageストレージをサポートするようにWebViewを設定します
webView.getSettings（）。setDomStorageEnabled（true）;