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

2025-03-07
北京
本文字数：3045 字
阅读完需：约 10 分钟

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@Componentstruct 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@Componentstruct 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@Componentstruct 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)  }}