Make page jump

1. The composition of the page

Each page consists of three files, css, hml, js. The relationship between the three is shown in Figure 1 below:

• hml: defines the components present in the page
• css: defines the format parameters such as the shape, size and so on of the component
• js : defines the interaction between components

2. Preparatory grammar

1.button component

Since the button component is used when switching pages, check the basic syntax on Huawei's official website (below).

Defined in the hml file:

<!-- xxx.hml -->
<div class="container">    
  <button class="circle" type="circle" >+</button>
  <button class="text" type="text"> button</button>
</div>

Set the format in the css file:

/* xxx.css */
.container {  
  width: 100%;
  height: 100%;
  background-color: #F1F3F5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.circle {
  font-size: 120px;
  background-color: blue;
  radius: 72px;
}
.text {
  margin-top: 30px;
  text-color: white;
  font-size: 30px;
  font-style: normal;
  background-color: blue;
  width: 50%;
  height: 100px;
}

button Development Guidance-Basic Components-Common Component Development Guidance-Web-like Development Paradigm Based on JS Extension-UI Development-JS-based Development-Development-HarmonyOS Application Development

2. Event binding

The event is bound to the component through 'on' or '@', and when the component triggers the event, the corresponding event handler in the JS file will be executed.

Bind the button through the event, so that the page jumps when the button is pressed. Check the basic syntax on Huawei's official website (below).

        

<!-- xxx.hml -->
<div class="container">
    <text class="title">{{count}}</text>
    <div class="box">
        <input type="button" class="btn" value="increase" onclick="increase" />
        <input type="button" class="btn" value="decrease" @click="decrease" />
        <!-- Pass extra parameters -->
        <input type="button" class="btn" value="double" @click="multiply(2)" />
        <input type="button" class="btn" value="decuple" @click="multiply(10)" />
        <input type="button" class="btn" value="square" @click="multiply(count)" />
    </div>
</div>

// xxx.js
export default {
  data: {
    count: 0
  },
  increase() {
    this.count++;
  },
  decrease() {
    this.count--;
  },
  multiply(multiplier) {
    this.count = multiplier * this.count;
  }
};

HML Grammar Reference-Syntax-Framework Description-Web-like Development Paradigm Based on JS Extension-UI Development-JS-based Development-Development-HarmonyOS Application Development

3. Page jump

Use router.push for page jump

        

3. Practice

After completing the above preparations, you can start making this homework.

Write only the steps here:

1. New Project;
2. Create two page folders first and second in /entry/src/main/js/MainAbility/pages, and create three new files;
3. Define parts in hml;
4. define properties in css;
5. Write a jump program in js.

Note: Before running, it must be configured in entry/src/main/config.json, and the self-created page must be added, otherwise an error will occur as shown in Figure 3 below

    "js": [
      {
        "pages": [
          "pages/index/index",
          "pages/second/second"
        ],
        "name": ".MainAbility",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": false
        }
      }
    ]

 

4. Results and code

Attach the results and the code of each file here

Result graph:

gif can't stick, forget it

Code:

        

<!-- first.hml -->
<div class="container">
    <text class="title">
        Magical Journey
    </text>

    <input type="button" class="btn" value="set off" onclick="To_second" />

</div>

/* first.css */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

.btn {
    font-size: 40px;
    text-align: center;
    width: 30%;
    height: 7%;
    margin: 10px;
}

@media screen and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

//first.js
import router from '@system.router';

export default{
    To_second(){
        router.push({
            uri:"pages/second/second"
        })
    }
}

<!-- second.hml -->
<div class="container">
    <text class="title">
        An error occurred
    </text>

    <input type="button" class="btn" value="Retry" onclick="To_first" />

</div>

/* second.css */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

.btn {
    font-size: 40px;
    text-align: center;
    width: 30%;
    height: 7%;
    margin: 10px;
}

@media screen and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

//second.js
import router from '@system.router';

export default{
    To_first(){
        router.push({
            uri:"pages/first/first"
        })
    }
}