微信小程序之页面之间四种通讯方式

类似于vue中的组件传值,可以应用于很多场景,用的最多的则是路由跳转传值和获取上一页面的数据

一. 页面跳转传参:直接在url后拼接

  wx.navigateTo({
      //可以使用反引号,用${}的形式,里面可以写入js表达式
      url: `/pages/index/index?id=${id}`,
    })

接收

  onLoad: function (options) {
    //接收参数
    console.log(options.id); //打印上一页面传递的id值
  },

二、eventChannel:和被打开页面进行通信

jumpChannel() {
    let that = this
    console.log('jumpChannel','111111111111111111111');
    wx.navigateTo({
      url: '../eventB/eventB',
      events:{
        someEvent:function(data) { //从其他页面返回的参数
          console.log('jumpChannel',data)
          that.setData({
            channelTxt:data.data
          })
        }
      },
      success:function(res) {  //向下一个页面传参
        res.eventChannel.emit('channelA',{data: 'content from first page'})
      }
    })
  },

第二个页面eventB.js

从第一个页面过来时,onLoad里接收参数key=channelA,点击页面按钮,返回上级页面时,传参key=someEvent

tap() {
    event.pub('home','this is new content')
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('someEvent',{data:'back from second page '})
    wx.navigateBack({
      delta: -1,
    })
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    const eventChannel = this.getOpenerEventChannel()
    // eventChannel.emit('someEvent',{data:'back from second page '})
    eventChannel.on('channelA',function(data) {
      console.log('eventB',data)
      that.setData({
        content:data.data
      })
 
    })
  },

三、使用全局变量传值
app.js中定义一个全局的空属性,到当前页面获取全局属性,并且赋需要传递的值给这个全局属性,再到跳转之后的页面获取这个全局属性,用其进行相应的操作,之后再赋值为空

App({
  
  globalData:{
    data:'',
  }
})
const app = getApp()
Page({
  onLoad: function (options) {
    //将全局变量进行赋值
    app.globalData.data = '二级页面'
    console.log(app.globalData.value);  //打印 二级页面
  }
})

触发回调后,任意页面都可以使用,使用完之后赋值为空即可

四、利用缓存传值:

wx.setStorageSync('goods', '新页面') 
let value = wx.getStorageSync('goods')
console.log(value); //打印 新页面

五、父子组件的通讯方式:
1、属性绑定:

属性绑定用于实现父向子传值,而且只能传递普通类型的数据,无法将方法传递给子组件

<tabDemo activeIdx="{{0}}"></tabDemo>
Component({
  properties: {
    activeIdx: {
      type: Number,
      value: 0
    }
  },
}

2、事件绑定:

事件绑定用于实现子向父传值,可以传递任何类型的数据

使用步骤:

(1)在父组件的.js中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件

//和data平齐
syscCount(){
},

(2)在父组件的.wxml中,通过自定义事件的形式,将步骤一定义的函数引用传递给子组件

<mydemo4 count="{{count}}" bind:sysc="syscCount"></mydemo4>

(3)在子组件的.js中,通过调用this.triggerEvent('自定义事件名称',{/参数对象/}),将数据发送到父组件

methods: {
  addCount(){
    this.setData({
      count:this.properties.count + 1
    })
    // 触发自定义事件,将数值同步给父组件
    this.triggerEvent('sysc',{value:this.properties.count})
  }
}

(4)在父组件的.js中,通过e.detail获取到子组件传递过来的数据

//和data平齐
syscCount(e){
  console.log('sysCount!!!');
  // console.log(e.detail.value);
  this.setData({
    count:e.detail.value
  })
},
  1. 获取组件实例:

可在父组件里调用 this.selectComponent( id 或 class选择器),获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器。

//.wxml
<mydemo4 count="{{count}}" bind:sysc="syscCount" class="child" id="childId"></mydemo4>
<view>-------</view>
<view>父组件中,count的值是:{{count}}</view>
<button bindtap="getChild">获取子组件的实例对象</button>
 
//.js
getChild(){ //按钮的 tap 处理函数
  // 切记下面参数不能传递标签选择器,只能的id或者class,否则会返回 null
  const child = this.selectComponent('.child')
  // console.log(child);
  // child.setData({
  //   count:child.properties.count + 1
  // })
  child.addCount()
}

4、behaviors

behaviors是小程序中,用于实现组件间代码共享的特性,类似于 Vue.js 中的 “mixins”。

每个 behaviors 可以包含一组属性、数据、生命周期函数和方法。组件引用它时,它的属性、数据和方法会被合并到组件中,每个组件可以引用多个behaviors,behavior也可以引用其它behavior。

(1)创建behaviors

//调用 Behavior() 方法,创建实例对象并使用 module.exports 把 behavior 实例对象共享出去
module.exports = Behavior({
  // 属性节点
  properties:{},
  // 私有数据节点
  data:{
    username:'zs'
  },
  // 事件处理函数和自定义方法
  methods:{},
  // 其他节点。。。
})

(2)导入并使用 behavior

在组件中,使用 require() 方法导入需要的 behavior,挂载后即可访问 behavior 中的数据和方法。

// 使用 require() 导入需要的自定义 behavior 模块
const myBehavior = require('../../behaviors/my-behaviors')
 
Component({
  // 将导入的 behavior 实例对象挂载到 behavior 数组节点中,即可生效
  behaviors:[myBehavior],
})

3)behavior中所有可用的节点

可用的节点 类型 可选项是否必须 描述
properties Object Map 否 同组件的属性
data Object 否 同组件的数据
methods Object 否 同自定义组件的方法
behaviors String Array 否 引入其它的 behavior
created Function 否 生命周期函数
attached Function 否 生命周期函数
ready Function 否 生命周期函数
moved Function 否 生命周期函数
detached Function 否 生命周期函数
(4)同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名字段,对这些处理的字段有如下三种同名处理规则:

同名的数据字段(data):

若同名的数据字段都是对象类型,会进行对象合并;
其余情况会进行数据覆盖,覆盖规则为: 引用者 behavior > 被引用的 behavior 、 靠后的 behavior > 靠前的 behavior。(优先级高的覆盖优先级低的,最大的为优先级最高);
同名的属性(properties)或方法(methods):

若组件本身有这个属性或方法,则组件的属性或方法会覆盖 behavior 中的同名属性或方法;
若组件本身无这个属性或方法,则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法;
同名的生命周期函数:

对于不同的生命周期函数之间,遵循组件生命周期函数的执行顺序;
对于同种生命周期函数和同字段 observers ,遵循如下规则:
behavior 优先于组件执行;
被引用的 behavior 优先于 引用者 behavior 执行;
靠前的 behavior 优先于 靠后的 behavior 执行;
如果同一个 behavior 被一个组件多次引用,它定义的生命周期函数和 observers 不会重复执行。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容