微信小程序-（二）微信小程序组件

本文最后更新于：March 27, 2022 pm

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，微信小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。

目录

官方文档

组件的分类

官方把组件的分类分为了九大类：

  • 视图容器
  • 基础内容
  • 表单组件
  • 导航组件
  • 媒体组件
  • map地图组件
  • canvas画布组件
  • 开放能力
  • 无障碍访问

视图容器组件

view

  • 普通视图区域
  • 类似于HTML中的div，是一个块级元素
  • 常用于实现页面的布局效果

基本使用

list.wxml

1
2
3
4
5
6
<!--pages/list/list.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

list.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* pages/list/list.wxss */
.container1{
  display: flex;
  justify-content: space-around;
}

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightseagreen;
}
.container1 view:nth-child(3){
  background-color: lightsteelblue;
}

scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

基本使用

纵向滚动效果。在上面代码的基础上进行更改。

list.wxml

1
2
3
4
5
6
7
8
9
<!--pages/list/list.wxml-->
<!-- scroll-y:允许纵向滚动 -->
<!-- scroll-x:允许横向滚动 -->
<!-- ！当纵向滚动时，必须给 scroll-view 加一个固定高度 -->
<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

list.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* pages/list/list.wxss */
.container1{
  border: 1px solid gold;
  height: 150px;
  width: 100px;
}

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightseagreen;
}
.container1 view:nth-child(3){
  background-color: lightsteelblue;
}

swiper和swiper-item

  • 轮播图容器组件 和 轮播图 item 组件

基本使用

轮播图效果实现。

list.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--pages/list/list.wxml-->
<!-- indicator-dots:显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

list.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* pages/list/list.wxss */
.swiper-container{
  height: 150px; /*轮播图高度*/
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: greenyellow;
}
swiper-item:nth-child(2) .item{
  background-color: lightpink;
}
swiper-item:nth-child(3) .item{
  background-color: lightseagreen;
}

swiper组件常用属性

属性 类型 默认值 说明
indicator-dots boolean false 是否显示面板指示点
indicator-color color rgba(0,0,0,.3) 指示点颜色
indicator-active-color color #000000 当前选中的指示点颜色
autoplay boolean false 是否自动切换
interval number 5000 自动切换时间间隔
circular boolean false 是否采用衔接滑动(循环滑动)

常用基础内容组件

test

  • 文本组件
  • 类似于HTML中的span标签，是一个行内元素

基本使用

通过 text 组件的 selectable 属性，实现长按选中文本内容的效果：（只有在text中才支持selectable）

1
2
3
4
<!--pages/list/list.wxml-->
<view>
  <text selectable>www.tothefor.com</text>
</view>

rich-text

  • 富文本组件
  • 支持把HTML字符串渲染为WXML结构

基本使用

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

1
2
<!--pages/list/list.wxml-->
<rich-text nodes=" <h1 style='color:red'>墨水记忆</h1> "></rich-text>

其他组件

button

  • 按钮组件
  • 功能比HTML中的button多
  • 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

基本使用

三种不同形式的按钮。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--pages/list/list.wxml-->
<button>默认按钮</button>
<button type="primary">按钮一</button>
<button type="warn">警告按钮</button>

<view> mini 尺寸按钮</view> <br/>

<button size="mini">默认按钮</button>
<button type="primary" size="mini">按钮一</button>
<button type="warn" size="mini">警告按钮</button>

<view> plain镂空 尺寸按钮</view> <br/>

<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>按钮一</button>
<button type="warn" size="mini" plain>警告按钮</button>

image

  • 图片组件
  • image组件默认宽度为300px、高度约为240px

基本使用

空 image 标签也会占用空间。

1
2
3
<!--pages/list/list.wxml-->
<image></image>
<image src="/images/tothefor.png"></image>
1
2
3
4
/* pages/list/list.wxss */
image {
  border: 1px solid red;
}

mode属性

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

mode值 说明
scaleToFill (默认值)缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。
aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。即可以完整的将图片显示出来。
aspectFill 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。即图片通常只在水平或垂直方向是完整的，另一个方向将发生截取。
widthFix 缩放模式，宽度不变，高度自动化，保持原图宽高比不变。
heightFix 缩放模式，高度不变，宽度自动化，保持原图宽高比不变。

示例：

1
<image src="/images/tothefor.png" mode="aspectFit"></image>
  • 页面导航组件
  • 类似与 a 链接

具体后面再细说。