鸿蒙HarmonyOS实战-ArkUI组件（页面路由）_arkui 怎么实现页面跳转_鸿蒙 arkui promptaction.showdialog 怎么判断点击的是取消还是确定按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/tencentes/article/details/137734138

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数HarmonyOS鸿蒙开发工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年HarmonyOS鸿蒙开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

htt

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上HarmonyOS鸿蒙开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新

如果你觉得这些内容对你有帮助，可以添加VX：vip204888 （备注鸿蒙获取）

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

    Text($r('app.string.width_label'))
      .fontSize(20)
      .fontWeight(FontWeight.Bold)

    TextInput({text: this.imageWidth.toFixed(0)})
      .width(150)
      .backgroundColor('#FFF')
      .type(InputType.Number)
      .onChange( value => {
        this.imageWidth = parseInt(value)
      })
  }
  .width('100%')
  .padding({left: 14, right: 14})
  .justifyContent(FlexAlign.SpaceBetween)

  Divider()
    .width('91%')

  Row(){
    Button('缩小')
      .width(80)
      .fontSize(20)
      .onClick(() => {
        if(this.imageWidth >= 10){
          this.imageWidth -= 10
        }
      })

    Button('放大')
      .width(80)
      .fontSize(20)
      .onClick(() => {
        if(this.imageWidth < 300){
          this.imageWidth += 10
        }
      })

  }
  .width('100%')
  .margin({ top: 35, bottom: 35 })
  .justifyContent(FlexAlign.SpaceEvenly)
  Button('回到首页')
    .width(160)
    .fontSize(20)
    .onClick(() => {
      router.back()
    })

  Slider({
    min: 100,
    max: 300,
    value: this.imageWidth,
    step: 10,
  })
    .width('100%')
    .blockColor('#36D')
    .trackThickness(5)
    .showTips(true)
    .onChange(value => {
      this.imageWidth = value
    })
}
.width('100%')
.height('100%')

}
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/353aa59abcca47a49918a0b1af29816a.png)


##### ☀️1.1.2 不保留主页在页面栈中，在返回时直接退出应用


登录页（Login）和 个人中心页（Profile）的切换适用案例


1、登录页


##### ☀️1.1.3 保留主页在页面栈中，以便返回时恢复状态


设置页（Setting）和一个主题切换页


1、设置页

// 在Setting页面中
function onJumpClick(): void {
router.pushUrl({
url: ‘pages/Theme’ // 目标url
}, router.RouterMode.Single, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke pushUrl succeeded.’);
});
}


##### ☀️1.1.4 保留主页在页面栈中，以便返回时恢复状态


搜索结果列表页（SearchResult）和一个搜索结果详情页（SearchDetail）


1、搜索结果列表页

// 在SearchResult页面中
function onJumpClick(): void {
router.replaceUrl({
url: ‘pages/SearchDetail’ // 目标url
}, router.RouterMode.Single, (err) => {
if (err) {
console.error(Invoke replaceUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke replaceUrl succeeded.’);})
}


#### 🦋1.2 页面参数


##### ☀️1.2.1 主页页面参数传递和获取


1、参数传递

class DataModelInfo {
age: number;
}

class DataModel {
id: number;
info: DataModelInfo;
}

function onJumpClick(): void {
// 在Home页面中
let paramsInfo: DataModel = {
id: 123,
info: {
age: 20
}
};

router.pushUrl({
url: ‘pages/Detail’, // 目标url
params: paramsInfo // 添加params属性，传递自定义参数
}, (err) => {
if (err) {
console.error(Invoke pushUrl failed, code is ${err.code}, message is ${err.message});
return;
}
console.info(‘Invoke pushUrl succeeded.’);
})
}


2、参数获取

const params = router.getParams(); // 获取传递过来的参数对象
const id = params[‘id’]; // 获取id属性的值
const age = params[‘info’].age; // 获取age属性的值


##### ☀️1.2.1 返回页页面参数传递和获取




| 作用 | 详细描述 |
| --- | --- |
| 提高用户体验 | 页面返回可以让用户快速地返回到上一个页面，提高用户体验。 |
| 恢复上一个页面的状态 | 通过页面返回，应用程序可以恢复上一个页面的状态，避免用户需要重新输入信息和执行操作。 |
| 实现页面间的交互 | 页面返回可以实现页面间的数据交换和互相调用，实现更加丰富和复杂的功能。 |
| 具备安全性和可控性 | 页面返回可以保证用户在返回上一个页面时的安全性和可控性，避免出现非授权访问、数据泄露和越权等情况。 |
| 加强应用程序的导航功能 | 通过页面返回，应用程序可以更好地实现导航功能，帮助用户更加方便快速地找到所需的功能和信息。 |


1、参数传递

router.back({
url: ‘pages/Home’,
params: {
info: ‘来自Home页’
}
});


2、参数获取

onPageShow() {
const params = router.getParams(); // 获取传递过来的参数对象
const info = params[‘info’]; // 获取info属性的值
}


#### 🦋1.3 页面返回前增加一个询问框




| 作用 | 详细描述 |
| --- | --- |
| 避免误操作 | 增加询问框可以防止用户误操作，按下返回键后无法恢复的情况。用户在点击确定前可以再次确认是否要返回上一个页面。 |
| 增强用户体验 | 增加询问框可以提醒用户当前的操作会带来什么影响，强调操作的重要性，从而提升用户的体验。用户也可以在询问框中选择“取消”按钮，继续留在当前页面进行操作。 |
| 提高安全性 | 增加询问框可以提高应用程序的安全性。以防止用户在返回前没有保存数据，或者是执行其他重要操作。询问框可以起到提醒和警示的作用，帮助用户避免风险。 |
| 增加用户选择权 | 增加询问框可以赋予用户更多的选择权。询问框中的选项可以让用户自由选择是否返回上一个页面，或者是继续留在当前页面进行操作。 |
| 强化应用程序整体设计 | 增加询问框可以加强应用程序的整体设计。合理的询问框可以为应用程序增加层次感和平衡感，使应用程序看上去更加成熟和专业。 |


##### ☀️1.3.1 默认询问框

import router from ‘@ohos.router’;


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/d2b0a0e62abe4d30bd5de263f2db3a9a.png)


##### ☀️1.3.2 自定义询问框

import router from ‘@ohos.router’;
import promptAction from ‘@ohos.promptAction’;

@Entry
fo(‘User canceled the operation.’);
} else if (result.index === 1) {
// 用户点击了“确认”按钮
console.info(‘User confirmed the operation.’);
// 调用router.back()方法，返回上一个页面
router.back();
}
}).catch((err) => {
console.error(Invoke showDialog failed, code is ${err.code}, message is ${err.message});
})
}

@Entry