微信小程序中的 data 赋值与取值
在微信小程序中，`data` 是一个非常重要的概念，它是用于存储页面初始数据的对象。通过 `data` 对象，我们可以设置页面的初始数据，并且在 WXML 中使用这些数据来渲染页面。
1. data 的赋值
当我们创建一个新页面时，需要通过 `Page()` 函数注册这个页面。在 `Page()` 函数中，我们可以传入一个对象作为参数，这个对象包含了页面的初始数据、生命周期函数、事件处理函数等。其中，`data` 属性是用于设置初始数据的。
例如：
```javascriptPage({
data: {
title: 'Hello World',
count:0,
list: [
{ id:1, name: 'John' },
{ id:2, name: 'Mary' }
]
},
// 生命周期函数、事件处理函数等})
```
在上面的例子中，我们设置了三个初始数据：`title`、`count` 和 `list`。这些数据将作为页面的初始值。
2. data 的取值
在 WXML 中，我们可以使用 `{{ }}` 来获取对应页面的 `data` 值。例如：
```html
{{title}}
{{count}}
```
在上面的例子中，我们使用 `{{ }}` 来获取对应页面的 `data` 值。例如，`{{title}}` 将渲染出 `"Hello World"`。
3. data 的更新
当我们需要更新页面的数据时，可以通过 `setData()` 方法来实现。例如：
```javascriptPage({
data: {
count:0 },
tapButton() {
this.setData({
count: this.data.count +1 });
}
})
```
在上面的例子中，我们定义了一个 `tapButton` 函数，当用户点击按钮时，会通过 `setData()` 方法更新页面的 `count` 值。
4. data 的深度复制
当我们需要将 `data` 对象中的数据传递给其他函数或组件时，需要注意到 `data` 对象是浅拷贝的。例如：
```javascriptPage({
data: {
list: [
{ id:1, name: 'John' },
{ id:2, name: 'Mary' }
]
},
tapButton() {
const newList = this.data.list.slice();
newList[0].name = 'Jane';
console.log(this.data.list); // [ { id:1, name: 'Jane' }, { id:2, name: 'Mary' } ]
}
})
```
在上面的例子中，我们通过 `slice()` 方法创建了一个新数组的浅拷贝。然后，我们修改了新数组中的第一个元素的 `name` 值。但是，这个修改也影响到了原来的 `data.list` 值。
为了避免这种情况，可以使用 `JSON.parse(JSON.stringify(data))` 来进行深度复制。例如：
```javascriptPage({
data: {
list: [
{ id:1, name: 'John' },
{ id:2, name: 'Mary' }
]
},
tapButton() {
const newList = JSON.parse(JSON.stringify(this.data.list));
newList[0].name = 'Jane';
console.log(this.data.list); // [ { id:1, name: 'John' }, { id:2, name: 'Mary' } ]
}
})
```
在上面的例子中，我们使用 `JSON.parse(JSON.stringify(data))` 来进行深度复制。然后，修改新数组中的第一个元素的 `name` 值不会影响到原来的 `data.list` 值。
5. data 的类型
在微信小程序中，`data` 对象可以包含各种类型的数据，如字符串、数字、布尔值、对象等。但是，有一些类型的数据需要特别注意。
例如，`data` 对象中的数组不能使用 `push()` 方法添加新元素。相反，可以使用 `splice()` 方法来添加新元素。例如：
```javascriptPage({
data: {
list: [
{ id:1, name: 'John' },
{ id:2, name: 'Mary' }
]
},
tapButton() {
this.data.list.splice(0,0, { id:3, name: 'Jane' });
}
})
```
在上面的例子中，我们使用 `splice()` 方法添加了一个新元素到数组的头部。
6. data 的安全
在微信小程序中，`data` 对象中的数据需要遵守一定的安全规则。例如：
* 不要将敏感信息（如密码、信用卡号等）存储在 `data` 对象中。
* 不要使用明文传输敏感信息。
* 使用加密算法来保护敏感信息。
例如：
```javascriptPage({
data: {
password: ''
},
tapButton() {
wx.cloud.callFunction({
name: 'login',
data: {
password: this.data.password }
});
}
})
```
在上面的例子中，我们使用 `wx.cloud.callFunction()` 方法来调用云函数，传递敏感信息（如密码等）。但是，这种方式不安全，因为明文传输了敏感信息。
为了解决这个问题，可以使用加密算法来保护敏感信息。例如：
```javascriptPage({
data: {
password: ''
},
tapButton() {
const encryptedPassword = wx.cloud.encrypt(this.data.password);
wx.cloud.callFunction({
name: 'login',
data: {
password: encryptedPassword }
});
}
})
```
在上面的例子中，我们使用 `wx.cloud.encrypt()` 方法来加密敏感信息（如密码等）。然后，传递加密后的敏感信息到云函数。
通过遵守这些安全规则和最佳实践，可以确保 `data` 对象中的数据安全。
