我在实现“黄强记事本”功能时，主要使用了

对于其他组件，也编写了相应的.wxss类。官方文档包含了很多内容，这里总结一下它的常用部分。需要注意的是，组件可以嵌套来实现更复杂的功能。本文主要不介绍语法，因为是针对前端基础知识比较新的同学。这里列出了一些常用的功能和组件，并解释了一般用法。

.wxml

官方文档

官方文档在这方面讲的非常详细。您可以在章节中查看这五种使用语法：数据绑定、列表呈现、条件呈现、模板和引用。下面介绍常用的组件：

看法

官方文档

我最常用的组件，感觉比较通用，可以塞各种东西。使用 - 控制用户按下时的状态。有时也可以使用该组件将其他组件包裹在一起，以达到控制模块出现在同一行的效果。

- {{pageNum+1}} +

比如我想让翻页“-”、“页码”、“+”这三个模块出现在同一行（默认会占3行），并显示在中央：

我可以将 "" 样式添加到最外面的视图类：

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

让它的排列形式可以灵活一些，其余部分用空格填充，这样就可以达到居中显示的功能。

有时为了添加边框，可以用view包裹所有模块并设置其样式，例如：

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

文本

官方文档

基本效果与view类似，但只能用于文本提取。相应的官方接口提供了一种方式来标记用户是否可以选择文本，使用标志来显示连续空格，以及使用显示来解码。根据文档，仅支持< > & '。 。

文本的功能比视图简单得多，因此嵌套时仅支持嵌套文本内容。 （您可以在段落中使用部分粗体和部分下划线等样式）。

说了这么多缺点，文字唯一的优点就是它是一种不可或缺的能力。是微信中唯一支持长按选择的文本节点。

官方文档

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

官方文档

超链接模块组件，用于页面跳转。超链接的必要性决定了这个组件的不可或缺。

由于它的格式不像视图那么大，因此可以将其包装在其他组件中。该组件的一些功能可以用wx.使用时js中的函数。被组件嵌套样式设计困扰的同学可以使用wx.在js中减少嵌套。

这是wx的官方文档。

官方文档

用于显示微信开放数据。显示用户的头像、性别、语言、城市等信息。 “黄强记事本”首页的头像展示就使用了该模块组件。

-看法

官方文档

可滚动的视图区域。默认为水平滚动。使用垂直滚动时，需要给-view一个固定的高度，并通过WXSS设置。相应的，可以设置触底事件等，是一个比较方便的组件。由于项目设计了分页模式进行显示，所以最终取消了这种模式。

.wxss 文章

官方文档

WXS（）是一套用于小程序的脚本语言。结合WXML，可以构建页面的结构。

WXS 是一种不同的语言，有自己的语法，不一致。

这是官方的语法规则，也可以在模块中查看。

如上，本文暂时不介绍语法。

大型和小型组件

主要是控制边框大小。有两种个人常用的设置。一个是百分比，例如 100%。例如：95%表示宽度占屏幕面积的95%。还有rpx和px。这两个像素在不同机型中的转换会有所不同。根据文档，推荐使用rpx。然后还有一个我喜欢用的，就是auto，它会自动伸缩，但是也会造成一定程度的不可控性。

文本组件

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

其他组件

这部分的一些组件确实很有用，但我不知道如何分类，所以我将它们全部写在这部分。

它是一个 CSS 属性，用于控制模块框架与其他相邻模块之间的距离。上、下、左、右分别对应-top/-/-left/-。它还支持输入四个连续像素来表示上、下、左、右之间的间距。

用于控制模块内容与模块框架之间的距离。例如，文本和视图有时会将文本靠近按钮边缘。您可以使用它来使按钮变大。

组件的边框。它需要采用以下形式的三个参数：

border:1rpx solid green;

指示边缘线的宽度、边缘线的形式和边缘线的颜色。颜色除了支持一些常见的英文单词外，还支持十六进制RGB。

值得一提的是——你可以让模块的边角变得不那么尖锐，比如：

.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; }

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

您可以使组件“悬浮”，有点类似于对齐。主要是上、下、左、右、中。

-

主要参数值包括-;;等，都是css语法内容。定义元素之间和周围空间的样式。

: ;

更实用的预览框，只显示文本暴露的部分，隐藏框外的部分。个人认为这个设计需要根据文字大小仔细控制边框的大小，避免只显示半行的尴尬。