微信小程序开发实用技巧之数据传递和存储

下面就是关于微信小程序开发实用技巧之数据传递和存储的完整攻略。

下面就是关于微信小程序开发实用技巧之数据传递和存储的完整攻略。

数据传递

在小程序中，数据的传递通常需要经过多个页面或组件，因此在小程序中，数据传递是非常重要的。此处简单介绍两种数据传递方式：

通过URL传递数据

在小程序中，可以通过URL传递数据。具体做法是，使用小程序的内置API wx.navigateTo 或 wx.redirectTo 打开页面时，传递一个URL参数，然后在被打开的页面中使用 getCurrentPages() 获取当前页面栈实例，进而获取该页面的URL参数。

下面给出一个简单的示例：

打开A页面：

wx.navigateTo({
  url: '/pages/B/index?id=123&name=test',
})

在B页面获取URL参数：

var pages = getCurrentPages();  //获取当前页面栈实例
var currPage = pages[pages.length - 1];  //获取当前页面实例
var options = currPage.options;  //获取页面的参数
console.log(options.id)  //输出：123
console.log(options.name)  //输出：test

使用全局数据对象传递数据

小程序中的全局数据对象 getApp() 可以使得页面和组件之间共享数据。我们可以通过在 App() 函数中定义一个全局数据对象 globalData，然后在任何页面或组件中通过 getApp().globalData 对象获取这个对象。利用全局数据对象，我们就可以在页面和组件之间共享数据了。

下面给出一个简单的示例：

在 App() 函数中定义一个全局数据对象：

App({
  globalData: {
    userInfo: null,  //默认值为null
  }
})

在某个页面中设置全局数据：

getApp().globalData.userInfo = {
  name: "test",
  age: 18,
  gender: "male",
}

在另一个页面中获取全局数据：

console.log(getApp().globalData.userInfo.name);  //输出：test
console.log(getApp().globalData.userInfo.age);  //输出：18
console.log(getApp().globalData.userInfo.gender);  //输出：male

数据存储

小程序中的数据存储可以通过 wx.setStorageSync 和 wx.getStorageSync 操作实现。我们可以使用这两个API来实现本地存储、读取以及清除本地存储。

下面给出一个简单的示例：

将数据存储到本地：

wx.setStorageSync('userInfo', {
  name: "test",
  age: 18,
  gender: "male",
});

从本地读取数据：

var userInfo = wx.getStorageSync('userInfo');
console.log(userInfo.name);  //输出：test
console.log(userInfo.age);  //输出：18
console.log(userInfo.gender);  //输出：male

清除本地存储的数据：

wx.removeStorageSync('userInfo');

以上就是关于微信小程序开发实用技巧之数据传递和存储的完整攻略。希望对您有所帮助。