1.使用本地存储传递数据
我们可以利用微信小程序提供的本地存储 wx.setStorageSync 与 wx.getStorageSync 进行传值。
传递组件
// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorageSync('data', {id:1})
接收组件
// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.getStorageSync('data')
2. 使用路由传递数据
传递组件
// 跳转的同时携带数据拼接在URL后面,跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数
wx.navigateTo({
url: `跳转路由?data=${data}`,
})
接收组件
onLoad(option){
const {data} = option;
console.log(data)
}
这时因为传递的是对象类型的数据,到另一个页面获取时会发现是"[object,object]",解决方法是利用JSON.stringify()和JSON.parse()
传递数据的组件
const data = JSON.stringify(this.data);
wx.redirectTo({
url: `跳转url?=${data}`
})
接收数据的组件
onLoad(options){
const data = JSON.parse(JSON.stringify(options.data));
}
若是数据中有特殊字符在内,微信中提供的api encodeURIComponent() 和 decodeURIComponent() 会进行截取的操作
传递数据的组件
const data = encodeURIComponent(this.data);
wx.redirectTo({
url: `跳转url?data=${data}`
})
接收数据的组件
onLoad(options){
const data = decodeURIComponent(options.data);
}
3.通过使用wx.navigateBack()返回之前的页面
我们也可以从页面路由栈中直接获取目标Page对象,将数据设置到目标页面的data中。
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
data: this.data
})
4.使用全局变量传递数据:
我们同时也可以利用 app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过 getApp().globalData 获取。
app.js
App({
globalData:{
data: { id : 1 }
}
})
使用的组件文章来源:https://www.toymoban.com/news/detail-602879.html
const data = getApp().globalData.data
其他详见:基础 | 微信开放文档文章来源地址https://www.toymoban.com/news/detail-602879.html
到了这里,关于微信小程序之组件的四种传值方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!