[Daily HarmonyOS Next Knowledge] Web Scheme Launching App, List Refresh, Web File Download, Adaptive to Child Elements
1. Does HarmonyOS currently support launching an app via web Scheme in the app?
Deeplink is supported. Add a button on the web page to guide users to launch the app. The web side directly prompts an “Open App” button bound to the click event window.open(tzptest://www.xxxxx.com?url=XXX). Clicking this button will open the URL tzptest://www.xxxxx.com?url=XXX received by the web端.
For the app to be successfully launched, configure the skills of abilities in the project’s model.json5 file:
{
"actions": [
"ohos.want.action.viewData"
],
"uris": [
{
"scheme": "tzptest"
}
]
}
Notes:
- The
schemeprotocol header of the deeplink link must match the app configuration for web launching. - Browsers do not parse or process deeplink links, but pass them to the launched app intact. Therefore, third-party apps only need to negotiate URL rules between the web and app sides and parse them to open the corresponding page.
Reference: Implicit Want to launch the app: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/want-overview-V5
2. How to refresh list data based on the list’s title in HarmonyOS?
Refer to the following demo for implementation:
@Entry
@Component
struct Index {
@State focusIndex: number = 0;
private controller: TabsController = new TabsController();
tabArray = [0, 1, 2, 3, 4, 5, 6, 7];
// Custom tab
@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() {
// Tabs
Row({ space: 6 }) {
Scroll() {
Row() {
ForEach(this.tabArray, (item: number, index: number) => {
this.Tab('Page ' + item, item, index);
})
}.margin({ right: 80 })
.justifyContent(FlexAlign.Start)
}
// Set left alignment
.align(Alignment.Start)
.scrollable(ScrollDirection.Horizontal)
.scrollBar(BarState.Off)
.width('80%')
.backgroundColor('#ffb7b7b7')
}
.width('100%')
.backgroundColor('#ffb7b7b7')
// Tabs content
Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
ForEach(this.tabArray, (item: number, index: number) => {
TabContent() {
Text(' Content of Page ' + 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. No response when clicking to download files in HarmonyOS Web?
Set all Web permissions to true, then debug whether the download is successfully triggered on the page. For debugging the page, refer to: Using Devtools to debug front-end pages: https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-debugging-with-devtools-V5
The Web component supports front-end page debugging using DevTools. DevTools is a Web front-end development debugging tool that enables debugging of mobile device front-end pages on a computer. Developers enable Web component front-end page debugging via the setWebDebuggingAccess() interface. DevTools can debug front-end web pages on mobile devices (device version 4.1.0 and above).
4. How to use any in HarmonyOS .ets files?
Use ESObject as an alternative to any. Understand the usage scenarios of ESObject via the links:
- 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. How does the HarmonyOS Grid component adapt its height to child elements?
Expect the Grid component’s overall height to be determined by the total height of its internal elements without a scrollbar. Can this be achieved? (Internal element heights are uncertain, so the Grid height cannot be fixed.)
Refer to the following demo:
@Entry
@Component
struct GridExample {
@State numbers: 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.numbers, (day: string) => {
ForEach(this.numbers, (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 })
}
}
// Add a scroll layout to the outer layer
@Entry
@Component
struct GridExample {
@State numbers: 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.numbers, (day: string) => {
ForEach(this.numbers, (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)
}
}
