正文

微信小程序JS传值技巧，轻松实现页面间数据传递

/0 浏览量
0412

在微信小程序中，实现页面间数据传递是开发过程中非常常见的需求。本文将为你详细介绍微信小程序中JS传值的技巧，让你轻松实现页面间数据传递。

一、页面跳转传值

1. 使用URL传值

当进行页面跳转时，可以在URL中携带参数，然后在目标页面中解析这些参数。

示例：

// 在A页面中
wx.navigateTo({
  url: `/pages/B/B?name=张三&age=18`
});

// 在B页面中
Page({
  onLoad(options) {
    console.log(options.name); // 输出：张三
    console.log(options.age); // 输出：18
  }
});

2. 使用全局变量传值

将需要传递的数据存储在全局变量中，然后在目标页面中读取这些数据。

示例：

// 在A页面中
App.globalData.name = '张三';
App.globalData.age = 18;

wx.navigateTo({
  url: '/pages/B/B'
});

// 在B页面中
Page({
  onLoad() {
    console.log(App.globalData.name); // 输出：张三
    console.log(App.globalData.age); // 输出：18
  }
});

3. 使用页面栈传值

通过页面栈，可以在不同页面间传递数据。

示例：

// 在A页面中
Page({
  data: {
    name: '张三',
    age: 18
  }
});

// 在B页面中
Page({
  onLoad(options) {
    console.log(options.name); // 输出：张三
    console.log(options.age); // 输出：18
  }
});

二、事件触发的数据传递

1. 使用bindtap绑定事件

在组件上绑定bindtap事件，并在事件处理函数中传递数据。

示例：

// 在A页面中
<view bindtap="passData">传递数据到B页面</view>

// 在A页面JS中
Page({
  passData() {
    const data = {
      name: '张三',
      age: 18
    };
    wx.navigateTo({
      url: `/pages/B/B?data=${JSON.stringify(data)}`
    });
  }
});

// 在B页面中
Page({
  onLoad(options) {
    const data = JSON.parse(options.data);
    console.log(data.name); // 输出：张三
    console.log(data.age); // 输出：18
  }
});

2. 使用getApp().globalData全局变量

在组件中，可以通过getApp().globalData获取全局变量中的数据。

示例：

// 在A页面中
Page({
  data: {
    name: '张三',
    age: 18
  }
});

// 在B页面中
Page({
  onLoad() {
    const app = getApp();
    console.log(app.globalData.name); // 输出：张三
    console.log(app.globalData.age); // 输出：18
  }
});

三、总结

通过以上技巧，你可以轻松实现微信小程序中页面间的数据传递。在实际开发中，可以根据具体需求选择合适的方法进行数据传递。希望本文对你有所帮助！

-- 展开阅读全文 --