做企业销售分析的网站,移动端网站的重要性,wordpress非插件幻灯,怎么申请自己的企业邮箱效果展示 这篇博文在《鸿蒙#xff1a;从0到“Hello Harmony”》基础上实现两个Page页面跳转
1.构建第一个页面
第一个页面就是“Hello Harmony”#xff0c;把文件名和显示内容都改一下#xff0c;改成“FirstPage”#xff0c;再添加一个“Next”按钮。
Entry
Compone…效果展示 这篇博文在《鸿蒙从0到“Hello Harmony”》基础上实现两个Page页面跳转
1.构建第一个页面
第一个页面就是“Hello Harmony”把文件名和显示内容都改一下改成“FirstPage”再添加一个“Next”按钮。
Entry
Component
struct FristPage {State message1: string FirstPageState message2: string Nextbuild() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold).height(10%).margin({top: 0})Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height(5%).type(ButtonType.Capsule).margin({top: 30}).backgroundColor(#0D9FFB).width(50%).height(5%)}.width(100%)}.height(100%)}
}
在编辑窗口右上角的侧边工具栏点击Previewer打开预览器。第一个页面效果如下图所示 2.构建第二个页面
1.在“entry src main ets pages”目录下新建SecondPage.ets 同样实现一个文本和一个Button按钮
Entry
Component
struct SecondPage {State message1: string SecondPageState message2: string Backbuild() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold)Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height(5%).type(ButtonType.Capsule).margin({top: 30}).backgroundColor(#0D9FFB).width(50%).height(5%)}.width(100%)}.height(100%)}
}
Previewer效果 3.配置路由
配置第二个页面的路由。
在“Project”窗口打开“entry src main resources base profile”
在main_pages.json文件中的“src”下配置第二个页面的路由“pages/second”。
代码如下
{src: [pages/FirstPage,pages/SecondPage]
}
4.实现页面跳转
页面间的导航可以通过页面路由router来实现。
页面路由router根据页面url找到目标页面从而实现跳转。
使用页面路由需要导入router模块。
(1).第一个页面跳转到第二个页面
在第一个页面中跳转按钮绑定onClick事件点击按钮时跳转到第二页。
“FirstPage.ets”文件的代码如下
// ohos.router模块功能从API version 8开始支持请使用对应匹配的SDK
import router from ohos.router;Entry
Component
struct FristPage {State message1: string FirstPageState message2: string Nextbuild() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold).height(10%).margin({top: 0})Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height(5%).type(ButtonType.Capsule).margin({top: 30}).backgroundColor(#0D9FFB).width(50%).height(5%).onClick(() {console.info(Succeeded in clicking the Next button.)try {router.pushUrl({ url: pages/SecondPage })console.info(Succeeded in jumping to the second page.)} catch (err) {console.error(Failed to jump to the second page.Code is ${err.code}, message is ${err.message})}})}.width(100%)}.height(100%)}
}
(1).第二个页面跳转到第一个页面
在第二个页面中返回按钮绑定onClick事件点击按钮时返回到第一页。
“SecondPage.ets”文件的示例如下
import router from ohos.router;Entry
Component
struct SecondPage {State message1: string SecondPageState message2: string Backbuild() {Row() {Column() {Text(this.message1).fontSize(30).fontWeight(FontWeight.Bold)Button(this.message2).fontSize(30).fontWeight(FontWeight.Bold).height(5%).type(ButtonType.Capsule).margin({top: 30}).backgroundColor(#0D9FFB).width(50%).height(5%).onClick(() {console.info(Succeeded in clicking the Next button.)try {router.pushUrl({ url: pages/FirstPage })console.info(Succeeded in jumping to the second page.)} catch (err) {console.error(Failed to jump to the second page.Code is ${err.code}, message is ${err.message})}})}.width(100%)}.height(100%)}
}
5.实现效果
如开头展示
