在上一篇文章中，我们介绍了小程序入门开发的基础步骤，并通过几个Hello Word例子，让大家体验了下小程序的组件及API使用，接下来的教程中，我们将教大家详细使用每个组件及API的使用。

在这篇教程中，我们将介绍小程序的视图容器组件以及小程序基础内容组件的使用。

视图容器组件

小程序的视图容器组件分为五个组件，分别为负责普通显示的view组件、负责可滚动视图区域scroll-viel组件，负责滑块视图容器swiper组件、可以触发移动的movable-area组件，已经可覆盖其他内容的cover-view组件。这篇文章中，我们将对这几个组件使用我们上一篇文章中创建的Hello World Demo进行演示及介绍。

为了教程演示方便，在开始之前，我们需要安装微信小程序官方分享的WeUI小程序视觉基础样式库，安装起来很简单，只需要点击这里下载weui.wxss小程序样式文件，然后将其复制到你小程序项目的lib文件夹即可，没有lib文件夹请自行创建。

之后，在你的页面wxss文件中引入weui.wxss就能直接使用这个样式库文件了。

Hello World - view

等上面文件准备就绪，我们就可以开始学习view组件的使用，首先，将原来项目中的index.wxss及index.wxml中的内容清除干净，同时删除index.js中的多余的函数，保留默认函数即可。接下来，将index.wxss中的文件替换为下面的内容。

然后，再打开index.wxml文件，填入下面的内容。

保存，你将看到类似下面的样式。

有前端开发经验的同学应该能看懂，这里的写法和css样式很像似，指定相关的class，就能够实现不同的排序及样式。我们可以尝试更改flex-direction:column的值将其改为flex-direction:column-reverse，看看会发生什么？

原来的1、2、3顺序变更为3、2、1了，参考css文档，column-reverse的效果与 column 相同，但是以相反的顺序。果然，view组件是支持原生css样式的。同时，小程序官方也提供了一些view组件特有的属性，我们看看下表的内容，在这里，我们可以体验下hover-class组件。

将index.wxml文件中的第4行代码<view class="flex-item bc_green">1</view>改为<view class="flex-item bc_green" hover-class="flex-item bc_blue">1</view>，然后将鼠标移动到左上角黄色框内1的位置，点击看看会发生什么。

原来，这个view组件中的hover-class属性能够修改当前view的样式，当你点击这个view，将会显示你在hover-class中定义的属性。同时，我们也可以通过hover-start-time和hover-stay-time设定按住显示时间和手松开后的保留时间。试试下面的代码吧~