更新记录

1.0.0（2024-06-28）

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

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0，Android：5.0，iOS：不支持，HarmonyNext：不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

前言

腾讯X5内核浏览器webView组件(自运营版)

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

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

集成步骤

  • 登录TBS官网控制台https://x5.tencent.com/tbs/x5/apps/list
  • 创建应用，注意创建应用的时候要求上传apk，官方会解析apk，绑定apk的包名和签名
  • 点击进入应用详情，在X5网页引擎自运营版-》订单详情-》创建试用订单,复制LicenseKey
  • 点击进入应用详情，在X5网页引擎自运营版-》X5引擎版本列表-》下载对应的内核(一般使用64位的动态版)
  • 拷贝demo示例的AndroidManifest.xml文件到项目里
  • 把下载的内核复制到static文件夹下
  • 替换UTSX5Tbs.setUp({})接口的LicenseKey
  • 然后集成本插件，集成插件步骤请参考https://www.cnblogs.com/wenrisheng/p/18323027

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 = {}
// x5平台系统的licenseKey
params.value = "xxxxx"
UTSX5Tbs.setUp(params)
  • 同意使用隐私

let mode = "STANDARD_IMPL" // OFFICIAL_IMPL、SELF_IMPL、STANDARD_IMPL、NOT_USE
UTSX5Tbs.usePrivateCDN(mode)
  • 设置安装x5内核回调

UTSX5Tbs.setX5DownloaderCallback((resp) => {
    let opt = resp.opt
    switch (opt) {
    case "onFinished":
    break;
    case "onFailed":
    break;
})
  • 设置目标X5内核版本，用于校验

let X5_CORE_VERSION = 46909
UTSX5Tbs.setTargetX5Version(X5_CORE_VERSION)
  • 安装本地x5内核

var filePath = plus.io.convertLocalFileSystemURL(
    '_www/static/tbs_core_046909_20231227151236_nolog_fs_obfs_arm64-v8a_release.tbs')
UTSX5Tbs.installX5(filePath)
  • x5授权

let needAutoSave = true
UTSX5Tbs.authenticateX5(needAutoSave, (authResp) => {
    let authOpt = authResp.opt
    switch (authOpt) {
    case "onResponse":
    break;
    case "onFailed":
    break;
})
  • 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();

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

}

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

隐私、权限声明

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

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-feature android:name="android.hardware.camera" android:required="false" /> <uses-feature android:name="android.hardware.audio.low_latency" android:required="false"/> <uses-feature android:name="android.hardware.audio.pro" android:required="false"/> <uses-feature android:name="android.hardware.microphone" android:required="false"/> <uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> <uses-permission android:name="android.permission.MICROPHONE" /> <!-- WebView定位功能权限 --> <!-- 粗略定位权限，允许一个程序通过网络获取粗略的位置 --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <!-- 精确定位权限，允许一个程序访问精确位置(GPS定位) --> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <!-- debugtbs.qq.com 安装线上内核需要权限--> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <!-- TBS基础权限需求 --> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

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

插件使用的 XX SDK会采集数据，详情可参考：https://other-sdk.com/

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

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

评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

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

加载更多...