微信小程序中数据存储可分为两部分,一部分是本地存储,即存储在用户的本地缓存中,另一部分是云存储,即存储在微信开发者工具提供的云服务器中。
微信小程序:数据存储、传值、取值详解
一、数据存储
微信小程序中数据存储可分为两部分,一部分是本地存储,即存储在用户的本地缓存中,另一部分是云存储,即存储在微信开发者工具提供的云服务器中。
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
和定义的变量进行操作。
本文标题为:微信小程序:数据存储、传值、取值详解


基础教程推荐
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件 2023-10-29
- Loaders.css免费开源加载动画框架介绍 2025-01-23
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08
- 纯css实现漂亮又健壮的tooltip的方法 2024-01-23
- Django操作cookie的实现 2024-04-15
- Bootstrap学习笔记之css组件(3) 2024-01-22
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- 创建Vue3.0需要安装哪些脚手架 2025-01-16
- JSONObject与JSONArray使用方法解析 2024-02-07
- html5视频如何嵌入到网页(视频代码) 2025-01-22