既然我们已经学会了如何使用工具，下面我们来学习和测试一下微信小程序常用的组件。所谓的组件，就是微信团队开发的一些常用的标签，我们只要掌握它们的用法就可以了。当然，学习得更深入之后，我们也可以开发自己的组件给别人使用，这是程序员的更高层次。好了，废话不多说，进入正题。

微信小程序组件开发文档：可以参考此文档进行快速学习。

1. 文本

要显示文本组件，请在 .wxml 中输入以下代码

<text class="">锦鲤text><text class="textStyel">杨超越text>

显示结果

那么格式呢？当然，制作你自己的样式表！

在.wxss中输入以下代码：

.textStyel { color: #f00; font-size: 60rpx; padding-left: 50rpx; }

修改.wxml中的代码：

<text class="">testtext><text class="textStyel">test1text>

结果如图所示：

这很简单，不是吗？这和编写 HTML 基本一样。

通过比较学习，你会学得更快，理解得更快。

关于rpx：()：可以根据屏幕宽度进行适配，屏幕宽度指定为，例如上图，屏幕宽度为，一共有750个物理像素，那么= = 750个物理像素，1rpx = 0.5px = 1个物理像素。

2.查看

基本容器组件和HTML中的div很相似，功能也类似，HTML中的布局方法这里也适用。

好的，为了熟悉环境，我们先来做一个布局，并且了解一下view的用法。

首先我们来看一下我们想要实现的效果。

怎么做呢？首先在.wxml中输入如下代码：

<view class="flexbox"> <view class="flexitem" >view> <view class="flexitem" >view> <view class="flexitem" >view> <view class="flexitem" >view> <view class="flexitem" >view> view>

在.wxss中输入以下代码：

.flexbox { width: 100%; height: 700rpx; background-color: #ccc; /* 设置流式布局，允许换行 */ flex-wrap: wrap; } .flexitem { margin-top: 25rpx; width: 40%; margin-left: 6.5%; display: inline-block; height: 200rpx; background-color: chocolate; /* 设置圆角 */ border-radius: 15rpx 30rpx 50rpx 5rpx; }

布局就可以完成了，跟html布局一样吗？

至于其他一些常用的组件我就不多说了，大家可以自行查阅文档。

我也会在接下来的文章中讲到，如果学习过程中有什么问题，欢迎留言和我交流。