微信小程序页面跳转传参

最新推荐文章于 2025-06-27 15:13:25 发布

原创最新推荐文章于 2025-06-27 15:13:25 发布 · 1.9k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

教程同时被 2 个专栏收录

9 篇文章

订阅专栏

微信小程序

5 篇文章

订阅专栏

本文介绍了微信小程序中如何实现页面间的跳转以及如何传递参数。在page1中设置点击事件并跳转到page2，同时传递id值。在page2的onLoad方法中接收到参数并能在控制台看到输出。此外，还讲解了如何从page2返回page1，由于返回操作不触发页面加载，因此需要在onShow中处理相关逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

跳转到下一个页面

在page1.wxml写点击事件

<button bindtap="next_page" type="primary">跳转到下一个页面</button>

page1.js

  data: {
    id: 0
  },

  next_page(){
    wx.navigateTo({
      url: '/pages/demo1/demo1?id=' + this.data.id,
    })
  },

在page2.js的onLoud中控制台输出传递的id值

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options.id)
  },

控制台输出结果

从本页面返回上一个页面

在page2.wxml写点击事件

<button bindtap="back_page" type="primary">返回上一个页面</button>

page2.js

  data: {
    index: 1
  },

  back_page() {
    var pages = getCurrentPages();
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: this.data.index
    })
    wx.navigateBack({
      delta: 0,
    })
  },

因为返回上一个页面，页面不会加载，需要在onShow中

  data: {
    index: 0
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log(this.data.index)
  },

返回上一个页面，控制台输出结果
上一个页面onshow输出