微信小程序：数据存储、传值、取值详解

一、数据存储

微信小程序中数据存储可分为两部分，一部分是本地存储，即存储在用户的本地缓存中，另一部分是云存储，即存储在微信开发者工具提供的云服务器中。

1. 本地存储

本地存储使用wx.setStorage和wx.getStorage进行数据的存储和获取。

1.1 存储数据

使用wx.setStorage函数可以将数据存储在用户的本地缓存中，示例代码如下：

wx.setStorage({
  key: 'key',
  data: 'value',
  success: function(res) {
    console.log("数据存储成功")
  }
})

1.2 读取数据

使用wx.getStorage函数可以读取存储在本地的数据。示例代码如下：

wx.getStorage({
  key: 'key',
  success: function(res) {
    console.log("读取数据成功")
  }
})

2. 云存储

云存储需要先在微信小程序管理后台中开通云开发，开通后即可使用wx.cloud进行云存储的相关操作。

2.1 存储数据

使用wx.cloud的database.collection('collectionName').add()函数可以将数据存储在云服务器中。示例代码如下：

wx.cloud.database().collection('users').add({
  data: {
    name: '张三',
    age: 18
  },
  success: function(res) {
    console.log("数据存储成功")
  }
})

2.2 读取数据

使用wx.cloud的database.collection('collectionName').get()函数可以读取存储在云服务器中的数据。示例代码如下：

wx.cloud.database().collection('users').get({
  success: function(res) {
    console.log("读取数据成功")
  }
})

二、数据传值

小程序中数据传值有两种方式，一种是通过URL参数传递，另一种是通过全局变量传递。

1. URL参数传递

可以通过在跳转页面时在URL上添加参数进行传递。示例代码如下：

wx.navigateTo({
  url: '/pages/detail/detail?id=123'
})

在接收页面中通过options.id获取传递的参数。示例代码如下：

Page({
  onLoad: function (options) {
    console.log(options.id)
  }
})

2. 全局变量传递

可以在小程序的App.js中定义全局变量，并在需要传递数据的页面中直接引用即可。示例代码如下：

// App.js
App({
  globalData: {
    userInfo: null
  }
})

// 页面中引用
const app = getApp()
console.log(app.globalData.userInfo)

三、数据取值

小程序使用setData函数对页面中的数据进行设置，在需要取值时，直接使用定义的变量即可。

示例代码如下：

Page({
  data: {
    message: 'Hello World!'
  },
  onLoad: function () {
    console.log(this.data.message)
  }
})

总结

本文介绍了小程序中数据存储、传值、取值的相关知识。其中数据存储包括本地存储和云存储，数据传值包括URL参数传递和全局变量传递，数据取值使用setData和定义的变量进行操作。