DCloud_Android_ST
DCloud_Android_ST
  • 发布:2020-01-06 19:20
  • 更新:3 天前
  • 阅读:13007

DCloud App集成 X5 内核(腾讯浏览服务TBS)说明

分类:HTML5+

腾讯TBS x5内核仅支持Android平台。iOS只能使用自带的WKWebview

以下说明文中的“腾讯TBS x5内核“精简为“x5内核”。
集成x5内核说明:

  1. 首先你需要升级HBuilderX2.5.3 版本或更高。
  2. 按以下说明配置相关应用的manifest.json。然后云打包(含自定义基座)才可生效。

集成x5内核后哪些页面会由x5内核渲染?

  1. 所有plus.webview.create创建的webview。
  2. uni-app中所有vue页面。
  3. uni-app中的web-view组件。

uni-app项目

manifest.json配置"Webview-x5"模块具体如下:

"app-plus"{  
    "modules" : {  
        ...,  
        ...,  
        ...,  
        "Webview-x5": {}  
    }  
}

5+ App项目

manifest.json配置"Webview-x5"模块具体如下:

"permissions":{  
    ...,  
    ...,  
    ...,  
    "Webview-x5": {}  
}

离线打包配置

离线打包集成x5教程

Tips

NDK 配置时请去除x86、64位cpu的配置 建议仅配置"armeabi-v7a" 否则可能无法正常使用X5内核

unimp小程序打包配置

unimp小程序集成x5教程

Tips

NDK 配置时请去除x86、64位cpu的配置 建议仅配置"armeabi-v7a" 否则可能无法正常使用X5内核

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

集成X5内核的注意事项:

  1. x5没有64位so库,无法提交Google Play。
  2. x5不支持在PC模拟器上运行。一切真机为主。
  3. x5内核对webview嵌套支持的不友好。使用x5渲染的页面尽量不要使用webview嵌套(父子页面等)容易出现动画卡顿等现象。
  4. 因x5加载内核机制问题,云打包APK第一次安装运行可能x5还没有下载,此时不是x5内核渲染页面,而是系统webview渲染页面。但x5下载完毕后,杀掉进程重新运行,就会使用x5内核渲染页面。
  5. 并非所有手机都有x5内核,当手机端没有时x5内核时,App启动后会先下载内核,在x5加载成功前,调用webview仍然是系统webview。
  6. html5 嵌入iframe视频fixed定位会导致应用闪退
  7. 部分系统(华为)修改字体后不会重启系统。导致x5页面不能够立即更换字体库重新进行渲染。需要杀掉进程重新启动应用(back退出应用无效)才可以重置字体库进行页面渲染。
  8. APK本身已经集成了X5才能通过wgt升级。如果apk本身没集成X5则不可以通过WGT升级支持X5。需要改为APK升级!
  9. 可通过plus.navigator.getUserAgent判断UA中是否包含MQQBrowser关键字判断当前webview是否为X5渲染。 HX2.6.16+支持
  10. x5内核渲染页面的滚动条。会随着页面内容的长短显示滚动滑块。可按住滚动滑块拖动实现快速滚动。与普通webview滚动条有差异。
4 关注 分享
1152155861@qq.com 772899871@qq.com gvbkxc97153@027168.com 1736715515@qq.com

要回复文章请先登录注册

1007352502@qq.com

1007352502@qq.com

回复 DCloud_Android_ST :
好的,谢谢
3 天前
DCloud_Android_ST

DCloud_Android_ST (作者)

回复 1007352502@qq.com :
发一个ask bug反馈 附件demo 链接贴出来就行别在这里发太多信息
3 天前
1007352502@qq.com

1007352502@qq.com

感谢您的回复。页面中我删除了所有样式(页面样式和app.vue中的公共样式),在page.json的单页面配置和全局配置中都加了`"scrollIndicator":"none"`,页面中写了100个循环测试了一下,还是存在x5特有的滚动条和滑块:
```html
<template>
<view class="">
<view class="" v-for="item in 100" :key="item">
fdafdasfsdfds
</view>
</view>
</template>
```
```js
"globalStyle": { //全局配置
"scrollIndicator":"none", // 不显示滚动条
"app-plus":{
"scrollIndicator":"none" //全局 在APP页面都不显示滚动条
}
}
```
安卓和ios,页面是vue,没使用任何插件和样式,编辑器版本:2.7.14,已开启`"Webview-x5" : {},`。
3 天前
DCloud_Android_ST

DCloud_Android_ST (作者)

回复 维羊 :
你可以单独发一个ask 把示例发出来 我们会安排人员测试看下问题原因
3 天前
维羊

维羊

回复 DCloud_Android_ST :
我不明白这个scrollIndicator 是设置在page.json中还是页面中,如果是在page.json中,我们已经设置过,还是不能去除x5模式下页面出现的滚动条滑块.
3 天前
DCloud_Android_ST

DCloud_Android_ST (作者)

回复 cuijixiong@vip.qq.com :
暂时无法实现你的需求。后期会优化该问题
4 天前
cuijixiong@vip.qq.com

cuijixiong@vip.qq.com

回复 DCloud_Android_ST :
产品用到了一些es6语法 低版本系统只能上x5 首次启动系统自带web运行失败体验很差 如何判断x5已经下载完毕 然后主动重启程序
4 天前
cuijixiong@vip.qq.com

cuijixiong@vip.qq.com

产品用到了一些es6语法 低版本系统只能上x5 首次启动系统自带web运行失败体验很差 如何判断x5已经下载完毕 然后主动重启程序
4 天前
DCloud_Android_ST

DCloud_Android_ST (作者)

回复 1007352502@qq.com :
可以设置页面的scrollIndicator 属性none
6 天前
1007352502@qq.com

1007352502@qq.com

回复 DCloud_Android_ST :
您好,感谢您的回复。是在vue页面有问题,且页面中没使用:scroll-view、web-view,就是单纯的view标签写的列表。会出现滚动条,通过page.json和css都没法取消滚动条。会随着页面内容的长短显示滚动滑块。可按住滚动滑块拖动实现快速滚动。与普通webview滚动条有差异。这样会导致App中长页面出现滚动条而且快速滑动会出现白色小方框滑动条。
希望,可以取消滚动条。
6 天前