【重点】微信小程序之 在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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。