小程序页面间数据传递和通信方式

2023-11-12 17:34:51

小程序页面间数据传递和通信方式

小程序页面间的数据传递和通信，是开发小程序时经常会遇到的一项任务。小程序提供了几种不同的方式来实现页面间的数据传递和通信，包括小程序全局数据、小程序本地数据、小程序 SessionStorage、小程序 LocalStorage、小程序 App.js、小程序 onLaunch、小程序 onShow、小程序 onLoad、小程序 wx.setStorageSync、小程序 wx.getStorageSync、小程序 wx.removeStorageSync、小程序 wx.clearStorageSync、小程序 wx.navigateTo、小程序 wx.redirectTo、小程序 wx.switchTab、小程序 wx.navigateBack、小程序 wx.reLaunch。

一、小程序全局数据

小程序全局数据是所有小程序页面都可以访问的数据。小程序全局数据可以通过在 App.js 文件中的globalData 对象中定义来实现。

App({
  globalData: {
    userInfo: null
  }
});

小程序页面可以使用如下代码来访问小程序全局数据：

var app = getApp();
app.globalData.userInfo

二、小程序本地数据

小程序本地数据是某个小程序页面独有的数据。小程序本地数据可以通过在页面的data对象中定义来实现。

Page({
  data: {
    count: 0
  }
});

小程序页面可以使用如下代码来访问小程序本地数据：

var count = this.data.count;

三、小程序 SessionStorage

小程序 SessionStorage 是可以在小程序页面之间共享的数据，但只在当前小程序会话内有效。小程序 SessionStorage 可以通过 wx.setStorageSync() 方法来设置，可以通过 wx.getStorageSync() 方法来获取，可以通过 wx.removeStorageSync() 方法来删除，可以通过 wx.clearStorageSync() 方法来清空。

// 设置 SessionStorage
wx.setStorageSync('key', 'value');

// 获取 SessionStorage
var value = wx.getStorageSync('key');

// 删除 SessionStorage
wx.removeStorageSync('key');

// 清空 SessionStorage
wx.clearStorageSync();

四、小程序 LocalStorage

小程序 LocalStorage 是可以在小程序页面之间共享的数据，并且在小程序会话结束之后仍然有效。小程序 LocalStorage 可以通过 wx.setStorageSync() 方法来设置，可以通过 wx.getStorageSync() 方法来获取，可以通过 wx.removeStorageSync() 方法来删除，可以通过 wx.clearStorageSync() 方法来清空。

// 设置 LocalStorage
wx.setStorageSync('key', 'value');

// 获取 LocalStorage
var value = wx.getStorageSync('key');

// 删除 LocalStorage
wx.removeStorageSync('key');

// 清空 LocalStorage
wx.clearStorageSync();

五、小程序 App.js

小程序 App.js 是小程序的入口文件。小程序 App.js 可以通过在 onLaunch() 方法中定义小程序全局数据、小程序本地数据、小程序 SessionStorage、小程序 LocalStorage 来实现小程序页面间的数据传递和通信。

App({
  onLaunch() {
    // 设置小程序全局数据
    this.globalData.userInfo = null;

    // 设置小程序本地数据
    this.setData({
      count: 0
    });

    // 设置小程序 SessionStorage
    wx.setStorageSync('key', 'value');

    // 设置小程序 LocalStorage
    wx.setStorageSync('key', 'value');
  }
});

六、小程序 onLaunch()

小程序 onLaunch() 方法是小程序启动时执行的方法。小程序 onLaunch() 方法可以用来初始化小程序全局数据、小程序本地数据、小程序 SessionStorage、小程序 LocalStorage。

Page({
  onLaunch() {
    // 设置小程序全局数据
    this.globalData.userInfo = null;

    // 设置小程序本地数据
    this.setData({
      count: 0
    });

    // 设置小程序 SessionStorage
    wx.setStorageSync('key', 'value');

    // 设置小程序 LocalStorage
    wx.setStorageSync('key', 'value');
  }
});

七、小程序 onShow()

小程序 onShow() 方法是小程序页面显示时执行的方法。小程序 onShow() 方法可以用来获取小程序全局数据、小程序本地数据、小程序 SessionStorage、小程序 LocalStorage。

Page({
  onShow() {
    // 获取小程序全局数据
    var userInfo = this.globalData.userInfo;

    // 获取小程序本地数据
    var count = this.data.count;

    // 获取小程序 SessionStorage
    var value = wx.getStorageSync('key');

    // 获取小程序 LocalStorage
    var value = wx.getStorageSync('key');
  }
});

八、小程序 onLoad()

小程序 onLoad() 方法是小程序页面加载时执行的方法。小程序 onLoad() 方法可以用来获取小程序全局数据、小程序本地数据、小程序 SessionStorage、小程序 LocalStorage。

Page({
  onLoad() {
    // 获取小程序全局数据
    var userInfo = this.globalData.userInfo;

    // 获取小程序本地数据
    var count = this.data.count;

    // 获取小程序 SessionStorage
    var value = wx.getStorageSync('key');

    // 获取小程序 LocalStorage
    var value = wx.getStorageSync('key');
  }
});

九、小程序 wx.setStorageSync()

小程序 wx.setStorageSync() 方法可以用来设置小程序 SessionStorage 和小程序 LocalStorage。

// 设置 SessionStorage
wx.setStorageSync('key', 'value');

// 设置 LocalStorage
wx.setStorageSync('key', 'value');

十、小程序 wx.getStorageSync()

小程序 wx.getStorageSync() 方法可以用来获取小程序 SessionStorage 和小程序 LocalStorage。

// 获取 SessionStorage
var value = wx.getStorageSync('key');

// 获取 LocalStorage
var value = wx.getStorageSync('key');

十一、小程序 wx.removeStorageSync()

小程序 wx.removeStorageSync() 方法可以用来删除小程序 SessionStorage 和小程序 LocalStorage。

// 删除 SessionStorage
wx.removeStorageSync('key');

// 删除 LocalStorage
wx.removeStorageSync('key');

十二、小程序 wx.clearStorageSync()

小程序 wx.clearStorageSync() 方法可以用来清空小程序 SessionStorage 和小程序 LocalStorage。

// 清空 SessionStorage
wx.clearStorageSync();

// 清空 LocalStorage
wx.clearStorageSync();

十三、小程序 wx.navigateTo()

小程序 wx.navigateTo() 方法可以用来跳转到另一个小程序页面。

wx.navigateTo({
  url: 'page/index/index'
});

十四、小程序 wx.redirectTo()

小程序 wx.redirectTo() 方法可以用来重定向到另一个小程序页面。

wx.redirectTo({
  url: 'page/index/index'
});

十五、小程序 wx.switchTab()

小程序 wx.switchTab() 方法可以用来切换到另一个小程序标签页。

wx.switchTab({
  url: 'page/index/index'
});

十六、小程序 wx.navigateBack()

小程序 wx.navigateBack() 方法可以用来返回上一个小程序页面。

wx.navigateBack();

十七、小程序 wx.reLaunch()

小程序 wx.reLaunch() 方法可以用来重新加载小程序。

wx.reLaunch({
  url: 'page/index/index'
});

结语

小程序提供了多种不同的方式来实现页面间的数据传递和通信，我们可以根据实际情况选择合适的方式来实现。

Kyle

探索Web开发资源和人工智能教程的代码社区

联系我

扫码关注微信公众号

小程序页面间数据传递和通信方式