【每日学点鸿蒙知识】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页面,从而提升用户满意度和留存率。

相关推荐
余道各努力,千里自同风1 小时前
Js中的Object.entries()
开发语言·前端·javascript
编程百晓君4 小时前
Harmony OS开发-ArkTS语言速成五
javascript·harmonyos·arkts
明月看潮生4 小时前
青少年编程与数学 02-005 移动Web编程基础 15课题、移动应用开发
前端·青少年编程·编程与数学·移动web
电子小子洋酱4 小时前
ESP32移植Openharmony外设篇(7)土壤湿度传感器YL-69
单片机·物联网·华为·harmonyos·鸿蒙
JINGWHALE15 小时前
设计模式 结构型 外观模式(Facade Pattern)与 常见技术框架应用 解析
前端·人工智能·后端·设计模式·性能优化·系统架构·外观模式
别发呆了吧6 小时前
vue路由模式面试题
前端·javascript·vue.js·前端面试题
等一场春雨6 小时前
React 中结合 antd 的 Input 组件实现防抖输入
前端·javascript·react.js
大莲芒7 小时前
[React] 生态有哪些
前端·react.js·前端框架
疯狂的沙粒7 小时前
如何在 JavaScript 中实现日期格式化?
开发语言·前端·css·node.js
LBJ辉7 小时前
第 23 章 JSON
开发语言·前端·javascript·json·ecmascript