微信小程序开发（2）_data属性

假设我们的环境都做好了，现在我们开始开发自己的小程序

首先我们开发出自己的 Hello World

我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化:

这个是我们的程序开发的基本的目录结构

这个地方我们需要做的事情是给HelloWorld 这个文字添加一个时间，当点击的时候颜色发生变化

我们把代码以及相关的逻辑都写到page/index/…这个文件夹下面

第一步:我们在页面上index.wxml写HelloWord:

<!--index.wxml-->
<view>
    <text catchtap="click">Hello World</text>
</view>

这个和我们的HTML标签是一样的，text相当于一个文本的标签，catchtap相当于一个触发事件，当点击的时候会出现会触发click函数，我们在前端编程的时候一般对事件的响应都是写在js文件里面

第二步:在index.js里面写:

//index.js
Page({
  data: {
    // text:"这是一个页面"
 
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  click: function () {
    console.log("点击了文字");
   
  }

})

这样当我们点击页面上面的HelloWord的时候就会执行click:function(){}这个函数

仙子实现了当点击的时候在控制台输出一个文字

但是现在我们要做的事情是当前的时候改变字体的颜色:在html中我们改变字体的颜色的方式是给标签添加class

第三步：于是这个地方我们可以在index.wxcss中添加一个样式:

.window{
  color:#4995fa;
}

添加了样式之后，我们对应的也是要修改index.wxml：

<!--index.wxml-->
<view>
    <text catchtap="click" class='window'>Hello World</text>
</view>

这个时候我们在编译查看页面，发现字体的颜色已经发生了变化，但是变化是固定的，我们能不能鼠标点击的时候发生变化

鼠标点击的时候发生变化其实也是在鼠标点击的时候改变text的class，那么text的class不能写死，应该是在点击的时候发生变化

第四步:所以要我们在index.js里面声明一个变量mycolor，

声明了变量时候需要做的事情是页面上也要知道这个变量:index.wxml改为如下:

<!--index.wxml-->
<view>
    <text catchtap="click" class='{{mycolor}}'>Hello World</text>
</view>

我们发现这样颜色样式也是有作用的，也就是index.wxml里面的{ {mycolor}}就是window，这个也就是我们基本的一个变量的定义

那么点击的时候如何改变字体颜色，其实也就是改变字体的样式，也就是改变mycolor的值，我们在index.wxcss里面重新增加一个样式:

/**index.wxss**/
.window{
  color:#4995fa;
}
.window-red{
    color:#D23933;
}

那么我们点击字体的时候也就是执行click的时候发函数function把mycolor改成为window-red

这个时期是改变data里面mycolcor这个属性的值，如何改变属性的值:

  click: function () {
    console.log("点击了文字");
    this.setData({
      mycolor: 'window-red'
    })
   
  }

这样当我们点击文字的时候颜色就发生了改变

这个是我们微信小程序开发的第一个文档，后续的还会更新，这个是我的微信公众号 “趣学java”，欢迎大家一起来交流

希望对你有所帮助