微信小程序开发-第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的错误？
解决办法：
如有错误，请留言明示哟。
版权声明：本文为smallapple原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。