更新记录

1.0.0（2025-03-30）

1. 支持加载本地H5、网络H5、富文本,加载进度、加载结果回调
2. H5 js、nvue通讯传值、alert、confirm、prompt
3. 支持H5获取经纬度、麦克风、相册选择、文件选择
4. 最新免费腾讯x5内核版本46515，支持到Android 13

平台兼容性

概述

腾讯TBS-X5内核在行业内运营多年，一直有内核加载不稳定的问题，原因主要是成本控制带来的下载带宽流控问题，所以内核下发的操作，最好自己来做。

功能说明

1.集成x5内核后哪些页面会由x5内核渲染？

(1). 只适用于uts-x5webview标签创建的浏览器

(2). 此插件只能在uniappx项目，uniapp项目请移步uniapp项目x5内核离线加载

2. uniapp已经提供了x5内核配置，为什么还要自己做加载机制？

因为官方以下加载机制导致的x5浏览器内核加载失败问题:

(1). 周五周六（18:00-21:00）服务器维护不支持下载

(2). 频繁下载x5浏览器内核的IP会被限流下载

(3). 离线打包debug环境下，可会导致下载失败

(4). 腾讯x5内核已经进入商业化运营，不交钱根本无法再免费使用

所以要拥有一套自己稳定100%可成功加载内核的机制，实现可随时随地免费加载。

3.X5内核能解决什么问题？

(1). x5适配了rom的自定义主题字体，与原生字体保持一致。不会出现一个界面部分字体为原生字体、部分字体为webview字体的问题。之前系统webview在部分手机上不能适配rom自定义主题的字体。（注意：部分设备可能需要重新系统或不支持自定义主题字体）

(2). 系统的webview有浏览器兼容问题，低端Android的webview有很多新语法都不支持。使用x5可以拉齐webview内核。对于5+App和wap2app，可以全部拉齐。对于uni-app，由于uni-app自带js引擎，在js和组件层面本身就不存在浏览器兼容问题，只有vue页面的css涉及浏览器兼容问题。如果你想使用比如sticky等新css语法，此时可通过x5拉齐。如果开发者比较注意，不使用太新的语法的话，其实此时x5在这方面没有用处

(3). x5内核自带的video实现强于html的video，支持视频格式更多。（这个只能用于5+app和wap2app的html里的自带video，以及uni-app的web-view组件里的video。uni-app默认的video组件本身就是原生的，和x5无关）

(4). 远程web页面防劫持是x5内核的一大亮点

(5). 支持加载本地H5、网络H5、富文本,加载进度、加载结果回调

(6). H5 js、nvue通讯传值、alert、confirm、prompt

(7). 支持H5获取经纬度、麦克风、相册选择、文件选择

(8). 最新免费腾讯x5内核版本46515，支持到Android 13

4.验证是否使用x5以及x5版本号的方法

3.4.14+以上的HBuilderX，使用 uni.getSystemInfo ，看返回的 browserName 和 browserVersion 低版本HBuilderX 使用 plus.navigator.getUserAgent()

x5内核的UserAgent如下：

Mozilla/5.0 (Linux; Android 11; PEXM00 Build/RKQ1.201217.002; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/77.0.3865.120 MQQBrowser/6.2 TBS/045738

5.注意事项

(1).从应用市场下载插件导入自己项目后，要先制作自定义插件后，才可以运行使用(示例程序已经打好基座，可以直接运行)

(2).插件需在 Android 5.0-Android13 版本可正常使用

(3).腾讯TBS x5内核仅支持Android平台；iOS只能使用自带的WKWebview/UIWebview

(4).尽量使用 HBuilderX 4.0+ 以上的最新版本，以便更好在uni-app和uni-app x中使用uts插件

(5).CPU类型配置不支持“x86”，建议仅配置“armeabi-v7a”和“arm64-v8a”否则可能无法正常使用X5内核

(6).因为项目中已经包含了webview-x5的所有依赖依赖

(7).因为官方强制所有插件上架必须以UTS集成方式发布，如果您是uni小程序sdk集成方式(即以Android工程为主体的自定义打包)的项目，或者是以传统的uni原生插件集成方式集成(即nativeplugins方式)的项目 请通过DCloud IM私信留言，提供nativeplugins集成的支持。

(8).官方云打包100兆以上大小有收费限制，自定义打包请适当注意体积大小，推荐采用网络加载内核方式(即loadUrlX5Core方法加载x5内核)，将uni_modules\tbs-x5webview\utssdk\app-android\assets文件夹删掉再进行自定义打包 ，如自定义打包、集成、调试遇到任何困难，请及时通过DCloud IM私信留言，提供在线支持。

uts-x5webview组件的属性&事件

<uts-x5webview ref='webview' :url="url" :progressColor='progressColor'
    @onLoadView='onLoadView'
    @onPageStarted='onPageStarted' 
    @onPageFinished='onPageFinished'
    @onProgress=''
    @onJSData='onJSData'
    @onValueCallback='onValueCallback'
    @onLoadError='onLoadError' 
    :style="width:300px;height:600px;"></uts-x5webview>

x5webview-uniappx的方法

引入插件

 import { loadUrl, loadLocal, checkAbiType, canLoadX5 } from "@/uni_modules/x5webview-uniappx"

组件接口

const utsX5webview = this.$refs["webview"] as UtsX5webviewElement

1.utsX5webview.sendDataToJS() 调用H5页面的JS函数,通过onValueCallback返回值

如：调用login函数，函数参数是‘123456’字符串 login函数需要是全局函数，即挂在到window节点 如： window["login"] = function(account) {}

如果js函数有返回值，则通过onValueCallback回调

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

3.焦点接口

utsX5webview.requestFocus()
utsX5webview.setFocusable(true)
utsX5webview.setFocusableInTouchMode(true)  

4.获取浏览器内核接口 getUserAgentString

this.userAgent = utsX5webview.getUserAgentString();
console.log('userAgent------> ',this.userAgent ) 

5.判断是否是x5内核 getIsX5Core

let isX5Core = utsX5webview.getIsX5Core()
console.log('isX5Core------> ',isX5Core ) 

腾讯X5内核官网地址

长期维护，持续更新，提供终身免费技术支持

本插件已稳定运行3年，累计为20万多商户及个人提供服务，请您放心使用