更新记录

1.0.10（2024-03-29）

1. 增加H5视频全屏支持

1.0.9（2024-03-11）

1. 优化接口

1.0.8（2024-01-15）

支持本地数据存储

平台兼容性

前言

wrs-uts-x5webview是腾讯X5内核浏览器组件，支持本地、网络url、h5源码富文本,加载进度、加载结果回调，H5 js、nvue通讯传值、alert、confirm、prompt

为了提供更多API和及时更新X5版本，请不要勾选uniapp提供的“App模块设置” -》 “Android X5 WebView(腾讯TBS)”，否则会有打包报错或API不兼容问题

不熟悉UTS插件集成步骤的同学可以参考https://www.jianshu.com/p/830ccc503e29

支持定制QQ252797991

功能

• 支持本地、网络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"
    @=''
    :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出错
• 加载进度
• onJSData 接收到H5 js发送的数据
• onValueCallback 调用H5函数后，该函数返回的结果

• 方法

X5官网https://x5.tencent.com/docs/index.html 目前开放以下接口，如需更多接口，请联系作者(QQ:252797991)

    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) {

}

• 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)

• 打开本地文件

文件格式,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);
                });

支持定制，联系方式 QQ:252797991

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