更新记录

1.0.0（2024-06-28）

• 支持加载本地H5、网络H5、富文本,加载进度、加载结果回调
• H5 js、nvue通讯传值、alert、confirm、prompt
• 支持H5获取经纬度、麦克风、选择文件
• Android 14以上系统也支持

平台兼容性

前言

腾讯X5内核浏览器webView组件(公网版)

• 支持加载本地H5、网络H5、富文本,加载进度、加载结果回调
• H5 js、nvue通讯传值、alert、confirm、prompt
• 支持H5获取经纬度、麦克风、选择文件
• Android 14以上系统也支持

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

• 自运营版请使用插件https://ext.dcloud.net.cn/plugin?id=19037
• 公网版的x5内核是在线下载的，自运营版的内核可以提前集成到app里后期自己管理升级
• 本插件是X5网页引擎公网版，SDK版本44358

集成步骤

• 登录TBS官网控制台https://x5.tencent.com/tbs/x5/apps/list
• 创建应用，注意创建应用的时候要求上传apk，官方会解析apk，绑定apk的包名和签名
• 点击进入应用详情，在X5网页引擎公网版-》订单详情-》创建试用订单
• 点击进入应用详情，在X5网页引擎公网版-》版本配置管理-》新建配置-》套件类型选择x5webview64,版本选择46909(或者最新版本)，创建后下载配置
• 拷贝demo示例的nativeResources文件集和AndroidManifest.xml文件到项目里
• 把nativeResources/android/assets/tbs/config.tbs文件替换为刚刚下载的配置文件
• manifest.json里把Android最低版本改成21，即： "minSdkVersion" : 21
• 然后集成本插件，不熟悉插件集成步骤的同学可以参考https://www.jianshu.com/p/830ccc503e29

支持定制QQ252797991

wrs-uts-x5tbswebview组件,使用该组件的页面要使用nvue

<wrs-uts-x5tbswebview ref='webview' :url="url" @onLoadView="onLoadView" @onJSData="onJSData"
    @onValueCallback='onValueCallback' @onPageStarted='onPageStarted' @onPageFinished="onPageFinished"
    @onLoadError="onLoadError" @onProgress=''
    :style="'width:'+width+'px;height:'+height+'px;'" @onAsynchronousAPIResult='onAsynchronousAPIResult'></wrs-uts-x5tbswebview>

属性&事件

• url webview加载地址，可以是本地H5文件地址或远程网络地址(本地文件地址格式需要使用绝对地址如：/xxxxx/xxx/index.html)
• onLoadView 组件加载，所有组件的接口调用都需要在onLoadView里面或之后才能调用
• onPageStarted 开始加载url
• onPageFinished 加载url完成
• onLoadError 加载url出错
• onProgress 加载进度
• onJSData 接收到H5 js发送的数据
• onValueCallback 调用H5函数后，该函数返回的结果
• onAsynchronousAPIResult 由于uniapp的组件不支持API结果同步返回，调用有返回结果的API时，API结果都由onAsynchronousAPIResult异步返回

组件接口

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

方法

import {
    UTSX5Tbs
} from "@/uni_modules/wrs-uts-x5tbswebview"

• 初始化

let params = {}
// 不传tbsFilePath则默认加载nativeResources/android/assets/tbs/config.tbs文件
// params.tbsFilePath = plus.io.convertLocalFileSystemURL("_www/static/config.tbs")
UTSX5Tbs.setUp(params)

• x5内核在线下载后，无需重启app即可生效

UTSX5Tbs.enableX5WithoutRestart()

• 设置x5内核下载进度回调

UTSX5Tbs.registerListener((resp) => {
    let opt = resp.opt
    switch (opt) {
        case "":
            let progress = resp.progress
            console.log("x5内核下载进度:" + progress)
            break;
        case "onFinished":
            console.log("x5内核下载完毕")
            // 预初始化X5内核
            UTSX5Tbs.preInit((initResp) => {
                let mOpt = initResp.opt
                switch (mOpt) {
                    case "onCoreInitFinished":
                        console.log("内核初始化完毕")
                        break;
                    case "onViewInitFinished":
                        let isX5Core = initResp.isX5Core
                        console.log("WebView验证完毕 isX5Core:" + isX5Core)
                        break;
                    default:
                        break;
                }
            })
            break;
        case "onFailed":
            console.log("x5内核下载失败:" + JSON.stringify(resp))
            break;
        default:
            break;
    }
})

• 获取x5内核版本号

let tbsVersion = UTSX5Tbs.getTbsVersion()

• 判断当前授权是否过期

let needUpdateLicense = UTSX5Tbs.needUpdateLicense()

• 开始安装并尝试授权X5

UTSX5Tbs.startInstall()

• 取消安装X5

UTSX5Tbs.cancelInstall()

• 预初始化X5内核

UTSX5Tbs.preInit((initResp) => {
    let mOpt = initResp.opt
    switch (mOpt) {
        case "onCoreInitFinished":
            console.log("内核初始化完毕")
            break;
        case "onViewInitFinished":
            let isX5Core = initResp.isX5Core
            console.log("WebView验证完毕 isX5Core:" + isX5Core)
            break;
        default:
            break;
    }
})

• 允许终端设置最低版本的x5内核，默认为 -1 即不限制 参考202112最低版本

let minVersion: 45912
UTSX5Tbs.setCoreMinVersion(minVersion);

• 清除重置整个TBS状态，包括SDK、内核，每次进程最多调用1次

UTSX5Tbs.reset();

• 强制使用系统内核,一般针对存在bug的内核版本或机型才使用

UTSX5Tbs.forceSysWebView();

• 安装离线内核(内核下载地址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) 此接口作者暂未试过，公网版sdk不一定支持 方式1:

let coreVersion= 46011
let path = "/xxx/aa.apk"  // 内核路径
UTSX5Tbs.installLocalTbsCore(coreVersion, path);

方式2:此方式

var str1 = ""
var str2 = ""
UTSX5Tbs.installLocalQbApk(str1, str2);

• 获取Tbs内核版本号，用于统计及定位问题

var tbsVersion = UTSX5Tbs.getTbsVersion();

• 获取当前X5加载不起来 or X5 不可用的帮助信息

var help = UTSX5Tbs.getX5CoreLoadHelp();

• 是否可以加载X5

var canLoadX5 = UTSX5Tbs.canLoadX5();
if(canLoadX5) {

}

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