HarmonyOS:如何添加新页面并路由跳转

164 篇文章 0 订阅
154 篇文章 0 订阅

1.新页面创建

@Entry
@Component
struct UIContainerPage {
    private list = [
        "组件-常用组件",
        "组件-气泡和菜单",
        "页面路由",
        "组件导航",
        "页面路由",
        "显示图片",
        "绘制几何形状",
        "使用动画",
        "下拉刷新组件",
    ]
    
    build() {
        Column() {
            Column() {
                Text("鸿蒙学习大纲").fontSize(16).align(Alignment.Center)
                    .margin({ top: 10, bottom: 10 })
            }.height(40)

            List() {

                ForEach(this.list, (item: string) => {
                    ListItem() {

                        Button(item, { type: ButtonType.Normal, stateEffect: true })
                            .borderRadius(10)
                            .backgroundColor(0xff31abff)
                            .width('70%')
                            .height(30)
                            .align(Alignment.Center)
                            .onClick(() => {
                                console.info("您进入{}部分学习", item)
                            })
                    }
                    .width('100%')
                    .height(40)
                })
            }
            .alignListItem(ListItemAlign.Start)
        }.backgroundColor(Color.White)
    }
}

2.json配置新页面

main_pages.json

{
  "src": [
    "pages/MainPage",
    "pages/Index",
    "pages/UIContainerPage"
  ]
}

3.路由跳转

    handleButtonEvent(item: string) {
        let url: string = ''

        switch (item) {
            case "UI开发":
                url = 'pages/UIContainerPage'
                break;
            default:
                console.error(`No page found for item: ${item}`)
                return; 
        }

        if (null == url) {
            return
        }


        router.pushUrl({ url: url }, router.RouterMode.Standard, (err) => {
            if (err) {
                console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`)
                return
            }
            console.info('Invoke pushUrl succeeded.')
        });
    }

4.效果

5.其它

5.1.问题
 0FEFE/JsApp: Invoke pushUrl failed, code is 100002, message is Uri error. The uri of router is not exist.

如果出现上述情况,去第三步检查下main_pages.json中,该页面是否配置?如果没有配置,添加即可。

最后

如果你想快速提升鸿蒙技术,那么可以直接领取这份包含了:【OpenHarmony多媒体技术、Stage模型、ArkUI多端部署、分布式应用开发、音频、视频、WebGL、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。

鸿蒙Next全套VIP学习资料←点击领取!(安全链接,放心点击

1.鸿蒙核心技术学习路线

2.大厂面试必问面试题

3.鸿蒙南向开发技术

 4.鸿蒙APP开发必备

 5.HarmonyOS Next 最新全套视频教程

 6.鸿蒙生态应用开发白皮书V2.0PDF

这份全套完整版的学习资料已经全部打包好,朋友们如果需要可以点击鸿蒙Next全套VIP学习资料免费领取(安全链接,放心点击

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值