[微信小程序开发].wxml .wxss 常用组件介绍

我在实现“黄蔷的记事本”功能时，在.wxml文件中主要使用了
</view> </txt> </button> </navigator> <opendata> </scroll-view>等组件，也写了对应的.wxss类。官方文档内容较多，这里对其常用部分分别进行一个总结。需要注意的是，组件之间可以进行嵌套以实现更加复杂的功能。这篇文章主要不介绍语法，因为是面向对前端基础还比较陌生的一些同学，这里整理了一些常用的功能和组件，并说明了一般的使用方法。

.wxml篇

官方文档
这方面官方文档给的很详细，可以分章节查看这五种使用语法：数据绑定、列表渲染、条件渲染、模板、引用。下面介绍常用的组件：

view

官方文档
个人最常用的组件，感觉特点是比较百搭，里面可以塞各种东西。使用hover-class控制用户按下时的状态。有时也可以用这个组件将其他组件包裹在一起，用来实现控制模块出现在同一行的效果。

<view  class = "displayInLine">
  <button class="button" bindtap="prePage"  size = "mini" >-</button>
  <text class = "pageNum">{{pageNum+1}}</text>
  <button class="button" bindtap="nextPage"  size = "mini">+</button>
</view>

比如我希望翻页的三个模块 “-”“页码”“+”出现在同一行（默认会占3行），并居中显示：

我可以在最外层的view类中添加"displayInLine"的样式：

.displayInLine{
  display:flex;
  justify-content:space-around;
}

让其排列形式为flex并用空格填充剩余部分，这样就可以实现居中显示的功能。
有的时候为了加上一个边框就可以用view包上所有模块，并设置其样式，如：

.box{
  border: 1rpx solid #ccc;
}

text

官方文档
基本效果和view差不多，不过只能用于文字提取，相应官方接口提供了selectable用于标记用户能否可选文字，用space标志是否显示连续空格，用decode显示是否解码，根据文档，只支持  < > & '    。
text相比view功能单一很多，所以嵌套的时候也只支持嵌套text内容。（可以在一段话中使用部分加粗、部分下划线之类的样式）。
说了这么多坏处，text唯一的好处就决定了它是一个不可或缺的能力，它是微信唯一支长按选中的文本节点。

button

官方文档
button需要关注的功能字段主要是size、type、bindtype、button-hover。依次对应按钮的大小、样式、点击后触发的js链接、点击时的样式。在阅读官方文档时要注意这些样式一般都有默认值且只能识别固定字段。虽然每种支持的样式不多，但组合起来可以达到很多不同的效果。

navigator

官方文档
超链接模块组件，用于页面跳转。由于超链接的必要性决定了这个组件的不可或缺。
由于它的格式没有view或者button那么多，所以可以将它包裹在其他组件中。这个组件的一部分功能在使用时可以在js中用wx.navigateTo函数来替代，对于组件嵌套样式设计比较苦恼的同学可以利用js中的wx.navigateTo来减少嵌套。
这是wx.navigateTo的官方文档。

opendata

官方文档
用于展示微信开放的数据。展示用户的头像、性别、语言、城市等信息。“黄蔷的记事本”首页的头像展示就用了这个模块组件。

scroll-view

官方文档
可滚动视图区域。默认是横向滚动，使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。相应可以设置触底事件等，还是比较方便的组件。由于项目在展示方面设计了分页的模式，所以最后还是取消了这种模式。

.wxss篇

官方文档
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
这是官方给出的语法规则，也可以分模块查看。

• WXS 模块
• 变量
• 注释
• 运算符
• 语句
• 数据类型
• 基础类库

和上面一样，本篇暂时不介绍语法。

大小组件

主要是width、height控制边框大小。个人比较常用的有两种设置方式，一种形如100%之类的百分比，如width:95%就表示宽度占据屏幕的95%区域。还有一种是rpx、px，不同机型中这两种像素的换算会不一样，根据文档推荐使用rpx。然后还有一种我喜欢用的就是auto，会自动伸缩，但是也造成了一定的不可控性。

文字组件

一系列以font作为开头的组件，比较常用的是font-size/font-color/font-weight,分别对应文字大小、颜色、粗细。

其他组件

这部分有些组件确实好用，但是不知道怎么为其归类，就统一写在这部分了。

margin

margin用来控制模块外框与其他相邻模块的距离，是CSS的属性。上下左右分别对应-top/-buttom/-left/-right。也支持输入连续四个像素表示上下左右的间距。

padding

padding用来控制模块内容和模块外框的距离。比如button、text、view有时会出现文字紧靠按钮边缘的情况，用padding可以把按钮撑大一点。

border

组件的边框。需要带三个参数形如：

border:1rpx solid green;

表示边缘线的宽度、边缘线的形式、边缘线的颜色。颜色除了支持一些常见的英文单词外，还支持十六进制RGB。
值得一提的是border-radius，可以让模块的边角变得不那么尖锐，如：

.txt{
  ......
  border:1px solid  #ccc;
  border-radius: 5px;
  margin: 20rpx 50rpx 10rpx 50rpx;
}

有时希望方形的按钮变成圆形的，可以使用50%来达到这个效果：

.userinfo-avatar {
  width: 200rpx;
  height: 200rpx;
  margin: 20rpx;
  overflow: hidden;
  border-radius: 50%;
  background-size: cover;
  background-color: #f6f6f6;
  float: right;
  margin-right: 73rpx;
}

这样就可以让头像的显示框变成圆形，也可以设置椭圆、圆矩形等其他形状。

float

float可以让组件“悬浮”在，有点类似对齐方式。主要是上下左右和居中。

justify-content

主要参数值有space-around;center；等，是css语法内容。定义了元素之间及其周围的空间的样式。

overflow: hidden;

比较实用的预览框，只显示露出来的部分文本，将超出框的部分隐藏。个人认为这种设计需要根据文本大小来小心地控制边框的大小，避免只露出半行的尴尬。