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


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中使用inline函数的问题
Mar 08 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
jQuery的extend方法【三种】
Dec 14 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
Three.js实现简单3D房间布局
Dec 30 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
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
php创建类并调用的实例方法
2019/09/25 PHP
js的event详解。
2006/09/06 Javascript
javascript 页面划词搜索JS
2009/09/28 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python中元类用法实例
2014/10/10 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python线程中同步锁详解
2018/04/27 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python socket聊天脚本代码实例
2020/01/02 Python
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
党员教师工作决心书
2014/03/13 职场文书
爱国主义演讲稿
2014/05/07 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
专科生就业求职信
2014/06/22 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
《我的长生果》教学反思
2016/02/20 职场文书