为了使不同手机在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: