零基础微信小程序开发——页面导航之声明式导航（保姆级教程+超详细）

小程序开发

页面导航

什么是页面导航

页面导航，顾名思义，是指在小程序或网页中不同页面之间的相互跳转功能。这种跳转功能允许用户在不同内容或功能区域之间快速移动，从而提升用户体验和互动性。

在小程序开发中，页面导航是实现页面间切换和交互的重要手段。它允许开发者设计多种跳转逻辑，以满足用户在不同场景下的需求。例如，用户可能从首页跳转到商品详情页，或者从购物车页面跳转到支付页面等。

浏览器中实现页面导航的方式有如下两种：

1. <a>链接：这是HTML中用于创建超链接的标签，通过它可以实现从一个页面跳转到另一个页面的功能。在小程序开发中，虽然不直接使用HTML，但类似的跳转逻辑是通过小程序的路由系统来实现的。
2. location.href：在JavaScript中，location.href属性用于获取或设置当前页面的URL。通过修改这个属性，可以实现页面的跳转。在小程序开发中，虽然不直接使用JavaScript的location.href，但类似的跳转操作是通过调用小程序的API来完成的。

小程序中实现页面导航的两种方式

声明式导航

声明式导航是小程序中实现页面跳转的一种直观且易于理解的方式。它主要通过在页面上声明一个<navigator>导航组件来实现。这个组件类似于Web开发中的<a>标签，用于创建一个链接，当用户点击这个链接时，就会触发页面跳转。

在<navigator>组件中，可以通过设置相关属性来指定跳转的目标页面、跳转方式等。例如，可以使用url属性来指定目标页面的路径，使用open-type属性来指定跳转的类型（如普通跳转、重定向等）。

声明式导航的优点是直观易懂，易于在页面中布置导航链接。然而，它的灵活性相对较低，只能实现简单的页面跳转逻辑。

编程式导航

与声明式导航相比，编程式导航提供了更灵活和强大的页面跳转能力。它主要通过调用小程序的导航API来实现页面的跳转。这些API允许开发者在JavaScript代码中编写跳转逻辑，从而实现更加复杂的页面跳转需求。

在编程式导航中，常用的导航API包括wx.navigateTo、wx.redirectTo、wx.switchTab等。这些API可以根据需要传递不同的参数来指定跳转的目标页面、是否保留当前页面、是否显示动画效果等。

编程式导航的优点是灵活性强，可以实现复杂的跳转逻辑。同时，它还可以与小程序的其他功能（如用户状态管理、数据请求等）相结合，实现更加丰富的用户体验。

导航到 tabBar 页面

在小程序开发中，tabBar通常用于在底部显示一个导航栏，用户可以通过点击不同的tab项来快速切换到不同的页面。当使用声明式导航（即通过在WXML中使用<navigator>组件）来导航到tabBar页面时，需要注意以下几点：

1. tabBar页面配置：
   • 首先，确保目标页面（即要导航到的页面）已经被配置为tabBar页面。 - 这通常是在小程序的配置文件（如app.json）中完成的。
2. <navigator>组件属性：
   • 在使用<navigator>组件时，需要设置url属性和open-type属性来指定跳转的目标页面和跳转方式。
   • url属性表示要跳转的页面的地址，这个地址必须以“/”开头，并且应该与小程序配置文件中的页面路径相匹配。
   • open-type属性表示跳转的方式，对于导航到tabBar页面，这个值必须设置为switchTab。

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

• <navigator>组件的url属性被设置为"/pages/message/message"，这意味着当用户点击这个导航按钮时，他们将被导航到pages/message/message这个tabBar页面。
• open-type属性被设置为switchTab，这确保了跳转是以切换tab的方式进行的。

案例演示

首先在app.json中添加一个配置，生成一个message.wxml,而且必须有tabBar的配置，相当于需要跳转的页面必须是tabBar的页面

app.json文件：

{
    "pages": [
      "pages/index/index",
      "pages/logs/logs",
      "pages/home/home",
      "pages/message/message"
    ],
    "window": {
      "navigationBarBackgroundColor": "#000000", 
      "navigationBarTextStyle": "white",        
      "navigationBarTitleText": "我是全局配置", 
      "backgroundColor": "#ffffff",             
      "enablePullDownRefresh": false            
    },
    "tabBar": {
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "/images/tabs/home.png",
                "selectedIconPath": "/images/tabs/home-active.png"
            },
            {
                "pagePath": "pages/message/message", 
                "text": "消息",                       
                "iconPath": "/images/tabs/mess.png", 
                "selectedIconPath": "/images/tabs/mess-active.png" 
            }
        ]
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  }

写入上面的代码之后就可以看到自动生成的message.wxml

在message.wxml文件中写上如下内容

message.wxml文件：

<text>我是消息页面</text>

然后在index.wxml文件中编写如下内容，进行跳转，编写一个按钮主键，点击按钮就跳转到message.wxml页面中

index.wxml文件：

<button>
    <!-- 注意，open-type="switchTab" 一定要有这个设置才能够跳转 指定跳转到的页面路径为 /pages/message/message 也就是message.wxml页面-->
    <navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
</button>

然后点击按钮就可以跳转到message.wxml页面

导航到非 tabBar 页面

在小程序开发中，非tabBar页面是指那些没有被配置为底部导航栏（tabBar）的页面。当使用声明式导航（即通过<navigator>组件）来跳转到这些非tabBar页面时，需要注意以下几点：

1. 指定url属性：
   • url属性用于指定要跳转的页面的地址。这个地址必须以“/”开头，并且应该与小程序中的页面路径相匹配。
2. open-type属性：
   • open-type属性用于指定跳转的方式。对于导航到非tabBar页面，这个值通常设置为navigate。
   • 为了简便，在导航到非tabBar页面时，open-type="navigate"属性可以省略。这是因为navigate是<navigator>组件的默认跳转方式。
3. 注意事项：
   • 尽管open-type="navigate"属性可以省略，但在某些情况下，明确指定open-type属性可以使代码更加清晰和易于理解。
   • 确保目标页面（即要跳转的页面）已经存在，并且路径正确无误。

案例演示

跟导航到tabBar页面不一样，使用open-type="navigate"可以直接导航到非tabBar页面，跟上面的案例完全相反 现在先去配置individual.wxml文件，该文件不需要在app.json中配置tabBar的属性只需要配置在app.json中的pages中来表名该页面在小程序中的路径

app.json文件：

{
    "pages": [
      "pages/index/index",
      "pages/logs/logs",
      "pages/home/home",
      "pages/message/message",
      "pages/individual/individual"
    ],
    "window": {
      "navigationBarBackgroundColor": "#000000", 
      "navigationBarTextStyle": "white",        
      "navigationBarTitleText": "我是全局配置", 
      "backgroundColor": "#ffffff",             
      "enablePullDownRefresh": false            
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  }

individual.wxml文件：

<text>公众号：小白的大数据之旅</text>

然后在index.wxml中编写一个按钮，点击按钮进行跳转

index.wxml文件：

<button>
    <navigator url="/pages/individual/individual" open-type="navigate">导航到消息页面</navigator>
</button>

点击按钮进行跳转

后退导航

在小程序开发中，页面导航是一个重要的功能，它允许用户在不同的页面之间进行切换。其中，后退导航是页面导航的一种常见形式，它允许用户返回到之前访问过的页面。

为了实现后退导航，小程序提供了声明式导航的方法。具体来说，就是通过使用<navigator>组件并设置其open-type属性和delta属性来实现。

1. open-type属性：
   • 这个属性用于指定导航的类型。
   • 在进行后退导航时，open-type的值必须设置为navigateBack，这表示要进行后退操作。
2. delta属性：
   • 这个属性用于指定要后退的层级数。
   • delta的值必须是数字，表示用户希望后退到之前访问过的第几个页面。例如，如果delta的值为1，则用户将返回到上一页面。
   • 如果只是为了后退到上一页面，并且不需要指定具体的层级数，那么可以省略delta属性，因为其默认值就是1。

案例演示

现在演示一下后退导航的操作，分别演示一下后退上一页和后退前两页(也就是后退上上页)

首先创建individual.wxml和message.wxml文件，如果代码案例的步骤做过的话应该已经有了这两个文件，这里再重复一下

首先在app.json中配置这两个页面

app.json文件：

{
    "pages": [
      "pages/index/index",
      "pages/logs/logs",
      "pages/home/home",
      "pages/message/message",
      "pages/individual/individual"
    ],
    "window": {
      "navigationBarBackgroundColor": "#000000", 
      "navigationBarTextStyle": "white",        
      "navigationBarTitleText": "我是全局配置", 
      "backgroundColor": "#ffffff",             
      "enablePullDownRefresh": false            
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  }

然后pages目录就有了individual和message这两个文件了

编写index.wxml文件，设置一个按钮，用来跳转到individual.wxml页面

index.wxml文件：

<button>
    <navigator url="/pages/individual/individual" open-type="navigate">导航到个人中心</navigator>
</button>

编写individual.wxml文件，设置一个按钮，用来跳转到message.wxml页面

individual.wxml文件：

<text>公众号：小白的大数据之旅</text>
<button>
    <navigator url="/pages/message/message" open-type="navigate">导航到消息页面</navigator>
</button>

编写message.wxml文件，设置两个按钮，一个是返回上一页，一个是返回上上一页

message.wxml文件：

<!--pages/message/message.wxml-->
<text>我是消息页面</text>
<button>
    <navigator open-type="navigateBack" delta="2">返回前两页</navigator>
</button>
<button>
    <navigator open-type="navigateBack">返回上一页</navigator>
</button>

1. 第一个按钮：
   • <button>：这是一个按钮元素。
   • <navigator open-type="navigateBack" delta="2">：这是一个导航器元素，用于控制页面跳转。
   • open-type=“navigateBack”：表示这个导航器的操作类型是返回（即导航回上一个或上几个页面）。
   • delta=“2”：表示返回的页面数量为2，即点击这个按钮后，会返回到当前页面的前两页。
   • 返回前两页：这是按钮上显示的文本，告诉用户点击这个按钮可以返回前两页。
2. 第二个按钮：
   • <button>：同样是一个按钮元素。
   • <navigator open-type="navigateBack">：这是另一个导航器元素，用于控制页面跳转。
   • open-type=“navigateBack”：表示这个导航器的操作类型也是返回。
   • 由于没有指定delta属性，所以默认返回上一页（即delta默认为1）。
   • 返回上一页：这是按钮上显示的文本，告诉用户点击这个按钮可以返回上一页。

现在来演示一下，注意看动图中的两个返回，看看是不是一个返回上一页，一个是返回前两页