【每日学点HarmonyOS Next知识】网页Scheme拉起应用、列表刷新、Web下载文件、根据子元素

1、HarmonyOS 目前 app 中是否支持网页Scheme拉起应用？

支持deeplink的，网页中添加按钮引导用户拉起应用。网页端直接提示打开应用按钮绑定点击事件window.open(tzptest://www.xxxxx.com?url=XXX)>,点击该按钮，打开网页web端收到的url为tzptest://www.xxxxx.com?url=XXX

应用想被成功拉起则需要应用在工程的model.json5文件中配置abilities的skills中配置

{
  "actions": [
  "ohos.want.action.viewData"
  ],
  "uris": [
  {
    "scheme": "tzptest"
  }
  ]
}

需要注意deeplink链接的scheme协议头必须网页拉起的链接的应用配置的保持一致。另外浏览器不会对deeplink链接做任何解析或处理，只会原封不动的传递给拉起的应用。因此第三方应用只需要自己的网页端和应用端协商好url规则，自己去做解析打开对应页面即可

参考隐式want拉起应用：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/want-overview-V5

2、HarmonyOS 根据列表的title，刷新列表的数据？

可以参考以下demo实现：

@Entry
@Component
struct Index {
  @State focusIndex: number = 0;
  private controller: TabsController = new TabsController();
  tabArray = [0, 1,2,3,4,5,6,7];

  // 自定义页签
  @Builder
  Tab(tabName: string, tabItem: number, tabIndex: number) {
    Column({ space: 20 }) {
      Text(tabName).fontSize(18)
      Image($r('app.media.icon')).width(20).height(20)
    }
    .width(100)
    .height(60)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .onClick(() => {
      this.controller.changeIndex(tabIndex);
      this.focusIndex = tabIndex;
    })
    .backgroundColor(tabIndex === this.focusIndex ? '#ffffffff' : '#ffb7b7b7')
  }

  build() {
    Column() {
      Column() {
        // 页签
        Row({ space: 6 }) {
          Scroll() {
            Row() {
              ForEach(this.tabArray, (item: number, index: number) => {
                this.Tab('页' + item, item, index);
              })
            }.margin({right: 80})
            .justifyContent(FlexAlign.Start)
          }
          // 设置左对齐
          .align(Alignment.Start)
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
          .width('80%')
          .backgroundColor('#ffb7b7b7')
        }
        .width('100%')
        .backgroundColor('#ffb7b7b7')

        // tabs
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          ForEach(this.tabArray, (item: number, index: number) => {
            TabContent() {
              Text(' 我是页面 ' + item + ' 的内容')
                .height(300)
                .width('100%')
                .fontSize(30)
            }
            .backgroundColor(Color.Pink)
          })
        }
        .barHeight(0)
        .animationDuration(100)
        .onChange((index: number) => {
          console.log('foo change');
          this.focusIndex = index;
        })
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')
    }
    .height('100%')
  }
}

3、HarmonyOS web下载文件点击无反应？

可以把web的权限都设置为true，然后调试一下页面是否成功触发了下载，调试页面可参考使用Devtools工具调试前端页面：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-debugging-with-devtools-V5

Web组件支持使用DevTools工具调试前端页面。DevTools是一个 Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过setWebDebuggingAccess()接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页，设备需为4.1.0及以上版本。

4、HarmonyOS ets文件如何使用any？

可以采用ESObject来替代any。但需要了解ESObject的使用场景，链接：

• https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-coding-9-V5
• https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/typescript-to-arkts-migration-guide-V5#%E9%99%90%E5%88%B6%E4%BD%BF%E7%94%A8esobject%E7%B1%BB%E5%9E%8B

5、HarmonyOS Grid 组件如何根据子元素自适应高度？

期望Grid组件的整体高度根据其内部元素的总高度来决定，不出滚动条,请问是否能实现？（内部元素高度不确定，无法固定设置Grid总高度）

参考如下Demo：

@Entry
@Component
struct GridExample {
  @State Number: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9']
  scroller: Scroller = new Scroller()
  build() {
    Column({ space: 5 }) {
      Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
      Grid(this.scroller) {
        ForEach(this.Number, (day: string) => {
          ForEach(this.Number, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
                .backgroundColor(0xF9CF93)
                .width('100%')
                .height(80)
                .textAlign(TextAlign.Center)
            }
          }, (day: string) => day)
        }, (day: string) => day)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('80%')
      .layoutDirection(GridDirection.Row)
      .maxCount(3)
      .backgroundColor(0xFAEEE0)
      .scrollBarWidth(0)
    }.width('100%').margin({ top: 5 })
  }
}
 
//在外层布局添加滚动布局scroll
@Entry
@Component
struct GridExample {
  @State Number: String[] = ['0', '1', '2', '3', '4','5','6','7','8','9']
  scroller: Scroller = new Scroller()
  build() {
    Scroll() {
      Column({ space: 5 }) {
        Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
        Grid(this.scroller) {
          ForEach(this.Number, (day: string) => {
            ForEach(this.Number, (day: string) => {
              GridItem() {
                Text(day)
                  .fontSize(16)
                  .backgroundColor(0xF9CF93)
                  .width('100%')
                  .height(80)
                  .textAlign(TextAlign.Center)
              }
            }, (day: string) => day)
          }, (day: string) => day)
        }
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
        .columnsGap(10)
        .rowsGap(10)
        .onScrollIndex((first: number) => {
          console.info(first.toString())
        })
        .width('80%')
        .layoutDirection(GridDirection.Row)
        .maxCount(3)
        .backgroundColor(0xFAEEE0)
        .scrollBarWidth(0)
      }.width('100%').margin({ top: 5 })
    }
    .scrollBarWidth(0)
  }
}