【 WeChat applet 】 read page navigation

写在前面：
观众老爷们好呀,这里是前端小刘不怕牛牛频道,The applet series has been updated again,Today's content is the page navigation of the WeChat applet,非常重要,Quickly pick up the notebook and remember it！

一,页面导航

首先,Let's first understand what page navigation is,In fact, it is to jump to the page by identifying the user's click.

这一点有点类似于vue中的vue-router路由,我们可以通过<router-link>The tag implements the rendering of divided pages within a single page,It's just that the page navigation of the applet is relatively speaking,比较简单.

There are two types of page navigation in the applet,声明式导航和编程式导航,话不多说,我们现在正式开始.

1.1 声明式导航

Declarative navigation is the use of applet<navigator>实现的,其中有url属性,It's like a browser in effecta超链接标签.

1.1.1 导航到tarBar页面

Remember what we learned earliertarBar是啥不,底部的导航栏,Click to jump to the corresponding page,而用<navigator>也可以实现.

We need to set two properties in navigator组件中,url和open-type.

• url：Set the location of the page that needs to be jumped（页面地址）,And it must be preceded by/开头,比如——url = '/pages/content/conten'
  最后一个contentNo need to add file suffix.

• open-type：设置navigator的跳转方式,Here the selection value is switchTab,Indicates that the jumping page is configured totarBar中的.
  tarBar页面配置：
  在app.json文件中
  
  In this way, we realize the click to jump totarBarin the settings page.

<navigator url="/pages/list/list">点击跳转</navigator>

You can also nest other components inside,Such as nesting onebutton.

1.1.2 导航到非tarBar页面

非tarBarThe page is where you arepageFolder already defined pages,但是没有在app.json中的tarBar配置.

在实际开发中,This kind of scene is very common,A more complex applet will have more pages,And so many pages will not be theretarBar中配置,All such page jumps have to rely on this method to achieve it.

与上文一样,也是需要url和open-type两个属性,url的写法不变,有变化的是open-typeThe value of needs to benavigate.

<navigator url="/pages/list/list" open-type='navigate'>
</navigator>

1.1.3 后退导航

<navigator>You can also implement the page back function.

At this time we don't need to set iturl属性了,需要更改的是,设置open-type的值为navigateBack.

我们可以通过设置deltaSet the level of fallback,如果不设置,Then the default value will be 1.

<navigator open-type="navigateBack" delta='1'></navigator>

1.2 编程式导航

Programmatic navigation is the use of WeChat Mini Program top-level objectswxThe following methods can be implemented,Next we will explain them one by one.

1.2.1 导航到tarBar页面

我们将使用wx下的switchTab(obj)方法,其中obj为对象.

There are four properties in an object,url、success、fail、complete.

其中`

• urlis the address of the page to jump to
• success It is the callback function for the successful execution of the interface call
• failIt is the callback function that is executed when the interface call fails
• completeIs the callback function that completes the call execution,无论成功与否,都会执行.

wx.swithTab({
    
	url : '/pages/list/list',
	...
	)}

1.2.2 导航到非tarBar页面

To achieve this function we need to callwx下的navigateTo（obj）方法.

The parameter types in the object and 1.2.1一致.

wx.navigateTo({
    
	url : '/page/list/list',
	success : function(){
    console.log('success');}
	})

1.2.3 后退导航

Here's the back navigation feature,We need to use the samewxunder the top-level objectnavigateBack（obj）方法.

不过不同的是,obj对象中的参数,url改为delta,said to be back 层级,默认值为1,That is, go back one page.

1.3 导航传参

If we implement page jump after,When the next page wants to call the parameters of the previous page,我们该怎么办？

At this time, you can use the navigation parameters,Navigation parameters are actually and used in the browserGET请求很像,Parameters can be set in url中,Pass to the next page.

The format is also through the method of key-value pairs,Used between paths and parameters?隔开,键与值之间用=隔开,used between each parameter&隔开.

如下所示：

url= "/pages/list/list?name=myname&pass=yes"

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力！！！

债见~~