小程序的数据通信

作者: 付出的前端路 | 来源:发表于2018-06-15 16:49 被阅读0次

[转]深入理解小程序中的数据——小程序探索
小程序的数据通信
小程序数据通信方法大全
hello kotlin
360 RePlugin插件化-宿主与插件通信
数据通信基础
WCF简单使用
计算机网络技术(二)——数据通信
数据通信技术基础
通信基础

一、页面与组件通信

1.页面传递内容给组件

page为页面的属性名

components 为组件的外部属性名, 用properties对象接收

页面

<!-- Wxml --> 
<components-a components="{{page}}"></components-a>
<!-- Js -->
Page({
  data: {
      page: '父亲pages'
  }
})

组件

'父亲pages'
<!-- Wxml --> 
<!-- Js -->
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    components: { // 属性名
      type: String
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onTap: function () {
      let page = this.data.components
      console.log(page)  // 我是父亲pages
    }
  }
})

2.组件传递内容给页面
给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。

页面

<!-- Wxml --> 
<components-a bind:myevent="onMyEvent"></components-a>
<!-- Js -->
Page({
  // 监听myevent事件
  onMyEvent: function (e) {
    console.log('接收a组件传递的内容:', e.detail) // '我是a组件'
  }
})

组件

<!-- Wxml -->
<!-- 在自定义组件"components-a"中 -->
<button bindtap="onTap">点击</button>
<!-- Js -->
Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = '我是a组件'
      this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件
    }
  }
})

二、组件与组件通信
1.两个无任何关联的组件：通过全局变量或本地缓存传递数据；

2.两个有关联的组件(同一个父页面下)：通过组件 => 页面 => 组件的方式传递数据

三、页面之间的通信

1.使用全局变量 app.globalData

2.使用本地缓存 wx.setStorageSync

3.url传递

// A页面-传递数据
// 需要注意的是，wx.switchTab 中的 url 不能传参数。
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male'
})


// B页面-接收数据
// 通过onLoad的option
<!-- JS -->
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender) //  raymond is male
    this.setData({
      option: option
    })
  }
})

4.后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

这个方法的精髓，是通过获取到其他页面的对象原型，然后通过原型方法 setData 对当前对象管理的 data 进行修改，

示例如下：

// pageE.js
Page({
  data: {
    index: 1
  }
})

当跳转到下一个页面 F 之后，假定在 F 中有操作需要对 E 中的数据有修改，则可以使用以下方法：

// pageF.js
...
Page({
  changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0
    })
  }
})

这个方法可以操作页面堆栈里面的页面的数据，可以做到让后一级页面对上级页面群的数据管理。

参考链接：爱范儿-页面之间的数据传递

四、页面与模板之间的通信

页面

<!-- Wxml -->
<template is="msgItem" data="{{...item}}"/>
  
<!-- JS -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

传入模板的除了变量，还可以是事件方法对象。例如，模板中的点击事件，可以传递到使用模板的元素中。