【每日学点HarmonyOS Next知识】Tab切换声明周期、复杂Json组装、scroll最 ...

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参考：

1. // xxx.ets
2. import { FirstPage } from './FirstPage'
4. @Entry
5. @Component
6. struct TabsExample {
7.   @State fontColor: string = '#182431'
8.   @State selectedFontColor: string = '#007DFF'
9.   @State currentIndex: number = 0
10.   private controller: TabsController = new TabsController()
11.   @State mainPageState:boolean = false
12.   @Builder tabBuilder(index: number, name: string) {
13.     Column() {
14.       Text(name)
15.         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
16.         .fontSize(16)
17.         .fontWeight(this.currentIndex === index ? 500 : 400)
18.         .lineHeight(22)
19.         .margin({ top: 17, bottom: 7 })
20.       Divider()
21.         .strokeWidth(2)
22.         .color('#007DFF')
23.         .opacity(this.currentIndex === index ? 1 : 0)
24.     }.width('100%')
25.   }
27.   build() {
28.     Column() {
29.       Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
30.         TabContent() {
31.           FirstPage({mainPageState:this.mainPageState}).width('100%').height('100%').backgroundColor('#00CB87')
33.         }.tabBar(this.tabBuilder(0, 'green'))
35.         TabContent() {
36.           Column().width('100%').height('100%').backgroundColor('#007DFF')
37.         }.tabBar(this.tabBuilder(1, 'blue'))
39.         TabContent() {
40.           Column().width('100%').height('100%').backgroundColor('#FFBF00')
41.         }.tabBar(this.tabBuilder(2, 'yellow'))
43.         TabContent() {
44.           Column().width('100%').height('100%').backgroundColor('#E67C92')
45.         }.tabBar(this.tabBuilder(3, 'pink'))
46.       }
47.       .vertical(false)
48.       .barMode(BarMode.Fixed)
49.       .barWidth(360)
50.       .barHeight(56)
51.       .animationDuration(400)
52.       .onChange((index: number) => {
53.         this.currentIndex = index
54.       })
55.       .width('100%')
56.       .height('100%')
57.       .margin({ top: 52 })
58.       .backgroundColor('#F1F3F5')
59.     }.width('100%')
60.   }
62.   onPageShow(): void {
63.     console.log('index--- onPageShow')
64.     this.mainPageState = true
65.   }
66.   onPageHide(): void {
67.     console.log('index--- onPageHide')
68.     this.mainPageState = false
69.   }
70. }

复制代码

1. import { router } from '@kit.ArkUI';
2. import { FaultLogger } from '@kit.PerformanceAnalysisKit';
4. @Entry
5. @Component
6. export struct FirstPage {
7.   @State message: string = 'Hello World';
8.   @Link @Watch('mainIsShow') mainPageState:boolean
9.   build() {
10.     Row() {
11.       Column() {
12.         Text(this.message)
13.           .fontSize(50)
14.           .fontWeight(FontWeight.Bold).onClick(()=>{
15.           router.pushUrl({
16.             url:'pages/DetailPage',
18.           })
20.         })
21.       }
22.       .width('100%')
23.     }
24.     .height('100%')
25.   }
26.   mainIsShow(){
27.     console.log('mainIsShow--',this.mainPageState)
28.   }
29.   aboutToAppear(): void {
30.     console.log('firstPAGE--- aboutToAppear')
31.   }
33.   onPageShow(): void {
34.     console.log('firstPAGE--- onPageShow')
35.   }
36.   onPageHide(): void {
37.     console.log('firstPAGE--- onPageHide')
38.   }
39.   aboutToRecycle(): void {
40.     console.log('firstPAGE--- aboutToRecycle')
41.   }
43. }

复制代码

1. import { Notification } from '@kit.NotificationKit';
3. @Entry
4. @Component
5. struct DetailPage {
6.   @State message: string = '详情';
8.   build() {
9.     Row() {
10.       Column() {
11.         Text(this.message)
12.           .fontSize(50)
13.           .fontWeight(FontWeight.Bold)
14.       }
15.       .width('100%')
16.     }
17.     .height('100%')
18.   }
19.   onPageShow(): void {
20.   }
21.   onPageHide(): void {
23.     console.log('firstPAGE--- onPageHide')
24.   }
25.   onBackPress(): boolean | void {
26.     console.log('firstPAGE--- onBackPress')
27.   }
28. }

复制代码

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

参考demo：

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

复制代码

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

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

1. @Entry
2. @Component
3. struct NestedScroll {
4.   @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
5.   private arr: number[] = [1]
6.   private scrollerForList: Scroller = new Scroller()
8.   build() {
9.     Flex() {
10.       Column() {
11.         Text("头部")
12.           .width("100%")
13.           .height("20%")
14.           .backgroundColor(0X330000FF)
15.           .fontSize(16)
16.           .textAlign(TextAlign.Center)
18.         List({ space: 20, scroller: this.scrollerForList }) {
19.           ForEach(this.arr, (item: number) => {
20.             ListItem() {
21.               Text("这是一段超长文字这是一段超长文字这是一段超" +
22.                 "长文字这是一段超长文字这是一段超长文字这是一段超长文" +
23.                 "字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +
24.                 "段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
25.                 "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段" +
26.                 "超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +
27.                 "文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +
28.                 "是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +
29.                 "文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是" +
30.                 "一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
31.                 "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +
32.                 "段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
33.                 "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +
34.                 "是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文" +
35.                 "字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字")
36.                 .borderRadius(15)
37.                 .fontSize(16)
38.                 .backgroundColor(Color.White)
39.             }.width("100%")
40.           }, (item: string) => item)
43.         }
44.         .borderColor(Color.Green)
45.         .borderWidth(2)
46.         .width("100%")
47.         .edgeEffect(EdgeEffect.None)
48.         .friction(0.6)
49.         .onReachStart(() => {
50.           this.listPosition = 0
51.         })
52.         .onReachEnd(() => {
53.           this.listPosition = 2
54.         })
55.         .onScrollFrameBegin((offset: number) => {
56.           if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
57.             return { offsetRemain: 0 }
58.           }
59.           this.listPosition = 1
60.           return { offsetRemain: offset };
61.         })
62.         .constraintSize({ maxHeight: 400 })
64.         Text("尾部")
65.           .width("100%")
66.           .height("20%")
67.           .backgroundColor(0X330000FF)
68.           .fontSize(16)
69.           .textAlign(TextAlign.Center)
70.       }
71.     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
72.   }
73. }

复制代码

4、HarmonyOS @Builder 按引用通报参数编译错误？

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

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

复制代码

参考代码：

1. class Tmp{
2.   paramA1:string = ‘’
3. }
4. @Builder function overBuilder($$ : Tmp) {
5.   Text($$.params)
6.     .width(400)
7.     .height(50)
8.     .backgroundColor(Color.Blue)
9. }

复制代码

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页面，从而提拔用户满意度和留存率。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。