更新记录

1.0.15（2024-09-03）

修复setFlags问题

1.0.14（2024-09-02）

优化

1.0.13（2024-09-02）

1. 增加硬件加速相关接口

平台兼容性

前言

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)

目前开放以下接口，如需更多接口，请联系作者

    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
});

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，您的关注就是我们创作的动力！