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