微信小程序——常用组件的属性介绍

常用的组件内容标签

text
1. 文本组件
2. 类似于HTML中的span标签，是一个行内元素
rich-text
1. 富文本标签
2. 支持把HTML字符串渲染为WXML结构

text标签的基本使用

通过text组件的selectable属性，实现长按选中文本内容的效果。只有text标签支持长按选中效果，其他的组件是不支持的

结构内容代码：

支持长按选中手机号

<text selectable>176xxxxxxxx</text>

</view>

样式内容代码：

.text-view{

margin-top: 15px;

margin-left: 15px;

}

上面的代码的实现效果，就是手机号的部分可以长按选中，但是文字的部分是无法长按选中的。

rich-text组件的基本使用

通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

结构内容代码：

支持长按选中手机号

<text selectable>176xxxxxxxx</text>

<rich-text nodes="<h1>这是HTML的一级标题<h1>"/>

</view>

样式内容代码：

.text-view{

margin-top: 15px;

margin-left: 15px;

}

上面的效果，是将rich-text标签中的nodes属性的HTML标签渲染为微信的样式并将内容进行展示。

这个标签一般适用于接收在电脑的服务端返回的HTML标签文本的时候，将其转换成微信小程序的样式在小程序中进行展示时使用。

其他常用组件

button
1. 按钮组件
2. 功能比HTML中的button按钮丰富
3. 通过open-type属性可以调用微信提供的各种功能（客服，转发，获取用户权限，获取用户信息等）
image
1. 图片组件
2. image组件默认宽度越300px，高度越240px
navigator（后面课程会专门讲解）
1. 页面导航组件
2. 类似于HTML中的a连接标签

button按钮的基本使用

结构内容代码：

<button size="mini" type="primary">迷你确认按钮</button>

<button size="mini" type="warn">迷你警告按钮</button>

<button size="mini">迷你默认按钮</button>

<button plain type="primary">镂空确认按钮</button>

<button plain type="warn">镂空警告按钮</button>

<button plain >镂空默认按钮</button>

</view>

样式内容代码：

.botton_view{

margin-top: 15px;

margin-left: 15px;

}

.botton_view button{

margin-top: 10px;

}

在使用button组件的时候，可以使用type属性去指定按钮的样式，size属性指定按钮的大小，以及通过添加plain属性去使按钮出现镂空样式。

image组件的基本使用

结构内容代码：

</view>

样式内容代码：

.img_view{

border: 1px solid red;

margin: 0 auto;

text-align: center;

width: 100px;

height: 100px;

}

.img_view image{

width: 100px;

height: 100px;

}

图片标签的使用与HTML中的基本相似，但是在微信小程序的image标签中，还有一个属性用于控制图片的缩放格式

image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

mode值

说明

scaleToFill

（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素。会填满元素，导致形变。

aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整的将图片显示出来，但是会导致周围没有被填满的部分出现白色边框。

aspectFill

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或者垂直方向是完整的，另一个方向将会发生截取。

widthFix

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。

heigjtFix

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。