暑假学习DevEco Studio第2天

学习目标：

掌握页面跳转

---

学习内容：

跳转页面

---

创建页面：

在“project”窗口。打开“entry>src>main>ets”,右击“pages”，选择“New>ArkTS File”,命名“Second”，点击回车键。

在页面的路由，project窗口，打开“entry>src>main>resources”>base>profile,在main_pages.json的src中配置页面路由

"src": ["pages/Index","pages/Second"]

实现页面间的跳转

2.1页面间的导航可以通过页面路由router来实现。
第一个

  // 跳转按钮绑定onClick事件，点击时跳转到第二页.onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)})})

报错的原因是没有导包，莫慌
在红线，用鼠标指向，会弹出这个框框，在点击add，包就导入了。


第二个页面就可以了

import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(25).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 返回按钮绑定onClick事件，点击按钮时返回到第一页.onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)try {// 返回第一页router.back()console.info('Succeeded in returning to the first page.')} catch (err) {let code = (err as BusinessError).code;let message = (err as BusinessError).message;console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)}})}.width('100%')}.height('100%')}
}

->

2.2如果需要实现更好的转场动效，推荐使用Navigation
这个我明天在摸索一下
---