更新记录

1.0.15(2024-09-03)

修复setFlags问题

1.0.14(2024-09-02)

优化

1.0.13(2024-09-02)

  1. 增加硬件加速相关接口
查看更多

平台兼容性

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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

网络、读写权限

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的 XX SDK会采集数据,详情可参考:https://x5.tencent.com/docs/index.html

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问