WebViewJSBridge更換x5引擎

為了使不同手機在hybrid開發中保證相同的前端效果，對項目中使用的Webview內核統一使用騰訊的x5引擎，本文記錄如何將github上的JSBridge項目修改為基於x5引擎的webiew。

准備

第一步，clone原webview項目

git clone https://github.com/wendux/WebViewJavascriptBridge.git

也可以直接去上述網址下載下來。

第二步，下載騰訊的x5引擎

地址：https://x5.tencent.com/tbs/sdk.html

建立自己的Module

打開Android Studio，點擊左上角file->new->new module->Android Library

新建完成后，將github clone下來的原始項目中的WVJBWebView復制到新建的Module項目中的java下，作為一個java類文件（注意：千萬別復制到了自己的主項目下，這里Module其實是個獨立項目）

將改java類下面所有的webkit，webview相關全部修改為com.tencent.smtt.sdk.xxx，直到沒有報錯，這里一定要全部替換，避免和原生的Android Webkit穿插使用。

注意，這里需要修改gradle配置，直接引用是引用不到的，因為你還沒添加引用到項目。找到build.gradle，這里還要注意，不是主項目的gradle配置，是關於這個module的，可以在AS中看到提示的，我這里能看到3個build.gradle。圖中應該選擇第三個，那就是我們正在制作的Module

配置如下：

plugins {
    id 'com.android.library'
}

android {
    compileSdkVersion 30

    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 2
        versionName "1.0"

        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        consumerProguardFiles "consumer-rules.pro"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    sourceSets {
        main {
            jniLibs.srcDirs = ['libs']
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.aar', '*.jar'], exclude: [])
}


task makeJar(type: Copy) {
    //刪除存在的jar包,這里打包jar包名字是MyUtils.jar
    delete 'build/libs/MyUtils.jar'
    //設置拷貝的文件 from路徑下的文件into到build/libs/路徑下，方便找到
    from('build/intermediates/packaged-classes/debug/')
    //打進jar包后的文件目錄
    into('build/libs/')
    //將classes.jar放入build/libs/目錄下
    //include ,exclude參數來設置過濾
    //（我們只關心classes.jar這個文件）
    include('classes.jar')
    //重命名
    rename('classes.jar', 'MyUtils.jar')
}
makeJar.dependsOn(build)

這樣Module項目中會出現一個jniibs目錄，直接把下載好的x5的jar包復制進去就可以用x5的Webview了。

使用X5版的WebView

如果制作好的X5 Module中沒有錯誤，那么可以制作arr包了，打開右邊gradle工具欄，當前Module下拉，找到Tasks，other，runTasks

arr包在Module的/build/outputs/arr/下，一般選擇release版本即可。

將這個Module的arr引入到主項目中即可，以后的新項目也可以直接引用這個arr，無需再次制作。由於arr是把項目本身引用的包也遞歸打包了，所以騰訊的那個包不再需要在主項目再次引入了。都在arr里了。

修改Layout

把原來的Webview組建改成自己的X5Webview

修改Activity

除了Layout下的xml文件需要把webview組建改了，別忘了還有java（kotlin）下的都需要把相應的webview改為x5的組建。

更多完整版修改可以參考我們的example：

https://github.com/CAS-IICT/iict-hybrid-android