view 组件是一种视图容器，你可以用它来包装一些其它的组件，可以使用 view 去构建页面的布局 .. 在这个 wxml 页面的视图文件里 . 我们可以去做一些练习 .. 理解一下小程序里的各种组件 ..

添加一个 view .. 上面可以加上一个 css 类，比如 view-container .. 在页面或者小程序的样式文件里，你可以设计这个类的样式 ..

它里面再包装一个 view .. 上面加上一个表示颜色的类 .. 比如 red .. 在这个 view 的下面，再包装一个 text 组件 .. 里面是要显示的文字 .. .

然后再添加两块 view ..

emmet 技巧

如果编辑器里安装了 emmet 插件，我们可以使用缩写的形式去创建这种标签结构 .. view 点 view-container ，大于号 .. 括号 .. 包装的是 view.color ，它下面还有个 text，这个 text 里面有一些数字 .. 需要三组 ..

view.view-container>(view.color>text{$})*3

再按一下 emmet 展开缩写的快捷键 .. mac 上是 shift + command + E ..

继续

修改一下组件上用的 css 类的名字， red. 这个是 yellow .. 最后这个组件上的类是 blue ...

然后打开页面的样式文件 .. 定义一下 red 类的样式 .. 设置一下 background .. 颜色是一种红色 .. #db2828 .. 再定义一下 yellow 类的样式 .. 把 background 的值设置成 #fbbd08 .. 一种黄色 .. 再去设置一下 .blue 类的样式 .. background 的值是 #2185d0 ..

再去设计一下 .view-container 的样式 .. 先用一个 display ，把组件的显示设置成 flex ，让它变成一个 flexbox ，关于 css 的 flexbox 宁皓网有个专门的课程 ..

flex-direction 设置成 column ... justify-content 设置成 space-around ... 再添加一个 height ，高度设置成 100vh ..

然后设置一下 .view-container 下面的 view 组件的样式 .. width 可以是 100% .. height 高度，也可以是 100% ..

最后再设置一下 .view-container 下面的 text 的样式 .. color 是白色 .. . padding 添加点内边距 .. 大小是 16px .. display 设置成 block .. 再用 font-size 设置一下字号 .. 大小是 32px ..

这里如果我们把 view-container 的 flex-direction 设置成 row ... 页面上这几个颜色块会横着排 .. 先把它设置成 column ..

属性

在 view 组件上，有几个专有属性 .. 在这个带颜色类的 view 上面，添加一个 hover-class .. 它可以指定按下这个元素以后应用的样式类 .. 比如我们添加一个 lighten ... .

回到样式文件 .. 设置一下 lighten 的样式 .. 可以用一个 opactiy 设置一下不组件的透明度 .. 大小是 0.85

到开发者工具上试一下 .. 打开 调试 .. wxml ..

按下页面上的颜色块 ... 在这个组件上会应用在 hover-class 里面指定的样式 .. 这个按下去触发 hover 状态的时间，可以用 hover-start-time 属性来控制 .. 松开以后，保留 hover 状态的时间可以用 hover-stay-time 这个属性来控制 ..