微信小程序第1讲 -- 视图组件和样式设置_wxml view 的style

view视图容器

首先我们先新建一个小程序，按照前面的博客的方法找到AppID
然后选择不使用云开发，选择JavaScript语言，选择自己喜欢的存储路径或者系统默认的路径，点击新建。
如图所示：

在一切都加载就绪之后，我们找到index文件夹。我们要在这个文件夹下写我们今天的代码
首先我们找到index.wxml文件我们按下ctrl+a然后按下del键删除生成的默认代码

如图所示

然后我们就开始写今天的代码了

<view style="width:100%; height:80px; background:blue"></view>
<view style="width:100%; height:80px; background:yellow"></view>
<view style="width:100%; height:80px; background:red"></view>
1
2
3

写好后按下ctrl+s保存并编译 并看到下面效果：

我们来解释一下今天的代码示例：

基础知识：

<view>是一个视图组件可以理解为一个色块
在小程序中：像这样由<></>成对出现的代码语言，我们叫做标签语言
微信小程序前端是由wxml语言写的，wxml语言是一种标签语言，
它的特点是成对出现<view></view>
在<view>标签内我们可以设置一些属性，style是一种属性，它是决定标签风格的
一种属性。我们可以在style中设置字体大小，颜色，宽度，高度等各种各样的属性
1
2
3
4
5
6

代码注释详解：

<!-- 设置一个视图view 它的风格是宽度占满整个屏幕的宽度，高度占80像素，
背景颜色为蓝色 -->
<view style="width:100%; height:80px; background:blue"></view>
<!-- 同理 -->
<view style="width:100%; height:80px; background:yellow"></view>
<!-- 同理 -->
<view style="width:100%; height:80px; background:red"></view>
1
2
3
4
5
6
7

你可能会说：如果我需要设置很多样式，比如我想让它外边框是圆角的，我想让它里面的文字居中显示，我想设置很多我想设置的东西。那像这样在标签中写style属性岂不是要写很多？而且代码多了一行写不下，看着比较繁琐，有没有更好的办法设置样式呢？

答案是当时有！！！

这个时候我们要打开index.wxss文件，敲黑板我们换文件了，我们现在要在index.wxss中写代码了。
我们的想法是我们写一个样式类型，在这个类型中规定view的背景色，设置边框，设置居中对齐，设置宽度高度等等
然后我们回到index.wxml文件中，把我们写好的类引用上。这样不就好了

我们找到index.wxss文件，将里面的代码清空
如图所示：

我们开始写几个类，就叫justlike1、justlike2、justlike3吧

.justlike1{
   /*设置宽度水平占满*/
   width:100%;
   /*设置高度100像素  单位px*/
   height:100px;
   /*设置行高100px  可以使文字在垂直方向上居中*/
   line-height:100px;
   /*设置色块与上面的距离为10px*/
   margin-top:10px;
   /*设置文字水平居中*/
   text-align: center;
   /*设置背景色*/
   background:#00FFFF;
   /*设置圆角*/
   border-radius:30px;
}
.justlike2{ 
   width:100%;
   height:100px;
   line-height:100px;
   margin-top:10px;
   text-align: center;
   background:#00FF00;
   border-radius:30px;
}
.justlike3{
   width:100%;
   height:100px;
   line-height:100px;
   margin-top:10px;
   text-align: center;
   background:#FFFF00;
   border-radius:30px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

然后我们回到index.wxml中引用它

<view class="justlike1">微信小程序</view>
<view class="justlike2">微信小程序</view>
<view class="justlike3">微信小程序</view>
1
2
3

编译一下我们看看效果：

这个时候我们点击编译旁边的预览，用微信扫描二维码可以在手机上看
（由于小程序没有发布，所以只能在自己手机上看）

总结一下：

1. 我们今天学习了view组件的使用，了解了标签语言的特点
2. 我们学会了两种办法设置view组件的样式：（第一种方法：在view标签内写style属性。第二种办法：在index.wxss中定义一个类，然后在view标签内写class引用这个类）
3. 掌握了微信小程序的编译，熟练工具的使用