微信小程序开发-第1天，点击文字变色

第1个小DEMO：点击文字，文字变色

程序效果：     

一： 程序结构：

 

 二：wxml文件

<!--pages/test/indexTest.wxml-->
<view>
  <text catchtap="click" class="{{color}}">hello 123</text>
</view>

  三：wxss文件

/* pages/test/indexTest.wxss */
.window{
  color: #4292fa;
}
.window-red{
  color: #D23933;
}

四：js文件

 

// pages/test/indexTest.js
var flag= true;
Page({

  /**
   * 页面的初始数据
   */
  data: {
      color:"window"
  },

  click:function(){
    console.log("点击了文字123");
      if(flag){
        this.data.color="window-red";
        flag=false;
      }else{
        this.data.color="window";
        flag=true;
      }
      console.log("   456");
      this.setData({
    
        color:this.data.color 
      });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
 
  
})

　　五：路径设置

 

 

错误解释：

出现一个未定义color的错误？

解决办法：

 

 

 如有错误，请留言明示哟。