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


Posted in Javascript onFebruary 03, 2020

前言

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

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

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

组件通信

properties

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

父组件向子组件传数据:

<my-component list="{{list}}"></my-component>

子组件接收数据:

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

triggerEvent

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

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

父组件接收自定事件:

<my-component list="{{list}}" bind:customEvent="customEvent"></my-component>
Page({
 customEvent(e){
  console.log(e.detail.id)
 }
})

selectComponent

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

<my-component id="mycomponent" list="{{list}}"></my-component>
Page({
 onLoad(){
  let mycomponent = this.selectComponent('#mycomponent')
  mycomponent.setData({
   list: []
  })
 }
})

selectOwnerComponent

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

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

全局通信

globalData

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

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

page1.js

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

page2.js

const app = 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

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

简单实现

class EventBus{
 constructor(){
  this.task = {}
 }

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

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

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

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

export default EventBus

使用

app.js

import EventBus from '/util/EventBus'

wx.$bus = new EventBus()
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(){
  let pages = getCurrentPages()
  let lastPage = pages[pages.length-2]
  lastPage.setData({
   list: []
  })
 }
})

写在最后

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

Javascript 相关文章推荐
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
Node.js学习入门
Jan 03 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 #Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
YII实现分页的方法
2014/07/09 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
javascript运动详解
2015/07/06 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
JavaScript中Object基础内部方法图
2018/02/05 Javascript
Python os模块学习笔记
2015/06/21 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
介绍一下linux的文件权限
2014/07/20 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
考察现实表现材料
2014/05/19 职场文书
老兵退伍标语
2014/10/07 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
九年级数学教学反思
2016/02/17 职场文书