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

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容
🌸个人主页： 长风清留杨的博客
🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。
✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战
🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

页面导航

编程式导航

导航到 tabBar 页面

调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下

导航到tabBar页面案例

首先在app.json文件中配置一个message页面,在Pages中配置好message之后保存，目录中会自动出现message的相关文件,并且要把message加入到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文件：

<!--pages/message/message.wxml-->
<text>我是消息页面</text>
<text>公众号：小白的大数据之旅</text>

编写index.wxml文件，设置一个按钮，给按钮绑定一个事件，点击按钮之后触发事件，然后对事件进行处理，跳转到message.wxml页面中

index.wxml：

<button bind:tap="changeMess">
    跳转到message
</button>

编写index.js文件，捕捉刚才index.wxml文件中的事件，点击按钮之后就捕捉，捕捉到之后就进行处理，进行跳转页面，跳转到message.wxml页面

index.js文件：

// 定义一个页面对象
Page({
    // 定义一个方法，用于切换页面到消息页面
    changeMess: function() {
        // 调用小程序提供的switchTab方法，用于跳转到tabBar页面
        wx.switchTab({
            // 指定要跳转的页面的路径
            url: '/pages/message/message',
        })
    }
})

演示一下结果，在index.wxml页面点击按钮就可以跳转到message.wxml页面

导航到非 tabBar 页面

调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：

导航到非tabBar页面案例

首先在app.json文件中配置一个message页面,在Pages中配置好message之后保存，目录中会自动出现message的相关文件,但是这一次不需要把message加入到tabBar的配置中，将message定义为非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            
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
  }

message.wxml文件：

<!--pages/message/message.wxml-->
<text>我是消息页面</text>
<text>公众号：小白的大数据之旅</text>

编写index.wxml文件，定义一个按钮，给按钮绑定一个事件，点击按钮后触发事件，然后对事件进行处理，进行跳转页面

index.wxml文件：

<button bind:tap="changeMess">
    跳转到message
</button>

编写index.js文件，对index.wxml文件中的事件进行逻辑处理，处理逻辑为点击index.wxml页面中的按钮后，跳转到message.wxml页面

index.js文件：

// 定义一个页面对象
Page({
    // 在这个页面对象中定义一个名为changeMess的方法
    changeMess: function() {
        // 调用小程序的navigateTo接口跳转到指定页面
        wx.navigateTo({
            // 指定要跳转的页面的路径
            url: '/pages/message/message'
        })
    }
})

演示一下结果：

点击index.wxml页面的按钮，就可以直接跳转到message.wxml页面

后退导航

调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

后退导航案例演示

首先我们先使用非tabBar页面的跳转，进行两个页面的跳转，通过index页面跳转到individual页面然后再跳转到message页面，然后在message页面配置两个按钮，一个按钮是返回上一页，一个按钮是返回上两页，废话不多说，直接开始实操！

首先在app.json中的pages中定义message和individual

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"
  }

在index.wxml文件中设置一个按钮并绑定上事件，点击按钮跳转到individual页面,所以在index.js文件中编写对index.wxml文件中的事件进行处理

index.wxml文件：

<button bind:tap="to_individual">
    跳转到individual
</button>

index.js文件：

Page({
    to_individual(){
        wx.navigateTo({
          url: '/pages/individual/individual',
        })
    }
})

在indicidual.wxml文件中设置一个按钮并绑定上事件，点击按钮跳转到message页面,然后在indicidual.js文件中编写对indicidual.wxml中事件的处理逻辑

indicidual.wxml文件：

<button bind:tap="to_message">
    跳转到message
</button>

indicidual.js文件：

Page({
  to_message(){
    wx.navigateTo({
      url: '/pages/message/message',
    })
  }
})

在message.wxml文件中定义两个按钮，一个是返回上一页，一个是返回上上一页

message.wxml文件：

<text>公众号：小白的大数据之旅</text>
<button bind:tap="back_1">
返回上一页
</button>
<button bind:tap="back_2">
返回上两页
</button>

最后在message.js文件中编写message.wxml文件的返回逻辑，message.wxml文件中有两个事件，一个跳转上一页，一个跳转前两页

message.js文件：

// pages/message/message.js
Page({

  back_1(){
      // 默认后退上一页
      wx.navigateBack()
  },
  back_2(){
      wx.navigateBack({
          // 后退前两页
          delta:2
      })
  }
})