微信小程序8种数据通信的方式小结

2023-08-02 11:50:04 220

前言

数据通信在开发中是必不可少的一个环节，也是我们必须掌握的知识。知道得越多的数据通信方式，实现业务会更加得心应手。

下面我将这些通信方式归类介绍：

组件通信
全局通信
页面通信

组件通信

properties

父组件向子组件通信，与Vue的props作用相同。

父组件向子组件传数据：

子组件接收数据：

Component({
properties:{
list:{
type:Array,
value:[]
}
},
attached(){
console.log(this.list)
}
})

triggerEvent

子组件向父组件通信，与Vue的$emit作用相同
子组件触发自定义事件：

Component({
attached(){
this.triggerEvent('customEvent',{id:10})
}
})

父组件接收自定事件：

Page({
customEvent(e){
console.log(e.detail.id)
}
})

selectComponent

使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象，类似Vue的ref

Page({
onLoad(){
letmycomponent=this.selectComponent('#mycomponent')
mycomponent.setData({
list:[]
})
}
})

selectOwnerComponent

选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象，类似Vue的$parent

Component({
attached(){
letparent=this.selectOwnerComponent()
console.log(parent)
}
})

全局通信

globalData

将数据挂载到app.js，这种方式在开发中很常用。通过getApp()，我们能够在任何一个页面内访问到app实例。
app.js

App({
globalData:{
list:[]
}
})

page1.js

constapp=getApp()
Page({
onLoad(){
app.globalData.list.push({
id:10
})
}
})

page2.js

constapp=getApp()
Page({
onLoad(){
console.log(app.globalData.list)//[{id:10}]
}
})

storage

storage并不是作为通信的主要方式。storage主要是为了缓存数据，并且最多只能存储10M的数据，我们应该合理使用storage

wx.setStorageSync('timestamp',Date.now())
wx.getStorageSync('timestamp')
wx.removeStorageSync('timestamp')

eventBus

通过发布订阅模式注册事件和触发事件进行通信

简单实现

classEventBus{
constructor(){
this.task={}
}

on(name,cb){
if(!this.task[name]){
this.task[name]=[]
}
typeofcb==='function'&&this.task[name].push(cb)
}

emit(name,...arg){
lettaskQueen=this.task[name]
if(taskQueen&&taskQueen.length>0){
taskQueen.forEach(cb=>{
cb(...arg)
})
}
}

off(name,cb){
lettaskQueen=this.task[name]
if(taskQueen&&taskQueen.length>0){
letindex=taskQueen.indexOf(cb)
index!=-1&&taskQueen.splice(index,1)
}
}

once(name,cb){
functioncallback(...arg){
this.off(name,cb)
cb(...arg)
}
typeofcb==='function'&&this.on(name,callback)
}
}

exportdefaultEventBus

使用

app.js

importEventBusfrom'/util/EventBus'

wx.$bus=newEventBus()
page1.js
Page({
onLoad(){
wx.$bus.on('add',this.addHandler)
},
addHandler(a,b){
console.log(a+b)
}
})

page2.js

Page({
onLoad(){
wx.$bus.emit('add',10,20)
},
})

页面通信

getCurrentPages

getCurrentPages()获取当前页面栈，数组中第一个元素为首页，最后一个元素为当前页面
元素为一个对象，里面存放着页面的信息，包括route（页面路径）、options（onLoad拿到的参数）、method、data等

Page({
onLoad(){
letpages=getCurrentPages()
letlastPage=pages[pages.length-2]
lastPage.setData({
list:[]
})
}
})

写在最后

如果你还有其他的通信方式，欢迎交流~以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序8种数据通信的方式小结

热门推荐

随机推荐