微信小程序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下弹出窗口的变通
Apr 18 Javascript
Jquery性能优化详解
May 15 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 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
php printf输出格式使用说明
2010/12/05 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
js select常用操作控制代码
2010/03/16 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
Node.js如何对SQLite的async/await封装详解
2019/02/14 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
python字符串连接方法分析
2016/04/12 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python 输出上个月的月末日期实例
2018/04/11 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
final, finally, finalize的区别
2012/03/01 面试题
开水果连锁店创业计划书
2013/12/29 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
十佳护士先进事迹
2014/05/08 职场文书
校园文明标语
2014/06/13 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
会计专业求职信范文
2015/03/19 职场文书
机器人瓦力观后感
2015/06/12 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技