【重点】微信小程序之在data: { }声明的变量的使用范围

直奔主题：以下两种声明并初始化text的方式是一样的，用途也是一样的。

方式一：在date:{}中声明并初始化text

Page({
  data: {
    text: 'init data',
  },

  onLoad: function (options) {
  },

})

方式二：在onLoad函数中声明并初始化text。onLoad函数是个代表位置，当然也可以写在当前文件中的任何地方，只要在使用text的时候，text已经初始化了。很重要，很重要，很重要。下面的内容就不再阐述这个重点了哦。

Page({
  data: {
  },

  onLoad: function (options) {
      this.data.text = 'init data';
  },

})

围绕方式一，对以下案例做的解释[也就是方式二]：
在index.js文件中声明并初始化一个text变量data: {text: 'init data',},，那么在index.js这个文件中的任何地方都可以通过this.data.text的方式对text进行取值或者重新赋值，那么我们就不用多此一举的再在onLoad:函数中使用this.data.text = '';初始化text了。
同理，你如果是把声明并初始化text的代码this.data.text = 'init data';写在了onLoad:函数中，那么也就不用多此一举的再在data: { }声明变量了。
另外还有一个很重要的问题，声明在data: { }中的变量text两个地方要用到：
1.供index.js文件中使用的。也就是在index.js文件中的任何地方，都可以通过this.data.text的方式对text进行取值或者重新赋值)。
2.供index.wxml使用的。也就是在index.js文件中通过this.setData({})的方式，将({ })里面冒号左边的这个text传给index.wxml文件。
PS:最好是将声明初始化的变量写在data: { }，这样后期也方便找，如果当前index.js文件的各个位置都有声明的变量，给人的感觉很乱，看着就很不规范，阅读体验极差。

以下介绍通过`this.data.text`的方式对text重新赋值

index.wxml文件

<view class='midText' bindtap="modifyArray">{{text}}</view>

index.wxss文件

.midText{
  position: fixed;
  top: 500rpx;
  left: 0;
  width: 100%;
  height: 80rpx;
  background: #10e934;
  color: rgb(0, 0, 0);
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

index.js文件

Page({
  data: {
    text: 'init data',
  },

  modifyArray: function (event) {
    this.data.text = '我被修改了';// 对text重新赋值
    this.setData({
      text: this.data.text
    })
  }
})

初始运行状态

image.png

点击`init data`文字变为`我被修改了`

image.png

文章有写的不严谨的地方，欢迎指正哦，我会及时修改的。谢谢了~

最后编辑于：2018.10.22 15:32:10

【重点】微信小程序之 在data: { }声明的变量的使用范围