原生小程序页面传值的方式

文章目录

1、通过URL的QueryString传递数据

（1）适用场景

（2）使用方式

（3）优缺点

2、利用Storage本地缓存

（1）适用场景

（2）使用方式

（3）优缺点

3、全局变量/全局数据传递

（1）适用场景

（2）使用方式

（3）优缺点 

4、通过自定义事件触发与监听

（1）适用场景

（2）使用方式

（3）优缺点 

---

1、通过URL的QueryString传递数据

（1）适用场景

         适用于页面之间简单的数据传递，如页面跳转时传递少量参数。

注意：

        当你在URL中传递数据时，不论数据本身是数字、布尔值、日期等类型，它们都会被转换为字符串形式，如果有需要，在接收页面需要进行类型的转换

（2）使用方式

        例子：A页面--->页面，传递参数为id=123

// 页面A
wx.navigateTo({
  var id= '123'
  url: '/pages/pageB/pageB?id=' + id
});

// 在页面B的生命周期函数中获取参数
Page({
  onLoad: function (options) {
    const id = options.id; // 获取传递的id参数
  }
});

（3）优缺点

• 优点：
  • 简单易用，无需额外的设置或监听
  • 支持页面间直接传递少量数据
• 缺点：
  • URL参数通常有长度限制，超过一定长度可能会被截断，限制了传递数据的大小
  • 参数暴露在URL中，不适合传递敏感信息
  • 对于复杂数据结构，需要进行手动拼接和解析，不够直观

2、利用Storage本地缓存

（1）适用场景

          适用于传递复杂数据，需要在不同页面之间共享少量数据或者需要将数据持久化存储时

（2）使用方式

// 在页面A中设置本地缓存
wx.setStorageSync('studentData', {
    'name': this.data.student.name,
    "id":this.data.student.id
    //......
})

//在B页面通过getStorageSync获取数据
const studentData= wx.getStorageSync('studentData'); 
const {name,id}=studentData
wx.removeStorageSync('studentData'); //如果不需要持久化，可以在这里清除存储

（3）优缺点

• 优点
  • 支持持久化存储，即使小程序关闭后再次打开也可以获取到存储的数据。
  • 可以存储较小的数据对象。
• 缺点：
  • 存储容量有限制，不适合存储大量数据。
  • 由于数据存储在本地，不适合存储敏感信息或需要严格保密的数据

3、全局变量/全局数据传递

（1）适用场景

        适用于在整个小程序中共享数据，需要频繁在不同页面间传递数据时。

（2）使用方式

// 在App实例中定义全局变量或全局数据
App({
  globalData: {
    userInfo: null,
    // 其他全局数据
  }
});

// 在其他页面中获取全局数据
const app = getApp();
const userInfo = app.globalData.userInfo;

// 在其他页面中修改全局数据
app.globalData.userInfo = { name: 'John', age: 30 };

（3）优缺点 

• 优点：
  • 方便在不同页面之间共享数据，全局访问简单。
  • 支持复杂数据结构。
• 缺点：
  • 不适合传递大量数据，因为全局数据会常驻内存，可能导致内存占用过高。
  • 可能会导致数据在不同页面间的耦合性增加，不够灵活。

4、通过自定义事件触发与监听

（1）适用场景

        适用于页面间的松耦合数据传递，特别是非父子关系的页面。

（2）使用方式

// 发送页面A
Page({
  sendEvent: function () {
    const data = { message: 'Hello from A' };
    this.triggerEvent('customEvent', data); // 触发自定义事件，并传递数据
  }
});

// 接收页面B
Page({
  onLoad: function () {
    this.onCustomEvent = this.onCustomEvent.bind(this);
    this.getOpenerEventChannel().on('customEvent', this.onCustomEvent); // 监听自定义事件
  },
  onCustomEvent: function (event) {
    const data = event.detail; // 获取传递的数据
    console.log(data.message); // 输出：Hello from A
  },
  onUnload: function () {
    this.getOpenerEventChannel().off('customEvent', this.onCustomEvent); // 页面卸载时解除监听
  }
});

（3）优缺点 

• 优点：
  • 实现页面之间的松耦合数据传递，不直接依赖页面之间的关系。
  • 支持非父子页面之间的数据传递。
• 缺点：
  • 不适合大规模数据传递，仅用于触发和监听少量的事件。
  • 需要手动管理事件监听和解除监听，容易出现遗漏和错误。