微信小程序传值(传递数据)的一些方法汇总
作者：牙膏不好吃
在微信小程序的开发中,我们会经常遇到页面间数据传递或者相互影响的问题,下面这篇文章主要给大家介绍了关于微信小程序传值(传递数据)的一些方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
URL参数传递：可以通过URL参数的方式将数据传递给小程序页面。
Storage存储：可以通过Storage API将数据存储在本地，然后在小程序页面中读取。
全局变量：可以将数据存储在小程序的全局变量中，然后在小程序页面中读取。
数据绑定：可以通过数据绑定的方式将数据传递给小程序页面。
自定义事件：可以通过自定义事件的方式将数据传递给小程序页面。
WebSocket：可以通过WebSocket协议将数据传递给小程序页面。
数据库：可以通过小程序提供的数据库API将数据存储在数据库中，然后在小程序页面中读取。
1、使用全局变量传递数据
利用app.js 中的 globalData 将数据存储为全局变量，在需要使用的页面通过getApp().globalData获取数据
app.js
App({
globalData:{
data: { name: 'demo' }
}
})使用组件
let app = getApp() app.globalData.data
2、使用本地存储数据传递
使用小程序提供缓存
同步缓存：wx.setStorageSync 与 wx.getStorageSync
异步缓存：wx.setStorage 与 wx.getStorage
移除本地缓存：wx.removeStorageSync（同步）、wx.removeStorage（异步）
// 将数据存储在本地缓存中指定的 key 中
wx.setStorgaeSync('data','hello')
// 从本地缓存中同步获取指定 key 的内容
wx.getStorageSync('data')
// 从本地缓存中移除指定 key
wx.removeStorgae('data')3、使用路由传递数据
传递组件
wx.navigateTo({
url: 'test?id=1',
success: (res)=> {
// 通过 eventChannel 向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})使用组件
Page({
onLoad: function(option){
console.log(option.query)
// 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', (data)=> {
console.log(data)
})
}
})4、父子组件使用selectComponent('#页面id')，triggerEvent('方法名'，'值')
<view id='demo' bind:returnDate='handleReturnDate'><view>
Page({
handleData(data){
this.selectComponent("#demo").showModal(data);
}
// 子组件传递过来的值
handleReturnDate(data){
console.log(data)
}
})
Component({
methods:{
// 父组件传递过来的数据
showModal(data){
console.log(data)
},
submit(){
// 子组件传递数据给父组件
this.triggerEvent("returnDate", sportsGuidance);
}
}
})5、子组件通过properties接收：
父组件parent
parent.wxml
<view>
<child :name='jack'></child>
</view>
parent.json
{
"usingComponents": {
"child":"/child/child",
},
"navigationBarTitleText": "父组件的导航标题"
}子组件 child
child.wxml
<view>
父组件传递过来的name:{{name}}
</view>child.js
Component({
// 接受父组件传递过来的属性
properties:{
name:String //简化的定义方式
//name:{
//type:String,
//value:''
//}
},
// 私有数据，可用于模板渲染
data:{},
// 组件生命周期声明对象
lifetime:{
},
// 组件所在页面的生命周期声明对象
pageLifetimes:{
},
// 事件响应函数和任意的自定义方法
methods:{}
})总结
到此这篇关于微信小程序传值(传递数据)的一些方法汇总的文章就介绍到这了,更多相关微信小程序传值 传递数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！