微信小程序页面、组件间通信方式

 watch 监听

//app.js

App({

 watch: function(key, method) {
		var obj = this.globalData;
		//加个前缀生成隐藏变量，防止死循环发生
		let ori = obj[key]; //obj[key]这个不能放在Object.defineProperty里
		if (ori) { //处理已经声明的变量，绑定处理
			method(ori);
		}
		Object.defineProperty(obj, key, {
			configurable: true,
			enumerable: true,
			set: function(value) {
				this['_' + key] = value;
				console.log('是否会被执行2')
				method(value);
			},
			get: function() {
				// 在其他界面调用key值的时候，这里就会执行。
				if (typeof this['_' + key] == 'undefined') {
					if (ori) {
						//这里读取数据的时候隐藏变量和 globalData设置不一样，所以要做同步处理
						this['_' + key] = ori;
						return ori;
					} else {
						return undefined;
					}
				} else {
					return this['_' + key];
				}
			}
		})
	},

  globalData: {
    isUpdateContent:false,//是否更新了页面内容
  },



})

 A 页面执行操作后，改变全局变量isUpdateContent的值

//A页面 index.js

change(){
    //操作内容
     app.globalData.isUpdateContent=true
}

B页面监听全局变量 isUpdateContent值的变化

//B页面 index.js

const app = getApp()
Page({
    onLoad:function(options){
        //监听全局变量isUpdateContent，并执行方法
        app.watch('isUpdateContent',this.updateData)
    },



    updateData(isUpdateContent){
        console.log('更新状态',isUpdateContent)
        if(isUpdateContent){
          //执行自定义操作
        }
     }

})

返回上级页面并传参

B页面点击提交返回至A页面，并改变A页面的isSubmit值

submit(){
      var pages = getCurrentPages();
      var prevPage = pages[pages.length - 2]; //上一个页面
        //直接调用上一个页面的setData()方法，把数据存到上一个页面中去
      prevPage.setData({
          isSubmit: true
      })
      wx.navigateBack({//返回
          delta: 1
      })
 }

A页面

Page({
  data: {
    isSubmit:false,
  },
  
  onShow(){
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    let isSubmit = currPage.data.isSubmit;
    console.log('是否为提交过来的',isSubmit)//为传过来的值
  }
})

 父子组件传值

 父组件

<!--index.wxml--> 
 
<child-component info="{{info}}" bindconfirm="confirm"></child-component>

//index.js

Page({
  data: {
    info:'传递给子组件的内容'
  },

  confirm(e){
    console.log('接收到的子组件传递的信息',e.detail)  
  }
  
})

//index.json

{
  "usingComponents": {
    "child-component":"子组件路径"
  },
  "navigationBarTitleText": "父组件"
}

子组件

<!--index.wxml-->

<view>
    <text>{{info}}</text>
    <button bind:click="onConfirm" >提交</button>
</view>

//index.js

 
Component({
    properties: {
      info:{
        type:String,
        value:''
      },
    },
    onConfirm() {
       this.triggerEvent('confirm','传递给父组件的信息')
    },
 
  })

将数据存储在本地缓存指定的key中

数据缓存 / wx.setStorageSync (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

wx.setStorageSync('key',value)//存储名为key，值为value的数据到本地缓存中

wx.getStorageSync('key')//获取本地缓存中名为key的值

wx.removeStorageSync('key')//从本地缓存中移除指定key

wx.clearStorageSync()//清除本地所有数据缓存

有无Sync结尾表示同步和异步，例如wx.setStorageSync是同步存储，上一步执行完毕后再进行存储。

observer 监听

Component({
  properties:{
    num: {
      type: String,
      observer: function(newVal, oldVal) {
        console.log('properties-num', newVal)
      }
    },
    person: {
      type: Object,
      observer: function(newVal, oldVal) {
        console.log('properties-person', newVal)
      }
    }
  },
  data: {
    aloneVal: 0,
    oneVal: null,
    twoVal: null
  },
  observers: {
    // 监听全部 setData，每次 setData 都触发，一般用不到 '**' 监听全部
    '**' (val) {
      console.log('**所有的setData变化：', val) // 此时返回的 val 值是一个包含所有data变量的对象
    },
    // 监听 properties 接收的值的变化
    'num' (val) {
      console.log('observers-num', val)
    },
    // 监听对象
    'person' (val) {
      console.log('observers-person', val)
    },
    // 监听对象的属性
    'person.name' (val) {
      console.log('observers-person.name', val)
    },
    // 监听子组件中单个数据的变化
    'aloneVal' (val) {
      console.log('aloneVal', val)
    },
    // 监听子组件中多个数据的变化
    'oneVal, twoVal' (val1, val2) {
      console.log('oneVal', val1)
      console.log('twoVal', val2)
    }
  },
  // 在组件在视图层布局完成后执行
  ready: function() {
    
  },
  methods: {
    bindInputVal(e) {
      this.setData({
        aloneVal: e.detail.value
      })
    },
    // 获取 oneVal 的值
    bindInputOneVal(e) {
      this.setData({
        oneVal: e.detail.value
      })
    },
    // 获取 twoVal 的值
    bindInputTwoVal(e) {
      this.setData({
        twoVal: e.detail.value
      })
    }
  }
})