微信小程序开发（四）学习基本组件

现在我们已经学会使用工具了，再来了解，测试一下微信小程序的常用组件，所谓组件，就是微信团队已经开发好的一些常用标签，我们只需要掌握用法就可以了，当然，以后学得深入了，也可以开发自己的组件，让其他人使用，这是程序员的更高层境界。好了，闲言少叙，进入正题。

微信小程序组件开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/，各位可以参考这个文档，来快速学习。

一、text

显示文本组件，在index.wxml中键入如下代码

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

 

显示结果

 

格式怎么办？当然是自己做样式表了！

在index.wxss中键入如下代码：

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

在index.wxml中修改代码下：

<text class="">test</text><text class="textStyel">test1</text>

显示结果如图示：

 

 

 很容易，是不是，与做html基本没差别。

对比学习，你会学得更快，理解的更快。

关于rpx:（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

 

二、view

基本容器组件，与html中的div非常类似，功能也类似，做布局，在html中做布局的方法，在这里同样适用。

好了，为了熟悉环境，我们来做个布局，顺便也理解一下view的用法

先看一下，要完成的效果

 

 如何做呢，先在index.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>

在index.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做布局一样呢。

 

至于其他的常规组件，我就不过多赘述了，大家可以查阅文档学习。在以后的文章中，如果用到，我也会讲一下。

如果各位在学习过程中有任何问题，欢迎留言与我交流。