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


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事件问题
Sep 05 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
js数组操作常用方法
May 08 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
window.open()实现post传递参数
Mar 12 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
前端面试知识点目录一览
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 Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP引用的调用方法分析
2016/04/25 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
用JavaScript做简易的购物车的代码示例
2017/10/20 Javascript
js中this对象用法分析
2018/01/05 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python显示进度条的方法
2014/09/20 Python
Python3 操作符重载方法示例
2017/11/23 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
pyenv虚拟环境管理python多版本和软件库的方法
2019/12/26 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
行政助理岗位职责范文
2013/12/03 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
指导教师评语
2014/04/26 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
九九重阳节标语
2014/10/07 职场文书
我是特种兵观后感
2015/06/11 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
八年级物理教学反思
2016/02/19 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
MySQL数据库必备之条件查询语句
2021/10/15 MySQL
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL