通常，页面呈现的效果，我们直接在css中进行，可是有时我们需要进行通过一系列操作比如点击后，要使得样式进行改变。我们知道微信小程序也可以使用一些伪类进行这类操作样式的改变，比如hover等。毕竟小程序是基于数据驱动的，也为了便于后续修改与维护，我们利用数据绑定来实现它。

******第一种方法******

one->进行布局wxml：

<view class="mn">点击样式改变</view> 

two->样式美化wxss：

.mn{
  width: 300rpx ;
  height: 80rpx;
  border: 1rpx solid red;
  line-height: 80rpx;
  text-align: center;
  margin-left: 100rpx;
}

未点击时的样式

.bg1{
  background-color: yellow;
  color: coral;
}

点击以后的样式

.bg2{
  background-color: green;
  color: white;
}

three->样式改变js：

布好局与样式准备好后，怎样进行样式的改变呢？在wxml中绑定数据(数据绑定的方法很多，比如像下面的三目运算符判断，也可以直接绑定单个变量，在data设置出它的初始值，然后通过setData改变值等，实现过程不同，最终的结果都可以达到相同)，并绑定点击事件。

<view class="mn {{bg?'bg1':'bg2'}}" bindtap="change">点击样式改变</view> 

绑定好事件后，我们在js中实现这个方法。

Page({
  data: {
  // 一开始，我们将bg设为true，通过bg?'bg1':'bg2'得知，未点击时效果为bg1
   bg: true
  },
  // 当点击以后， bg由true变为false，通过bg?'bg1':'bg2'得知，点击以后的效果为bg2
  change: function(){  
    this.setData({
      bg: false
    })
  }  
})    

four->最后，得到我们想要的效果，如下：

*******第二种方法******

     此外，除了上述三目运算符数据绑定的方式外，我们还可以这样绑定数据等等:

wxml代码：

<view class="mn {{bg}}" bindtap="change">点击样式改变</view> 

wxss代码：

.mn{
  width: 300rpx ;
  height: 80rpx;
  border: 1rpx solid red;
  line-height: 80rpx;
  text-align: center;
  margin-left: 100rpx;
}
/* 未点击时的样式 */
.bg1{
  background-color: yellow;
  color: coral;
}
/* 点击以后的样式 */
.bg2{
  background-color: green;
  color: white;
}

js代码：

Page({
  data: {
    bg:"bg1"
  },
  change: function(){  
    this.setData({
      bg:"bg2"
    })
  }  
})    

效果与上面一样：

说明：这种方法对于实现与图片相关的改变，非常好，我们知道在微信小程序中，wxss不能直接添加图片。

wxml代码：

<view class="Img" bindtap="change" style="background:url({{url}}) no-repeat">图片</view> 

wxss代码：

.Img{
  width: 160rpx ;
  height: 60rpx;
  border: 1rpx solid green;
  text-align: center;
  margin-left: 100rpx;
  font-size: 28rpx;
}

js代码：

Page({
  data: {
    url:"../../images/reserve1.png"
  },
  change: function(){  
    this.setData({
      url: "../../images/reserve2.png"
    })
  }  
})    

效果（点击前后）:

******第三种方法******

说明：对于改变控件样式，除了像上面这样外，我们还可以把样式直接写在wxml，像下面这样

<view class="ch" bindtap="change" style="{{bg?'color:red':'color:green'}}">改变</view> 

.ch{
  width: 160rpx ;
  height: 60rpx;
  border: 1rpx solid green;
  text-align: center;
  margin-left: 100rpx;
  font-size: 28rpx;
}

Page({
  data: {
   bg:true
  },
  change: function(){  
    this.setData({
      bg:false
    })
  }  
})    

效果（点击前后）：

     ------>这种方法不太推荐使用，一般用来测试，不利于代码维护。

******总结@当样式要发生改变时******

对于直接的样式wxss,我们就用第一与第二种方法------>在wxss中写好需要的样式，在wxml中进行数据绑定与事件绑定，在js中实现；

对于图片相关的，我们就用第二种方法；

第三种不太推荐。

hidden组件不要和我们的display一起使用：

在我们的微信小程序中我们的这个屏幕的大小的话等于我们的750rpx

在我们的微信中引入我们的样式

样式选择器：

有关我们less的语法：

微信小程序中的常见的组件：



使用土豆图床将我们的图片山传到我们的网络上




计算

微信小程序swiper的属性：


我们微信小程序的navagate组件：页面的跳转


我们微信小程序中的富文本标签：




微信小程序的按钮控件button


在我们的这个位置 的话就是控制我们的外观图标：



在我们的这个位置的话就是添加我们的相关的客服的按钮

在我们的小程序中的icon图标：


在我们的这个位置的话就是学习我们的单选框标签：

在我们的这个位置的话就是设置我们的相关的方法然后的话就是我们的js逻辑的代码

在我们的微信小程序的复选框：



给我们选中的元素赋值：

然后的话我们的多选框就打印出来了
现在的话就是学习我们微信小程序的自定义组件：


在我们的这个位置的话就是设置我们的相关的方法：

哪一个页面或是文件要使用我们的行增组件的话就是在我们的哪一个文件的组件中引用我们的组件。

介绍：

效果图：

git地址：https://github.com/fuxingkai/frankui-weapp，走过路过给个star和fork一下，欢迎大家吐槽。