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