微信小程序开发踩坑记录_微信小程序监听storage

1. 给组件的data赋值

如图：

2.本地存储wx.getStorageSync和wx.setStorageSync的坑

使用微信小程序本地存储，开发者工具里可以存number，真机上就变成String了，如果要从本地存储里面取值，要取Number的话要paseInt()强转一下

3.微信小程序对data{}的监听机制

微信小程序只能监听data下属性的值的变化，不能监听data的属性的属性的变化

data:{
	a:10,   //当a的值改变时，能监听到，页面绑定的数据也会跟着变化
	b:100,
	c:{"d":5,"e":55}  //当c.e的值改变时，不能监听到，只能监听到c的地址
	//值变化，不能监听到c的属性的变化，页面若绑定了{{c.d}}这个值,
	//c.d变化时，页面渲染不了
}
1
2
3
4
5
6
7

如果直接用setData()给 c.d 修改或复制，会失败

this.setData({
	c.d:50  //修改不了！
})
1
2
3

但是可以通过这种方式来给data里的对象赋值或修改值：

let cd = "c.d"
this.setData({
	[cd]:50  //能修改成功！
})
1
2
3
4

类似的直接这样也行

this.setData({
	["c.d"]:50  //能修改成功！
})
1
2
3

4.给组件的properties传参时，properties一定要指定数据类型，否则真机测试会报错！！！

如：

properties: {
        baseUrl:String,
        para:String,
        index:Number
 }
1
2
3
4
5

5 报错Do not have xxx handler in current page，xxxx

重启开发者工具就好

6 微信小程序异步转同步

这就要async、await和promise配合使用了
比如使用组件时，微信小程序的双向绑定不能深层监听（在第3个坑有讲），我要在组件attached之前把数据赋值给组件的data，而wx.request是异步请求，很有可能数据还没响应回来，页面就attached完了，这样页面双向绑定了data的属性的深层属性就不能监听到这个深层属性的值，
（使用page同理）

如果直接用wx.request获取a的数据，则下面的view显示不出来,因为微信小程序的双向绑定不能监听到深层属性，所以要使用同步请求，在组件attached完成之前把a的值附上

<!-- 如果a.b变了，wx:if不能监听到！其他双向绑定wx:for等等都是！ -->
<view wx:if="{{a.b == 1}}">666</view>  
1
2

data:{
	a:{
		b:0
    }
},
lifetimes: {
	async attached(){
		let res = await new Promise((resolve, reject) => {
			wx.request({
				url:'xxx',
				method:'GET',
				success:(res)=>{
					resolve(res);  //把wx.request的res通过promise的resolve()返回
				},
				fail:(err)=>{
					reject(err); //把wx.request的fail的err通过promise的reject()返回
				}
			})
		})
		//根据请求返回的数据给data赋值和做其他操作
		this.setData({
			a:res.data.data.a  //假如返回的a.b的值是1
		})		

	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27