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

常用的组件内容标签

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

text标签的基本使用

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

结构内容代码：

<view class="text-view">

  支持长按选中手机号

  <text selectable>176xxxxxxxx</text>

</view>

样式内容代码：

.text-view{

  margin-top: 15px;

  margin-left: 15px;

}

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

rich-text组件的基本使用

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

结构内容代码：

<view class="text-view">

  支持长按选中手机号

  <text selectable>176xxxxxxxx</text>

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

</view>

样式内容代码：

.text-view{

  margin-top: 15px;

  margin-left: 15px;

}

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

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

其他常用组件

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

button按钮的基本使用

结构内容代码：

<view class="botton_view">

  <!-- 默认按钮 -->

  <button>默认按钮</button>

  <!-- 警告按钮 -->

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

  <!-- 确认按钮 -->

  <button type="primary">确认按钮</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 class="img_view">

  <image src="./image/幼儿园-LOGO.jpg" mode="widthFix"/>

</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	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变。