【每日学点鸿蒙知识】RichText展示问题、slider组件内置间距、WebView性能优化、AVSession错误

1、HarmonyOS RichText 展示问题?
复制代码
build() {
  Column() {
    Row({space:10}) {
      Column() {
        RichText(  this.item.title ?? "" )
          .width("100%")
          .height(80)

        Text(this.item.desc ?? "")
          .fontSize(12)
          .fontColor(0x9e9e9e)

      }
      .margin({left: 10})
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.SpaceAround)
      .height('100%')

      Blank()

      Image(this.item.banner ?? "")
        .width(this.picWidth)
        .objectFit(ImageFit.Fill)
        .height( this.picWidth * 0.75 )
        .borderRadius(4)
    }
    .padding({left:20,right:20})
    .height( 20 + this.picWidth * 0.75 )
    .width("100%")

  }
}

RichText 传入内容, 显示的文字太小,RichText 组件还会滑动,如何能正常展示

RichText字体大小可以通过style设置 例如<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px<p>移动设备的视口默认值大小为980px,默认值可以确保大部分网页在移动设备下可以正常浏览。如果RichText组件宽度低于这个值,content内部的HTML则可能会产生一个可以滑动的页面被RichText组件包裹。如果想替换默认值,可以在content中添加以下标签。

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-richtext-V5#ZH-CN_TOPIC_0000001884757834

2、HarmonyOS 如何取消slider组件内置的左右间距?

Slider无默认padding。

当Slider为水平滑动条时,Slider默认高度为40vp,宽度为父容器的宽度,滑动条居中显示,左右间距为分别为10vp,若设置padding,padding不会覆盖左右间距。

当Slider为竖直滑动条时,Slider默认宽度为40vp,高度为父容器的高度,滑动条居中显示,上下间距为分别为6vp,若设置padding,padding不会覆盖上下间距。

不能取消slider组件内置的左右间距 滑块在两端的时候需要在组件内,所以必须留有间距

3、HarmonyOS 大量webview加载远程H5页面方案设计建议?

WebView中,双向交互可以使用JSBridge技术也可以使用端口通信技术,可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/arkweb-api-V5

相关案列可参考:https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/tutorials_NEXT-SelectContact

4、HarmonyOS AVSession 创建成功后,通过 setAVMetadata 设置元数据,抛 401 错误码?

401报错为输入参数类型错误,请检查输入的参数类型是否传递有误 目前参数都是加了类型强校验的,如果没有值的话不要去设置对应的字段

5、HarmonyOS Webview页面加载前会有空白等待的阶段 怎么解决?

使用预加载,在预测到将要加载的页面之前调用,提前下载页面所需的资源,包括主资源子资源,但不会执行网页JavaScript代码或呈现网页,以加快加载速度。

详细参考预加载官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#prefetchpage10

或者参考如下web场景性能优化:https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-web-develop-optimization-V5

常见的优化方式。

  • Web页面加载优化:Web页面加载速度对于用户体验至关重要,提高页面加载的速度可以直接提升应用的流畅性。
  • JSBridge:通过JSBridge通信,可以解决ArkTS环境的冗余切换,避免造成UI阻塞。
  • 同层渲染:通过将页面元素分层渲染,可以减少页面重绘和重排的次数,提高页面渲染效率。

ArkWeb(方舟Web)为开发者提供了优化页面显示速度的方法。通过采取这些优化方式,开发者可以改善应用程序的性能和用户体验,使用户能够更快速、更流畅地浏览Web页面,从而提升用户满意度和留存率。

相关推荐
Damon小智3 分钟前
基于华为开发者空间的Open WebUI数据分析与可视化实战
华为·ai·数据挖掘·数据分析
小高0079 分钟前
🚀React 更新界面全流程:从 setState 到 像素上屏
前端·react.js·面试
万少16 分钟前
HarmonyOS 读取系统相册图片并预览
前端·harmonyos·客户端
林太白19 分钟前
CSS长度单位px、rem、em、vh、vw
前端·javascript·css
王者鳜錸22 分钟前
VUE+SPRINGBOOT从0-1打造前后端-前后台系统-登录实现
前端·vue.js·spring boot
oioihoii37 分钟前
CRT调试堆检测:从原理到实战的资源泄漏排查指南
开发语言·前端·c++·c
不如吃茶去42 分钟前
开源推荐:LocalSqueeze - 隐私优先的本地图片压缩工具
前端·react.js·electron
anyup42 分钟前
uView Pro 正式开源!70+ Vue3 组件重构全记录,助力 uni-app 组件生态,你会选择吗?
前端·架构·uni-app
一点一木44 分钟前
PromptPilot 与豆包新模型:从图片到视频,解锁 AI 新玩法
前端·人工智能