小程序数据通信方法大全(推荐)


Posted in Javascript onApril 15, 2019

本文论述的是子或孙向父传递数据的情况,自下而上

相信大家平时在小程序开发中肯定遇到过页面或者组件之间的数据通信问题,那小程序数据通信都有哪些方式呢?如何选择合适的通信方式呢?这就是本文要讨论的重点。

关系划分

在讨论都有哪些数据通信方式之前,我们先来定义一下,小程序页面、组件之间都有哪些关系。我总结了一下,大概分为以下3类:

  1. 父子关系
  2. 兄弟关系
  3. 爷孙关系

不同的关系里面,不同角色之间有可能是页面,也有可能是组件,接下来我们就一个个来揭示如何进行数据通信。

父子关系

父子关系一般主要就是两种情况:

父为页面,子为组件 父为组件,子为组件

这种关系可能是频率出现最高的了,毕竟大部分小程序页面都是以小而美为主,可能没有分的太细,碰到这种情况,我们可以通过在父页面监听子组件触发的事件来完成数据通信。

方法一

<!-- 当自定义组件触发“myevent”事件时,调用“onMyEvent”方法 -->
<component-tag-name bindmyevent="onMyEvent" />

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
Component({
 methods: {
  onTap() {
   const myEventDetail = {} // detail对象,提供给事件监听函数
   const myEventOption = {} // 触发事件的选项
   this.triggerEvent('myevent', myEventDetail, myEventOption)
  }
 }
})

小程序数据通信方法大全(推荐) 

兄弟关系

兄弟关系同样分为两种情况:

  1. 兄弟间都是页面
  2. 兄弟间都是组件

兄弟间都是页面

这种关系指的就是,同层次间的页面,简单理解其实就是页面之间的跳转,那从页面A跳到页面B,页面B如何修改页面A的数据呢?

方法二

页面生命周期里面都有 onShow``onHide 方法,通过 localStorage 或者 globalData 作为数据中转,进入到不同页面时,在前一个页面 onShow 里面取出数据,在后一个页面 onShow 里面存储数据,具体做法如下:

<!--app.js-->
App({
  globalData: { count: 0 },
});

<!--页面A-->
onShow(){
  let countValue = wx.getStorageSync('count');
  
  <!--globalData的方式-->
  let countValue = getApp().globalData.count;
  <!---->
  
  if(countValue){
    this.setData({
      count:countValue
    })
  }
  
  <!--globalData的方式 清除数据-->
  getApp().globalData.count = null
  <!---->
}
onHide(){
  wx.removeStorageSync('count') 
}

<!--页面B-->
onShow(){
  <!--globalData的方式-->
  getApp().globalData.count = 1
  <!---->
  
  wx.setStorageSync('count',1);
}

小程序数据通信方法大全(推荐) 

爷孙关系

爷孙关系算是数据通信中最复杂的了,因为不是直系传递,若是通过 方法一 来监听,那就需要通过多级传递事件了,如果节点比较深,可想而知代码是得多难理解且难以维护。

我们可以通过全局创建一个事件总栈 EventBus ,利用这个 EventBus 来订阅发布事件,也就是我们经常使用的 发布订阅模式 ,那在小程序里面如何实现呢?

方法三

<!--第一步:实现一个事件总栈类-->
class EventBus {
  constructor() {
    this.bus = {};
  }
  // on 订阅
  on(type, fun) {
    if (typeof fun !== 'function') {
      console.error('fun is not a function');
      return;
    }
    (this.bus[type] = this.bus[type] || []).push(fun);
  }
  // emit 触发
  emit(type, ...param) {
    let cache = this.bus[type];
    if (!cache) return;
    for (let event of cache) {
      event.call(this, ...param);
    }
  }
  // off 释放
  off(type, fun) {
    let events = this.bus[type];
    if (!events) return;
    let i = 0,
      n = events.length;
    for (i; i < n; i++) {
      let event = events[i];
      if (fun === event) {
        events.splice(i, 1);
        break;
      }
    }
  }
}
module.exports = EventBus;

<!--第二步:在app.js文件中引入-->
import EventBus from './common/event-bus/index.js';
App({
  eventBus: new EventBus(),
});

<!--第三步:在父页面或者父组件中监听某个事件-->
onLoad: function(options) {
  app.eventBus.on('add-count', this.addCount);
}
onUnload: function(options) {
  app.eventBus.off('add-count', this.addCount);
}


<!--第四步:在子组件里面触发事件-->
methods: {
  addCount() {
    app.eventBus.emit('add-count');
  }
}

小程序数据通信方法大全(推荐)

除此之外,还有一种方式,我们可以在每个页面 onLoad 周期里面将该页面的 pageModel 对象缓存起来,之后在孙辈组件里面拿到祖孙的页面对象,从而触发祖孙页面对象对应的方法。

<!--第一步:实现一个pageModel,用来缓存页面对象-->
class PageModel {
  constructor() {
    this.pageCache = {};
  }

  add(page) {
    let pagePath = this._getPageModelPath(page);
    this.pageCache[pagePath] = page;
  }

  get(path) {
    return this.pageCache[path];
  }

  delete(page) {
    delete this.pageCache[this._getPageModelPath(page)];
  }
  <!--这一段代码是关键,存储的是__route__属性-->
  _getPageModelPath(page) {
    return page.__route__;
  }
}

export default PageModel ;

<!--第二步:app.js中引入-->
import PageModel from './common/page-model/index.js';

App({
  pageModel: new PageModel(),
});

<!--第三步:页面onLoad周期里缓存页面-->
onLoad: function(options) {
  app.pageModel.add(this);
}

<!--第四步:子孙获取祖辈方法-->
methods: {
  addCount() {
    app.pageModel.get('pages/communicate/index').addCount();
  }
}

小程序数据通信方法大全(推荐)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
JavaScript提升性能的常用技巧总结【经典】
Jun 20 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
前端面试知识点目录一览
Apr 15 #Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 #Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 #Javascript
说说Vuex的getters属性的具体用法
Apr 15 #Javascript
vue 中Virtual Dom被创建的方法
Apr 15 #Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 #jQuery
详解javascript对数组和json数组的操作
Apr 15 #Javascript
You might like
PHP+swoole实现简单多人在线聊天群发
2016/01/19 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
如何在vue中使用video.js播放m3u8格式的视频
2021/02/01 Vue.js
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python开发之str.format()用法实例分析
2016/02/22 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
django foreignkey(外键)的实现
2019/07/29 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
一些Unix笔试题和面试题
2012/09/25 面试题
技能竞赛活动方案
2014/02/21 职场文书
考核工作实施方案
2014/03/30 职场文书
合伙协议书范本
2014/04/21 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
活动总结报告怎么写
2014/07/03 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers