uniapp本地加载腾讯X5浏览器内核插件
概述
TbsX5webviewUTS插件封装腾讯x5webview离线内核加载模块，可以把uniapp的浏览器内核直接替换成Android X5 Webview(腾讯TBS)最新内核，提高交互体验和流畅度。
功能说明
下载SDK插件
1.集成x5内核后哪些页面会由x5内核渲染？
所有plus.webview.create创建的webview
uni-app中所有vue页面
uni-app中的web-view组件
2. uniapp已经提供了x5内核配置，为什么还要自己做加载机制？
因为官方以下加载机制导致的x5浏览器内核加载失败问题:
1). 周五周六（18:00-21:00）服务器维护不支持下载
2). 频繁下载x5浏览器内核的IP会被限流下载
3). 离线打包debug环境下，可会导致下载失败
4). 腾讯x5内核已经进入商业化运营，不交钱根本无法再免费使用
所以要拥有一套自己稳定100%可成功加载内核的机制，实现可随时随地免费加载。
3.X5内核能解决什么问题？
1). x5适配了rom的自定义主题字体，与原生字体保持一致。不会出现一个界面部分字体为原生字体、部分字体为webview字体的问题。之前系统webview在部分手机上不能适配rom自定义主题的字体。（注意：部分设备可能需要重新系统或不支持自定义主题字体）
2). 系统的webview有浏览器兼容问题，低端Android的webview有很多新语法都不支持。使用x5可以拉齐webview内核。对于5+App和wap2app，可以全部拉齐。对于uni-app，由于uni-app自带js引擎，在js和组件层面本身就不存在浏览器兼容问题，只有vue页面的css涉及浏览器兼容问题。如果你想使用比如sticky等新css语法，此时可通过x5拉齐。如果开发者比较注意，不使用太新的语法的话，其实此时x5在这方面没有用处
3). x5内核自带的video实现强于html的video，支持视频格式更多。（这个只能用于5+app和wap2app的html里的自带video，以及uni-app的web-view组件里的video。uni-app默认的video组件本身就是原生的，和x5无关）
4). 远程web页面防劫持是x5内核的一大亮点
4.验证是否使用x5以及x5版本号的方法
3.4.14+以上的HBuilderX，使用 uni.getSystemInfo ，看返回的 browserName 和 browserVersion
低版本HBuilderX 使用 plus.navigator.getUserAgent()
x5内核的UserAgent如下：
Mozilla/5.0 (Linux; Android 11; PEXM00 Build/RKQ1.201217.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.120 MQQBrowser/6.2 TBS/045738
5.注意事项
从应用市场下载插件导入自己项目后，要先制作自定义插件后，才可以运行使用(示例程序已经打好基座，可以直接运行)
插件需在 Android 5.0 版本及以上方可正常使用
腾讯TBS x5内核仅支持Android平台；iOS只能使用自带的WKWebview/UIWebview
尽量使用 HBuilderX 4.0+ 以上的最新版本，以便更好在uni-app和uni-app x中使用uts插件
完整代码示例
<template>
<view>
<view>浏览器内核：{{userAgent}}</view>
<view style="margin-top: 10px;">
<button type="default" @click="loadUrlX5Core()">加载腾讯网络X5内核</button>
</view>
<view style="margin-top: 10px;">
<button type="default" @click="loadLocalX5Core()">加载腾讯本地X5内核</button>
</view>
</view>
</template>
<script>
import { loadUrl , loadLocal } from "@/uni_modules/tbs-x5webview"
export default {
data() {
return {
userAgent: '',//浏览器内核
}
},
created() {
this.userAgent = plus.navigator.getUserAgent()
},
methods:{
loadUrlX5Core(){
//加载网络内核
loadUrl(46514,
'https://saas-camp.mvmyun.com/tbs_core_046514_20230612114949_nolog_fs_obfs_armeabi_release.tbs',
{
//加载进度
onProgressUpdate(progress){
console.log('内核下载进度--->',progress+'%')
},
//加载成功
success(msg){
console.log('success--->',msg)
},
//加载错误
error(code,msg){
console.log('error--->',code,msg)
},
//是否可以加载X5内核
isCanLoadX5(isCan){
console.log('是否可以加载X5内核--->',isCan)
}
})
},
loadLocalX5Core(){
//加载本地的内核 将.tsb文件拷贝到 app-android/assets/tbs/目录下，打包自定义基座后，即可实现本地加载，
//但是打包后apk文件会非常大，而且uniapp云打包会有大小付费限制，建议采用loadUrlX5Core网络加载
loadLocal(
46514,
'/tbs/tbs_core_046514_20230612114949_nolog_fs_obfs_armeabi_release.tbs',
{
onProgressUpdate(progress){
console.log('onProgressUpdate--->',progress)
},
success(msg){
console.log('success--->',msg)
},
error(code,msg){
console.log('error--->',code,msg)
},
isCanLoadX5(isCan){
console.log('isCanLoadX5--->',isCan)
}
}
)
}
}
}
</script>
腾讯X5内核官网地址
