更新记录
1.0.15(2024-09-03)
修复setFlags问题
1.0.14(2024-09-02)
优化
1.0.13(2024-09-02)
- 增加硬件加速相关接口
平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.7.0,Android:4.4,iOS:不支持,HarmonyOS:不确定 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
前言
wrs-uts-x5webview是腾讯X5内核浏览器组件,支持本地、网络url、h5源码富文本,加载进度、加载结果回调,H5 js、nvue通讯传值、alert、confirm、prompt
为了提供更多API和及时更新X5版本,请不要勾选uniapp提供的“App模块设置” -》 “Android X5 WebView(腾讯TBS)”,否则会有打包报错或API不兼容问题
集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027
X5官网https://x5.tencent.com/docs/index.html
本插件最高支持Android13,如果需要支持Android14以上,请使用插件https://ext.dcloud.net.cn/plugin?id=19022
功能
- 支持本地、网络url、h5源码富文本, 加载进度、加载结果回调
- 支持H5 js、nvue通讯互调传值
- 支持alert、confirm、prompt
- 打开文件
wrs-uts-x5webview组件,使用该组件的页面要使用nvue
<wrs-uts-x5webview ref='webview' :url="url"
@onLoadView="onLoadView" @onJSData="onJSData"
@onValueCallback='onValueCallback' @onPageStarted='onPageStarted'
@onPageFinished="onPageFinished"
@onLoadError="onLoadError"
@onProgress=''
:style="'width:'+width+'px;height:'+height+'px;'"></wrs-uts-x5webview>
属性
- url webview加载地址,可以是本地H5文件地址或远程网络地址(本地文件地址格式需要使用绝对地址如:/xxxxx/xxx/index.html)
- onLoadView 组件加载,所有组件的接口调用都需要在onLoadView里面或之后才能调用
- onPageStarted 开始加载url
- onPageFinished 加载url完成
- onLoadError 加载url出错
- onProgress 加载进度
- onJSData 接收到H5 js发送的数据
- onValueCallback 调用H5函数后,该函数返回的结果
-
方法
- this.$refs.webview.sendDataToJS() 调用H5 JS的函数,并获取函数返回值
如:调用login函数,函数参数是‘123456’字符串 login函数需要是全局函数,即挂在到window节点,如: window["login"] = function(account) {
}
var js = "login('123456')";
this.$refs.webview.sendDataToJS(js);
//
function login(account) {
alert('登录,账号:' + account);
}
如果函数参数是个Object对象,则
var params = {};
params.account = '123456';
var js = "register("+JSON.stringify(params)+")";
this.$refs.webview.sendDataToJS(js);
//
function register(params) {
alert('注册,账号:' + params.account);
}
如果js函数有返回值,则通过onValueCallback回调
- webview的H5 JS发送数据给nvue,会回调 @onJSData事件
var params = {};
params.msg = "你好,我是JS";
if(IOS) {
window.webkit.messageHandlers.bridge.postMessage(params);
} else if (ANDROID) {
var jsonStr = JSON.stringify(params);
window.messageHandlers.bridge(jsonStr);
}
如果参数为空时,iOS需要传个空对象,防止出错,如:
if(IOS) {
window.webkit.messageHandlers.bridge.postMessage({});
} else if (ANDROID) {
window.messageHandlers.bridge();
}
- 焦点接口
this.$refs.webview.requestFocus()
this.$refs.webview.setFocusable(true)
this.$refs.webview.setFocusableInTouchMode(true)
- setLayerType
let layerType = 2 // 0: LAYER_TYPE_NONE 1: LAYER_TYPE_SOFTWARE 2:LAYER_TYPE_HARDWARE
this.$refs.webview.setLayerType(layerType)
<!-- - 打开本地文件,新版本已经不支持此接口,如需支持请联系
文件格式,doc、docx、ppt、pptx、xls、xlsx、pdf、txt、epub,调用QQ浏览器可打开:rar(包含加密格式)、zip(包含加密格式)、tar、bz2、gz、7z(包含加密格式)、doc、docx、ppt、pptx、xls、xlsx、txt、pdf、epub、chm、html/htm、xml、mht、url、ini、log、bat、php、js、lrc、jpg、jpeg、png、gif、bmp、tiff 、webp、mp3、m4a、aac、amr、wav、ogg、mid、ra、wma、mpga、ape、flac
```
var absPath = plus.io.convertLocalFileSystemURL('_www');
// Android获取的absPath以/结尾,iOS获取的absPath不是/结尾
if (absPath.endWith('/')) {
absPath = absPath.substring(0, absPath.length - 1);
}
var localUrl = absPath + "/static/test.docx"
var params = {};
params.filePath = localUrl,
// params.extraParams = {};
x5webviewmgr.openFileReader(params, (resp) => {
this.showMsg("openFileReader resp:" + resp.receiveValue);
});
``` -->
目前开放以下接口,如需更多接口,请联系作者
import {
X5WebViewMgr
} from '@/uni_modules/wrs-uts-x5webview'
- 为了提高内核占比,在初始化前可配置允许移动网络下载内核(大小 40-50 MB)。默认移动网络不下载
X5WebViewMgr.setDownloadWithoutWifi(true)
- 设置开启优化方案,在调用TBS初始化、创建WebView之前进行如下配置
X5WebViewMgr.initTbsSettings({
use_speedy_classloader: true,
use_dexloader_service: true
});
- 内核下载/安装过程中的回调,错误码参考官网
X5WebViewMgr.setTbsListener((resp) => {
var opt = resp.opt;
if (opt == "onDownloadFinish") {
//下载结束时的状态,下载成功时errorCode为100,其他均为失败,外部不需要关注具体的失败原因
var errCode = resp.errCode;
console.log("onDownloadFinish errCode:" + errCode);
} else if (opt == "onInstallFinish") {
// 安装结束时的状态,安装成功时errorCode为200,其他均为失败,外部不需要关注具体的失败原因
var errCode = resp.errCode;
console.log("onInstallFinish errCode:" + errCode);
}
});
- 初始化SDK环境,在App启动后尽可能早地调用初始化接口,进行内核预加载
X5WebViewMgr.initX5Environment((resp) => {
var opt = resp.opt;
if (opt == "onViewInitFinished") {
//x5內核初始化完成的回调,为true表示x5内核加载成功,否则表示x5内核加载失败,会自动切换到系统内核。
// 预初始化结束
// 由于X5内核体积较大,需要依赖wifi网络下发,所以当内核不存在的时候,默认会回调false,此时将会使用系统内核代替
// 内核下发请求发起有24小时间隔,卸载重装、调整系统时间24小时后都可重置
// 调试阶段建议通过 WebView 访问 debugtbs.qq.com -> 安装线上内核 解决
var isX5 = resp.isX5;
console.log("onViewInitFinished 是否是X5内核:" + isX5);
if (!isX5) { // 当前不是X5,则开始下载x5内核
X5WebViewMgr.startDownload();
}
} else if (opt == "onCoreInitFinished") {
// 内核初始化完成,可能为系统内核,也可能为系统内核
console.log("onCoreInitFinished");
}
});
- 当前进程内,SDK是否使用的X5内核,不触发加载、只关注当前状态
var isX5 = X5WebViewMgr.isX5Core();
if(isX5) { // 是x5
}
- 开始下载X5内核
X5WebViewMgr.startDownload();
- 暂停下载X5内核
X5WebViewMgr.pauseDownload();
- 停止下载X5内核
X5WebViewMgr.stopDownload();
- 允许终端设置最低版本的x5内核,默认为 -1 即不限制 参考202112最低版本
let minVersion: 45912
X5WebViewMgr.setCoreMinVersion(minVersion);
- 清除重置整个TBS状态,包括SDK、内核,每次进程最多调用1次
X5WebViewMgr.reset();
- 强制使用系统内核,一般针对存在bug的内核版本或机型才使用 【提醒】调用此接口后,进程内所有WebView不能再恢复为X5内核
X5WebViewMgr.forceSysWebView();
- 获取Tbs sdk的版本号,用于统计及定位问题,每次sdk有修改时会提升版本号
var version = X5WebViewMgr.getTbsSdkVersion();
- 安装离线内核(内核下载地址https://tbs.sjy.tcdnos.com/others/lab/x5/tbs_core_046278_20231108190143_nolog_fs_obfs_arm64-v8a_release.tbs?mkey=lego_ztc&f=00&sche_type=7&cip=61.140.179.137&proto=https&tx_domain=tbs.imtt.qq.com&tx_id=6c9382a8c8) 安装后需要重启app才能生效 方式1:
let coreVersion= 46011
let path = "/xxx/aa.apk" // 内核路径
X5WebViewMgr.installLocalTbsCore(coreVersion, path);
方式2:此方式作者暂时没有试过
var str1 = ""
var str2 = ""
X5WebViewMgr.installLocalQbApk(str1, str2);
- 获取Tbs内核版本号,用于统计及定位问题
var resp = X5WebViewMgr.getTbsVersion();
if(isString(resp)) {
resp = JSON.parse(resp);
}
var version = resp.tbsVersion;
- 获取当前X5加载不起来 or X5 不可用的帮助信息 SDK 44199
var help = X5WebViewMgr.getX5CoreLoadHelp();
- 是否可以加载X5
var canLoadX5 = X5WebViewMgr.canLoadX5();
if(canLoadX5) {
}
- 设置flag
let flags = 16777216 // 16777216: WindowManager.LayoutParams.FLAG_HARDWARE_ACCELERATED
let mask = 16777216
X5WebViewMgr.setFlags(flags, mask, (resp)=>{
let isSuc = resp.flag
});