微信小程序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 相关文章推荐
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
Jun 28 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php session劫持和防范的方法
2013/11/12 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
javascript算法学习(直接插入排序)
2011/04/12 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
node.js入门实例helloworld详解
2015/12/23 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
ES6解构赋值实例详解
2017/10/31 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue结合Echarts实现点击高亮效果的示例
2018/03/17 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python实现BackPropagation算法
2017/12/14 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python组合无重复三位数的实例
2018/11/13 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
护士实习鉴定范文
2013/12/22 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
房产委托公证书
2014/04/08 职场文书
无偿献血倡议书
2014/04/14 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
一般纳税人申请报告
2015/05/18 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书