导读

经过前几天课程的学习，大家学到了哪些呢？有没有学会小程序的基本操作，以及编写出基础的小程序代码呢？今天，我们来讲讲如何调用小程序的常用组件。

首先，我们需要准备的是，把微信开发者工具打开来。

可以看到小编的这张图，文字在上方居中对齐，这里的样式代码是：“.box{margin:1px;text-align:center;}” 这边可以解释一下，margin的属性意思是样式和第一行的距离长短，text-align:center是属性意思是居中，当然了，也有居左和居右，改成left和right就好了。

参考代码：  .box{    margin:1px;    text-align:center;  }

其实学过html和css的小伙伴们都知道，编程是靠代码实现的，html的代码我们可以去w3cschool里面查到，而这个小程序的编写代码我们则可以去微信小程序的公共开发平台查看到。

这里面有很多的组件，我们将会慢慢来学习。

view组件

小程序里的这个组件在前一讲已经说了那么一点点，这个组件类似于html里的div标签，却是高于div标签的，可以说是一种意义上的升级。

在这个微信开放文档里我们可以看到，这个view有四个属性，那么，这些属性是什么意思呢？随小编来一个个的看。

view组件属性1：按下去的样式hover-class;

这个属性没什么太多说的，是很重要的，属于地基的内容，没有这个，块元素无法实现跳转。

第一步，先在<view>里面加个框，一个长和宽都为200px像素的黄色实心框

第二步，输入hover-class="boxhover"。我们待会还需要对这个boxhover设置样式。

第三步，我们回到wxss里面，对刚才设定的样式“boxhover”进行设置，小编这里设置了个棕色，希望能点击后按钮可以变成棕色。

参考代码：  .boxhover{    background: burlywood;  }

最后，现在我们点击一下就可以完成按钮变化颜色了。

view组件属性2和3：点击后和松手后状态效果hover-start-time：按住后多久出现状态；hover-stay-time：手指松开后点击状态停留的时间；这两个其实都很好理解，字面意思，当然了，他们的单位都是毫秒。

好的，在这里，我们将hover-stay-time的时间设置为0，hover-stay-time设置为10，停留的时间原本默认是400毫秒。

全代码如下：  <view class="box" hover-class="boxhover" hover-start-time="0" hover-stay-time="10">    小程序开发</view>

首先呢，我们来到index.wxml界面里面，修改一下代码，嗯，在里面加个嵌套。

加的嵌套：  <view class="item">view标签嵌套</view>

第二步，我们在index.wxss里面加个样式。

可以设置的样式代码：  .item{     width: 100px;    height: 100px;    background: rebeccapurple;  }一个高和宽均为100像素的紫色背景的方块。

第三步，我们在index.wxml里面刚才嵌套的里面加个hover-class=“itemhover”如图所示。

第四步，根据刚才的设定，下面我们需要对这个样式进行规范。

搞个代码：.itemhover{  background: gray;}

然后当你单击这个小方块的时候，外部的大方块的颜色也会随之发生改变。

那么，我们该如何设置让小方块颜色变而大方块颜色不变呢？这个时候的这个属性就有效果了。

hover-stop-propagation，将这个放到刚才嵌套的内容里面去，就实现了。

这样，你不管怎么点击，都不会影响外部大块的变化。

写在最后

我们今天讲了view组件里面四个属性的使用方法，接下来我们会讲其他组件的属性使用方法，小程序是我们生活中很常用的软件，学好它，可以帮助我们很多的事情。

我们将会在以后的篇幅里持续来讲小程序及其代码的基本用法，你可以收藏本文，关注小编，学好小程序，要持之以恒哦。

感谢您百忙之中抽出时间看这篇文章，您的关注就是小编的动力，谢谢大家。