Hongmeng: Realize two page jumps

Show results

This blog post implements two page jumps based on " Hongmeng: From 0 to "Hello Harmony""

1. Build your first page

The first page is "Hello Harmony" . Change the file name and display content to "FirstPage", and add a "Next" button.

@Entry
@Component
struct FristPage {
  @State message1: string = "FirstPage"
  @State message2: string = 'Next'

  build() {
    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%')
  }
}

In the side toolbar in the upper right corner of the editing window, click Previewer to open the previewer. The effect of the first page is as shown below:

2. Build the second page

1. In the " entry > src > main > ets > pages " directory, create a new SecondPage.ets

Similarly, implement a text and a Button button

@Entry
@Component
struct SecondPage {
  @State message1: string = 'SecondPage'
  @State message2: string = 'Back'

  build() {
    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 effect:

3. Configure routing

Configure routing for the second page.

In the " Project " window, open " entry > src > main > resources > base > profile ",

Configure the route "pages/second" for the second page under "src" in the main_pages.json file .

code show as below:

{
  "src": [
    "pages/FirstPage",
    "pages/SecondPage"
  ]
}

4. Implement page jump

​Navigation between pages can be achieved through page routing router .

The page routing router finds the target page based on the page URL to achieve the jump.

To use page routing, you need to import the router module.

(1).Jump from the first page to the second page

In the first page, the jump button is bound to the onClick event, and when the button is clicked, it jumps to the second page.

The code of the " FirstPage.ets " file is as follows:

// @ohos.router模块功能从API version 8开始支持，请使用对应匹配的SDK
import router from '@ohos.router';

@Entry
@Component
struct FristPage {
  @State message1: string = "FirstPage"
  @State message2: string = 'Next'

  build() {
    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).The second page jumps to the first page

In the second page, the return button is bound to the onClick event and returns to the first page when the button is clicked.

An example of a "SecondPage.ets" file is as follows:

import router from '@ohos.router';

@Entry
@Component
struct SecondPage {
  @State message1: string = 'SecondPage'
  @State message2: string = 'Back'

  build() {
    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.Achieve results

As shown at the beginning