微信小程序 页面跳转和数据传递实例详解

一、页面跳转

在微信小程序中，页面跳转有两种方式，分别是：

• wx.navigateTo：保留当前页面，跳转到应用内的某个页面。可通过wx.navigateBack方法返回到原页面。
• wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。不可通过wx.navigateBack方法返回到原页面。

1. wx.navigateTo

wx.navigateTo方法可接受一个参数url，用于指定要跳转的页面路径。该方法跳转后会在当前页面栈中加入一个新页面，并保留原页面。因此，在新页面中可以通过wx.navigateBack方法返回到原页面。

例如，我们在index页面中有一个按钮，点击后跳转到detail页面：

<!-- index.wxml -->
<button bindtap="gotoDetail">跳转到详情页</button>

// index.js
Page({
  gotoDetail: function () {
    wx.navigateTo({
      url: '/pages/detail/detail'
    })
  }
})

注意，wx.navigateTo方法跳转的页面路径应为相对路径，距离当前页面路径的层级，以/开头。例如，上述代码中url: '/pages/detail/detail'将跳转至pages目录下的detail页面。

2. wx.redirectTo

wx.redirectTo方法与wx.navigateTo略有不同，它会关闭当前页面，跳转到指定页面。因此，在使用该方法跳转的同时，不能通过wx.navigateBack返回到原页面。

例如，我们在index页面中有一个按钮，点击后跳转到about页面：

<!-- index.wxml -->
<button bindtap="gotoAbout">跳转到关于页</button>

// index.js
Page({
  gotoAbout: function () {
    wx.redirectTo({
      url: '/pages/about/about'
    })
  }
})

二、数据传递

在微信小程序中，页面跳转时可以通过url参数传递数据。传递数据的方式有两种，分别是：

• 查询参数：在url中通过?分隔，以键值对的形式传递参数。例如：/pages/detail/detail?key=value
• 哈希参数：在url中通过#分隔，以键值对的形式传递参数。例如：/pages/detail/detail#key=value

1. 查询参数

可以在跳转页面时，通过url参数的方式传递数据。例如，我们在index页面中有一个输入框和按钮，输入框中输入内容，点击按钮后跳转到search页面，并将输入框的内容作为查询参数传递过去：

<!-- index.wxml -->
<view>
  <input placeholder="请输入搜索内容" value="{{inputValue}}" bindinput="inputChange" />
  <button bindtap="gotoSearch">搜索</button>
</view>

// index.js
Page({
  data: {
    inputValue: ''
  },
  inputChange: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },
  gotoSearch: function () {
    wx.navigateTo({
      url: '/pages/search/search?key=' + this.data.inputValue
    })
  }
})

在search页面中，可以通过getCurrentPages方法获取传递过来的参数。getCurrentPages方法返回当前页面栈中所有页面的对象数组，最后一个就是当前页面。页面对象中有一个options对象，包含了传递过来的参数。

例如，我们在search页面中打印一下传递过来的参数：

// search.js
Page({
  onLoad: function (options) {
    console.log(options.key) // 输出搜索内容
  }
})

2. 哈希参数

哈希参数与查询参数类似，不同之处在于传递的参数不会变更url中的路径，只会改变hash值。这种方式通常用于一些需要在同一页面内切换不同数据的场景。

例如，我们在index页面中有三个按钮，分别对应三个商品列表，点击按钮后跳转到list页面，并将对应商品的hash值传递过去：

<!-- index.wxml -->
<view>
  <button bindtap="gotoList" data-id="1">商品1列表</button>
  <button bindtap="gotoList" data-id="2">商品2列表</button>
  <button bindtap="gotoList" data-id="3">商品3列表</button>
</view>

// index.js
Page({
  gotoList: function (e) {
    var id = e.currentTarget.dataset.id
    wx.navigateTo({
      url: '/pages/list/list#' + id
    })
  }
})

在list页面中，可以通过onShow生命周期函数获取传递过来的参数。与查询参数不同，哈希参数获取参数的方式为getCurrentPages()[n].options.hash，其中n为当前页面在页面栈中的顺序。

// list.js
Page({
  onShow: function () {
    var hash = getCurrentPages()[getCurrentPages().length - 1].options.hash
    console.log(hash) // 输出对应的商品id
  }
})

三、例子说明

1. 传递字符串参数和数字参数

在index页面点击按钮跳转到detail页面，同时传递一个字符串参数和一个数字参数。在detail页面显示这两个参数。

<!-- index.wxml -->
<button bindtap="gotoDetail">跳转到详情页</button>

// index.js
Page({
  gotoDetail: function () {
    wx.navigateTo({
      url: '/pages/detail/detail?key1=hello&key2=123'
    })
  }
})

// detail.js
Page({
  onLoad: function (options) {
    console.log(options.key1) // 输出 hello
    console.log(options.key2) // 输出 123
  }
})

2. 同页面内切换数据

在index页面中有两个按钮，点击后在当前页面内切换不同的数据。通过哈希参数传递按钮对应的数据类型。在index页面中显示对应数据类型的数据。

<!-- index.wxml -->
<view>
  <view class="buttons">
    <button class="{{activeIndex==1?'active':''}}" bindtap="switchData" data-type="1">数据类型1</button>
    <button class="{{activeIndex==2?'active':''}}" bindtap="switchData" data-type="2">数据类型2</button>
  </view>
  <view class="data">
    <block wx:if="{{activeIndex==1}}">这是数据类型1的数据</block>
    <block wx:if="{{activeIndex==2}}">这是数据类型2的数据</block>
  </view>
</view>

// index.js
Page({
  data: {
    activeIndex: 1
  },
  switchData: function (e) {
    var type = e.currentTarget.dataset.type
    this.setData({
      activeIndex: type
    })
    wx.redirectTo({
      url: '/pages/index/index#' + type
    })
  },
  onLoad: function (options) {
    var type = options.hash || 1
    this.setData({
      activeIndex: type
    })
  }
})

上述代码中，我们在跳转时使用了wx.redirectTo方法，因为我们需要关闭当前页面，并在当前页面栈中加入一个新页面，才能使用哈希参数传递数据。假如我们使用wx.navigateTo方法跳转，新页面会压在当前页面上，哈希参数传递数据时会修改原页面的哈希值，从而影响当前页面的显示。

在index页面中，我们在onLoad生命周期函数中获取哈希参数，根据参数值切换不同的数据类型。

以上就是微信小程序页面跳转和数据传递的实例详解。