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('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
})
}
}
})