评论

小程序多组件高复杂度实现方案

单页面高度复杂,以人力换取时间,人员互不影响

备注:此方法多适用于多模块高复杂度多插件的页面开发

原理:应用事件总线进行事件传递,并将数据挂载到wx上用于各个组件模块共享

一、事件总线

  1. 事件总线挂载在wx对象上wx.eventBus
  2. 派发事件 wx.eventBus.$emit('name',params)
  3. 监听事件 wx.eventBus.$on('name',fn)

示例:

// 派发事件addCart 传递参数为1
wx.eventBus.$emit("addCart", 1)

// 监听事件 
// 方式1
wx.eventBus.$on("addCart", num => {
     this.setData({ number: num });
});
// 方式2 this.setNum为methods中的方法
wx.eventBus.$on("addCart", this.setNum).bind(this);

二、共享数据

  1. 设置共享数据wx.setShareData(data)
  2. 获取共享数据wx.getShareData()

示例:

// 设置共享数据 一般为主页面设置共享数据,组件更新部分数据
wx.setShareData({
    data: {
        spu,
        sku,
        watch,
        postageFee
    },
    chooseSkuInfo, // 选择的sku
    footerBtnType,
    pageSetting,
    closeCommunity: false
});

// 获取共享数据
const {
    footerBtnType,
    pageSetting,
    chooseSkuInfo,
    data: { sku }
} = wx.getShareData()

// 组件中 更新部分数据
wx.setShareData({
    chooseSkuInfo: { ...item, number: 1 }
});
最后一次编辑于  2020-08-19  
点赞 32
收藏
评论

19 个评论

  • 炫酷仔😈
    炫酷仔😈
    发表于小程序端
    2020-08-21
    满满干货!
    2020-08-21
    赞同
    回复
  • 发表于小程序端
    2020-08-21
    打开新世界的大门!
    2020-08-21
    赞同
    回复
  • Sugar
    Sugar
    发表于小程序端
    2020-08-19
    get到了
    2020-08-19
    赞同
    回复
  • 发表于小程序端
    2020-08-19
    66666
    2020-08-19
    赞同
    回复
  • 发表于小程序端
    2020-08-19
    学习了
    2020-08-19
    赞同
    回复
  • 波波
    波波
    发表于小程序端
    2020-08-19
    厉害!
    2020-08-19
    赞同
    回复
  • 发表于小程序端
    2020-08-19
    学习了
    2020-08-19
    赞同
    回复
  • XX
    XX
    发表于小程序端
    2020-08-19
    学习了
    2020-08-19
    赞同
    回复
  • 11月
    11月
    2020-08-19

    老哥图片看不了

    2020-08-19
    赞同
    回复

正在加载...

登录 后发表内容