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.etsimport { FirstPage } from './FirstPage'
@Entry@Componentstruct TabsExample { @State fontColor: string = '#182431' @State selectedFontColor: string = '#007DFF' @State currentIndex: number = 0 private 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@Componentexport struct FirstPage { @State message: string = 'Hello World'; @Link @Watch('mainIsShow') mainPageState:boolean build() { 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@Componentstruct 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"] = 20 let json: string = JSON.stringify(this.jsonObject) console.log(json)}
复制代码
3、HarmonyOS scroll 如何限制最大高度？
在一个布局中间需要展示一段文本，给这个文本（Text 组件）套了个 scroll，这个文本上下都有其它 ui 需要展示；当文本较短比如只有一行可以正常展示，但如果这个文本超长一个屏幕都展示不了，那么文本下面的 ui 会被挤出屏幕，如何在文本超长的情况下控制这个 Text 组件或 scroll 组件的高度以防止其它 ui 被挤出屏幕。参考 demo：
@Entry@Componentstruct 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 = 1 return { 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 页面加载、资源下载和页面渲染等方面进行优化，以提升性能和用户体验。
本文将介绍以下常见的优化方式。
Web 页面加载优化：Web 页面加载速度对于用户体验至关重要，提高页面加载的速度可以直接提升应用的流畅性。
JSBridge：通过 JSBridge 通信，可以解决 ArkTS 环境的冗余切换，避免造成 UI 阻塞。
同层渲染：通过将页面元素分层渲染，可以减少页面重绘和重排的次数，提高页面渲染效率。
ArkWeb（方舟 Web）为开发者提供了优化页面显示速度的方法。通过采取这些优化方式，开发者可以改善应用程序的性能和用户体验，使用户能够更快速、更流畅地浏览 Web 页面，从而提升用户满意度和留存率。
评论