Although many APIs and components were introduced in the previous chapters, all the codes are placed in one page (the layout is placed in the wxml file, and the JS code is written in the js file). However, it has practical application value for one It’s impossible to have only one page in the applet. If the applet contains multiple pages, you need to switch from one page to another. This is called page navigation.
To achieve page navigation, you need to use the <navigator> tag, which allows to display another page on the current page, and also allows a new page to be displayed. For example, two <navigator> tags are used in the layout code below.
<view style="margin:30px">
<navigator url="page1?title=跳转到新页面" >
<button >跳转到新页面</button>
</navigator>
<navigator style="margin-top:20px" url="page2?title=在当前页面打开&color=red" redirect >
<button >在当前页打开</button>
</navigator>å
</view>
The <navigator> tag has a very important attribute url, which is used to specify the page to be redirected and the value to be passed. The format of this url is similar to a web address. The page and the parameters are separated by a question mark (?). If multiple parameters are passed, the parameters are separated by &. Where page1 and page2 are pages in the same directory as the current page. The second <navigator> tag not only passes the title parameter through the url, but also passes a color parameter to set the color of the text in page2. The redirect attribute is also specified in this <navigator> tag, which means that a new page is opened in the current page, and the default is to open a new page in another page.
Now select the directory of the current page and click the right mouse button, a menu as shown in Figure 1 will pop up.
Figure 1 New page
Now create 4 new files: page1.wxml, page1.js, page2.wxml and page2.js. The code in these 4 files is as follows:
page1.wxml
<view style="margin:30px">
<text>{
{title}}</text>
</view>
page1.js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})
page2.wxml
<view style="margin:30px">
<text style="color:{
{color}}">{
{title}}</text>
</view>
page2.js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title,
color:options.color
})
}
})
As can be seen from the code in the page1.js and page2.js files, the incoming parameters (title and color) are returned through the options parameter of the onLoad event, and the values of these two parameters are assigned to the title and color variables.
Note: The newly added page must be registered in the pages of the app.json file, otherwise the newly created page cannot be used. The registration code is as follows:
"page/component/component-pages/wx-view/page1",
"page/component/component-pages/wx-view/page2",
Now click the first button, it will jump to the page shown in Figure 2, and click the "back" button in the upper left corner to return to the current page.
Figure 2 Displaying a new page on another page
Click the second button to jump to the page shown in Figure 3. Click the "Back" button in the upper left corner to return to the previous page of the current page.
Figure 3 Displaying a new page on the current page
If you are interested in this article, you can add teacher Li Ning's WeChat public account (unitymarvel):
Follow the official account of Geek Origin to get more free technical videos and articles.