正文

微信小程序页面跳转传参技巧，轻松实现数据传递与页面交互

/0 浏览量
0406

在微信小程序开发中，页面跳转是常见的操作，而如何在跳转过程中传递数据，实现页面间的交互，是每个开发者都需要掌握的技巧。下面，我将详细介绍微信小程序页面跳转传参的几种方法，让你轻松实现数据传递与页面交互。

一、使用URL参数传递数据

最简单的方式是通过URL参数来传递数据。这种方式适用于传递少量数据，如用户ID、状态码等。

1. 发起页面

在发起页面，使用wx.navigateTo或wx.redirectTo方法进行页面跳转，并在URL中添加参数：

// 发起页面
wx.navigateTo({
  url: '/pages/detail/detail?id=123&status=1'
});

2. 接收页面

在接收页面，使用onLoad函数获取URL参数：

// 接收页面
Page({
  onLoad: function (options) {
    console.log(options.id); // 输出：123
    console.log(options.status); // 输出：1
  }
});

二、使用全局变量传递数据

当页面跳转频繁，或者需要传递大量数据时，可以使用全局变量来传递数据。

1. 设置全局变量

在发起页面，使用wx.setStorageSync方法设置全局变量：

// 发起页面
wx.setStorageSync('data', { id: 123, status: 1 });

2. 获取全局变量

在接收页面，使用wx.getStorageSync方法获取全局变量：

// 接收页面
Page({
  onLoad: function () {
    let data = wx.getStorageSync('data');
    console.log(data.id); // 输出：123
    console.log(data.status); // 输出：1
  }
});

三、使用事件传递数据

当需要在页面跳转后，通过事件通知接收页面数据变化时，可以使用事件传递数据。

1. 发起页面

在发起页面，绑定事件并传递数据：

// 发起页面
Page({
  bindSubmit: function (e) {
    // 获取表单数据
    let data = e.detail.value;
    // 发送事件
    this.triggerEvent('dataChange', data);
  }
});

2. 接收页面

在接收页面，监听事件并获取数据：

// 接收页面
Page({
  onLoad: function () {
    // 监听事件
    this.on('dataChange', function (data) {
      console.log(data.id); // 输出：123
      console.log(data.status); // 输出：1
    });
  }
});

四、使用自定义组件传递数据

当需要在页面跳转后，通过自定义组件传递数据时，可以使用自定义组件来实现。

1. 创建自定义组件

在自定义组件中，定义数据和方法：

// 自定义组件
Component({
  data: {
    data: { id: 123, status: 1 }
  },
  methods: {
    changeData: function (newData) {
      this.setData({ data: newData });
    }
  }
});

2. 使用自定义组件

在页面中引入自定义组件，并传递数据：

// 页面
<custom-component data="{{data}}"></custom-component>

3. 修改数据

在自定义组件中，修改数据并通知页面：

// 自定义组件
Component({
  methods: {
    changeData: function (newData) {
      this.setData({ data: newData });
      this.triggerEvent('dataChange', newData);
    }
  }
});

4. 接收数据

在页面中监听事件并获取数据：

// 页面
Page({
  onReady: function () {
    this.on('dataChange', function (data) {
      console.log(data.id); // 输出：123
      console.log(data.status); // 输出：1
    });
  }
});

通过以上几种方法，你可以轻松实现微信小程序页面跳转传参，实现数据传递与页面交互。在实际开发过程中，可以根据具体需求选择合适的方法。

-- 展开阅读全文 --