这节开始学习小程序的视图层,WXML 和 WXSS 就像网页开发的 HTML 和 CSS,一个负责页面结构,一个负责页面样式,即美化页面。
小能手这段时间在学习微信小程序开发,按照 UI、API、云开发 三个部分并结合示例系统性地学习,并实现了一个物联网小程序“花花草草守护仪”,详细可点此查看小程序快速入门教程。
WXML 负责页面结构,由各类组件组成。这里在 home.wxml 使用最常用的 view 组件,写了一个简单的静态页面。
<view>
<view>
<view>WXML 模板</view>
<view>从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是⽤来描述当前这个⻚⾯的结构,CSS ⽤来描述⻚⾯的样⼦,JS 通常是⽤来处理这个⻚⾯和⽤户的交互。
</view>
</view>
</view>
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>
给 wxml 文件的组件加了选择器之后,接下来就可以在 wxss 文件中给指定的某个 组件以及某类 组件添加一些美化了,这里需要编辑 home.wxss 文件。
wxss美化的知识和css是一样的,所以可以看下w3shool的CSS参考手册。
根据选择器的说明,我们可以使用 .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 样式罗列如下:
字体属性 | 描述 |
---|---|
font-family | 规定文本的字体系列。 |
font-size | 规定文本的字体尺寸。 |
font-weight | 规定字体的粗细。 |
文本属性 | 描述 |
---|---|
color | 设置文本的颜色。 |
line-height | 设置行高。 |
text-align | 规定文本的水平对齐方式。 |
盒模型,可以控制段落之间的距离、文字之间的距离,以及与边框之间的距离。盒⼦模型就像⼀个⻓⽅形的盒⼦,它有⻓度、⾼度、也有边框,以及内边距与外边距。我们通过实战来了解⼀下。
内边距属性(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;
}
效果如下:
本节尝试使用了 WXML 的 view 组件,同时增加了选择器;通过选择器给相应组件增加了字体文本属性和盒模型属性。