This is the 24th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Writing in the front

Familiar with the project structure, we are going to try to develop a page skipping function, in which to understand how hongmeng is developed, is also a preliminary effect, give yourself a positive feedback.

Write a page-skipping feature

Today we are going to write a page skipping function. The requirement is to jump to another page by clicking the button, and then display information on another page.

So to achieve this requirement, we need to follow the steps to achieve one by one.

Create a start page

The first step is to create a start page, and since we’ve already created a test sample, we’ll make some changes this time.

Place a Next button on the Pages /index.html page under the js file.

The code is as follows:

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>

    <button class="button" type="capsule" value="Next" onclick="tiaozhuan"></button>
</div>
Copy the code

After adding this button, if we run the project at this time, we should see something like the following image.

Create a page to jump to

Then we create a Page to jump to, hongmeng IDE also provides a quick Page creation, select the Pages folder, right click, select New-js Page.

After entering the name, the corresponding HTML, JS and CSS files will be generated in this directory, as shown below:

Let’s also enter a paragraph of text in the details.html file to serve as a display of the page after the jump.

<div class="container">
    <text class="title">Successful jump to details page!</text>
</div>
Copy the code

Write page jump logic

With both pages ready, it’s time to write the jump logic. As you’ve probably noticed, when we add a button, there’s a click event.

Good guess, this method is the key to implementing jump logic.

Let’s open index.js and type in the following code:

import router from '@system.router';

export default {
    launch() {
        router.push ({
            uri:'pages/details/details'
        })
    }
}
Copy the code

Run the project

Now that you’ve written it, it’s time to verify it by running the project and going to the following page.

Click button linkage

Next, click Next, and you’ll be taken to the jump page.

conclusion

Today’s harvest is very big, using Hongmeng to preliminarily realize a function, with a positive feedback, so as to further study.