【每日学点HarmonyOS Next知识】Tab切换声明周期、复杂Json组装、scroll最大高度、引用传递报错、Web性能

1、HarmonyOS 内嵌在Tabs的组件不走onPageShow方法？

Tabs组件切换不执行onPageShow生命周期，因为onPageShow是页面级的生命周期，tabs切换触发的是子组件组件级的生命周期aboutToAppear()，可以将showPage()放在该生命周期内调用，如果需要每一次切换都要执行TabContent中的showPage方法，这边推荐使用onTabBarClick(event: (index: number) => void)获取父组件当前点击的tabIndex，在父组件中通过@State定义一个currentTabIndex变量，在onTabBarClick回调中将index赋值给currentTabIndex，并将这个值传递给TabContent包裹的子组件。在子组件中通过@Props和@Watch来监听父组件传递值的不同，执行各个tabContent中的showPage方法。

demo参考：

// xxx.ets
import { FirstPage } from './FirstPage'@Entry
@Component
struct TabsExample {@State fontColor: string = '#182431'@State selectedFontColor: string = '#007DFF'@State currentIndex: number = 0private controller: TabsController = new TabsController()@State mainPageState:boolean = false@Builder tabBuilder(index: number, name: string) {Column() {Text(name).fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor).fontSize(16).fontWeight(this.currentIndex === index ? 500 : 400).lineHeight(22).margin({ top: 17, bottom: 7 })Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex === index ? 1 : 0)}.width('100%')}build() {Column() {Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {TabContent() {FirstPage({mainPageState:this.mainPageState}).width('100%').height('100%').backgroundColor('#00CB87')}.tabBar(this.tabBuilder(0, 'green'))TabContent() {Column().width('100%').height('100%').backgroundColor('#007DFF')}.tabBar(this.tabBuilder(1, 'blue'))TabContent() {Column().width('100%').height('100%').backgroundColor('#FFBF00')}.tabBar(this.tabBuilder(2, 'yellow'))TabContent() {Column().width('100%').height('100%').backgroundColor('#E67C92')}.tabBar(this.tabBuilder(3, 'pink'))}.vertical(false).barMode(BarMode.Fixed).barWidth(360).barHeight(56).animationDuration(400).onChange((index: number) => {this.currentIndex = index}).width('100%').height('100%').margin({ top: 52 }).backgroundColor('#F1F3F5')}.width('100%')}onPageShow(): void {console.log('index--- onPageShow')this.mainPageState = true}onPageHide(): void {console.log('index--- onPageHide')this.mainPageState = false}
}

import { router } from '@kit.ArkUI';
import { FaultLogger } from '@kit.PerformanceAnalysisKit';@Entry
@Component
export struct FirstPage {@State message: string = 'Hello World';@Link @Watch('mainIsShow') mainPageState:booleanbuild() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{router.pushUrl({url:'pages/DetailPage',})})}.width('100%')}.height('100%')}mainIsShow(){console.log('mainIsShow--',this.mainPageState)}aboutToAppear(): void {console.log('firstPAGE--- aboutToAppear')}onPageShow(): void {console.log('firstPAGE--- onPageShow')}onPageHide(): void {console.log('firstPAGE--- onPageHide')}aboutToRecycle(): void {console.log('firstPAGE--- aboutToRecycle')}}

import { Notification } from '@kit.NotificationKit';@Entry
@Component
struct DetailPage {@State message: string = '详情';build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}onPageShow(): void {}onPageHide(): void {console.log('firstPAGE--- onPageHide')}onBackPress(): boolean | void {console.log('firstPAGE--- onBackPress')}
}

2、如何实现复杂json数据的组装？

参考demo：

jsonObject:Record<string,Object> = {}
aboutToAppear(): void {this.jsonObject["k1"] = "v1"this.jsonObject["k2"] = 20let json: string = JSON.stringify(this.jsonObject)console.log(json)
}

3、HarmonyOS scroll如何限制最大高度？

在一个布局中间需要展示一段文本，给这个文本（Text组件）套了个scroll，这个文本上下都有其它ui需要展示；当文本较短比如只有一行可以正常展示，但如果这个文本超长一个屏幕都展示不了，那么文本下面的ui会被挤出屏幕，如何在文本超长的情况下控制这个Text组件或scroll组件的高度以防止其它ui被挤出屏幕。
参考demo：

@Entry
@Component
struct NestedScroll {@State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。private arr: number[] = [1]private scrollerForList: Scroller = new Scroller()build() {Flex() {Column() {Text("头部").width("100%").height("20%").backgroundColor(0X330000FF).fontSize(16).textAlign(TextAlign.Center)List({ space: 20, scroller: this.scrollerForList }) {ForEach(this.arr, (item: number) => {ListItem() {Text("这是一段超长文字这是一段超长文字这是一段超" +"长文字这是一段超长文字这是一段超长文字这是一段超长文" +"字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +"段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +"长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段" +"超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +"文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +"是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +"文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是" +"一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +"长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +"段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +"长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +"是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文" +"字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字").borderRadius(15).fontSize(16).backgroundColor(Color.White)}.width("100%")}, (item: string) => item)}.borderColor(Color.Green).borderWidth(2).width("100%").edgeEffect(EdgeEffect.None).friction(0.6).onReachStart(() => {this.listPosition = 0}).onReachEnd(() => {this.listPosition = 2}).onScrollFrameBegin((offset: number) => {if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {return { offsetRemain: 0 }}this.listPosition = 1return { offsetRemain: offset };}).constraintSize({ maxHeight: 400 })Text("尾部").width("100%").height("20%").backgroundColor(0X330000FF).fontSize(16).textAlign(TextAlign.Center)}}.width('100%').height('100%').backgroundColor(0xDCDCDC)}
}

4、HarmonyOS @Builder 按引用传递参数编译错误？

编译提示：Object literals cannot be used as type declarations (ArkTS-no-obj-literals-as-types) <ArkTSCheck>
代码：

@Builder overBuilder($$: { paramA1: string }) {Row() {Text(`UseStateVarByReference: ${$$.paramA1} `)}

参考代码：

class Tmp{paramA1:string = ‘’
}
@Builder function overBuilder($$ : Tmp) {Text($$.params).width(400).height(50).backgroundColor(Color.Blue)
}

5、HarmonyOS H5页面嵌套是否会存在页面卡顿的现象，该如何优化？

参考最佳实践：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-web-develop-optimization-V5

ArkWeb（方舟Web）是一个Web组件平台，旨在为应用程序提供展示Web页面内容的功能，并为开发者提供丰富的能力，包括页面加载、页面交互、页面调试等功能。在这个数字化时代，页面显示的速度直接体现了应用的流畅性，影响着用户对应用的印象和体验。快速加载并展示页面不仅可以吸引用户留在应用上，还能减少他们的等待时间和不耐烦情绪，从而提升用户的满意度。

Web页面的显示过程可以被分为多个阶段，包括DNS解析、建立连接、发送请求、接收响应、解析HTML、下载资源等步骤。在这个过程中，许多因素都会对页面显示速度产生影响，比如网络延迟、服务器响应时间、页面大小、资源压缩等。为了提升Web页面显示速度，开发者可以在Web页面加载、资源下载和页面渲染等方面进行优化，以提升性能和用户体验。

本文将介绍以下常见的优化方式。