小程序快速入门教程 1.2 WXML 和 WXSS

前言

这节开始学习小程序的视图层，WXML 和 WXSS 就像网页开发的 HTML 和 CSS，一个负责页面结构，一个负责页面样式，即美化页面。

小能手这段时间在学习微信小程序开发，按照 UI、API、云开发 三个部分并结合示例系统性地学习，并实现了一个物联网小程序“花花草草守护仪”，详细可点此查看小程序快速入门教程。

1 WXML

1.1 使用 view 组件增加内容

WXML 负责页面结构，由各类组件组成。这里在 home.wxml 使用最常用的 view 组件，写了一个简单的静态页面。

<view>
  <view>
    <view>WXML 模板</view>
    <view>从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是⽤来描述当前这个⻚⾯的结构，CSS ⽤来描述⻚⾯的样⼦，JS 通常是⽤来处理这个⻚⾯和⽤户的交互。
    </view>
  </view>
</view>

1.2 给 WXML 的组件增加选择器属性

WXML 中填充了非常多的 view 组件，而我们界面美化工作就需要对这些组件进行处理。前提就需要对这些组件增加“选择器”，以方便样式文件能够选中相应条件的组件，从而做美化工作。

这里我们分别增加了 id 和 class 两个选择器，代码如下：

<view id="wxmlinfo">
  <view class="content">
    <view class="title">WXML 模板</view>
    <view class="desc">从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是⽤来描述当前这个⻚⾯的结构，CSS ⽤来描述⻚⾯的样⼦，JS 通常是⽤来处理这个⻚⾯和⽤户的交互。
    </view>
  </view>
</view>

2 WXSS

给 wxml 文件的组件加了选择器之后，接下来就可以在 wxss 文件中给指定的某个 组件以及某类 组件添加一些美化了，这里需要编辑 home.wxss 文件。

wxss美化的知识和css是一样的，所以可以看下w3shool的CSS参考手册。

2.1 字体属性与文本属性

根据选择器的说明，我们可以使用 .title 选择所有拥有 class=“title” 的组件，使用 #wxmlinfo 选择所有 id=“wxmlinfo” 的组件，选择好之后相应的调整属性。

/* pages/home/home.wxss */
.title{
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

.item-title{
  font-size:18px;
  font-weight:500;
  color: #c60;
}

.desc,.item-desc{
  color: #333;
}

#wxmlinfo,#studyweapp{
  font-size:16px;
  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
  line-height: 1.6;
}

修改后的实际效果是这样：

常用的 CSS 样式罗列如下：

2.2 盒模型

盒模型，可以控制段落之间的距离、文字之间的距离，以及与边框之间的距离。盒⼦模型就像⼀个⻓⽅形的盒⼦，它有⻓度、⾼度、也有边框，以及内边距与外边距。我们通过实战来了解⼀下。

内边距属性（Padding），就是这个⻓⽅形的边框与⻓⽅形⾥⾯的内容之间的距离，有上边距，右边距、下边距、左边距这个四个内边距，分别为padding-top，padding-right，paddingbottom，padding-left。注意是上、右、下、左，这样⼀个顺时针。 边距属性（Margin）就是这个⻓⽅形的边框与⻓⽅形外⾯的内容之间的距离，同样也有上边距margin-top，右边距margin-right，下边距margin-bottom，左边距margin-left这个四个边距。同样也是上、右、下、左这个顺时针。

我们给几个组件增加了盒模型：

#wxmlinfo,#studyweapp{
  padding-top:20px;
  padding-right:15px;
  padding-bottom:20px;
  padding-left:15px;
}

.title,.item-title{
  margin-bottom:0.9em;
}

.item-title{
  border-left: 3px solid #c60;
  padding-left: 15px;
}

效果如下：

3 小结

本节尝试使用了 WXML 的 view 组件，同时增加了选择器；通过选择器给相应组件增加了字体文本属性和盒模型属性。

END