uniapp本地加载腾讯X5浏览器内核插件

概述

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

功能说明

下载SDK插件

功能说明

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

(1). 所有plus.webview.create创建的webview

(2). uni-app中所有vue页面

(3). uni-app中的web-view组件

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内核的一大亮点

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-release.arr依赖，在manifest.json文件中，“App模块配置”不要勾选“Android X5 Webview(腾讯TBS)”：

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

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

完整代码示例

<template>
	<view>
		<view style="display: flex;margin:10px;flex-direction: column;">
			<view><text style="font-weight: bold;">浏览器内核：</text>{
  {userAgent}}</view>
			<view><text style="font-weight: bold;">系统CPU架构：</text>{
  {supportedAbis}}</view>
			<view><text style="font-weight: bold;">系统版本：</text>{
  {osName}}</view>
			<view><text style="font-weight: bold;">x5版本号：</text>{
  {x5Version}}</view>
			<view><text style="font-weight: bold;">x5下载地址：</text>{
  {x5Url}}</view>
			<view><text