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

WebViewJSBridge更换x5引擎

新建完成后,将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

WebViewJSBridge更换x5引擎
配置如下:

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

WebViewJSBridge更换x5引擎
arr包在Module的/build/outputs/arr/下,一般选择release版本即可。

将这个Module的arr引入到主项目中即可,以后的新项目也可以直接引用这个arr,无需再次制作。由于arr是把项目本身引用的包也递归打包了,所以腾讯的那个包不再需要在主项目再次引入了。都在arr里了。

修改Layout

把原来的Webview组建改成自己的X5Webview
WebViewJSBridge更换x5引擎

修改Activity

除了Layout下的xml文件需要把webview组建改了,别忘了还有java(kotlin)下的都需要把相应的webview改为x5的组建。

更多完整版修改可以参考我们的example:

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

WebViewJSBridge更换x5引擎

上一篇:js+php分片上传大文件代码


下一篇:Flink Native Kubernetes实战