小程序开发实战（6）：基础组件（text、icon和progress）

本是古典何须时尚 2023-02-24 08:42 7阅读 0赞

\---------支持作者请转发本文-----------

李宁老师已经在「极客起源」 微信公众号推出《微信小程序开发实战》系列文章，包括了小程序开发的所有核心技术，读者可以在公众号中输入138271，通过历史文章查看。

\-----------正文-----------

小程序在有很多组件，其中基础组件用来显示一些静态的信息，也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。

1. text组件

text是小程序中最简单的组件，用于显示文本。该组件支持转义符“\\”。text组件的使用方法如下：

<text>要显示的内容</text>

text组件支持嵌套，也就是允许下面的形式。

<text>
        要显示的内容
        <text>嵌套的内容</text>
    </text>

下面是一段完整的使用text组件的布局代码，在这段代码中，包含了两个text组件（嵌套形式），以及三个按钮。分别向text组件中添加文本、删除文本以及改变text组件中文字的颜色。

<text style="margin: 20px;font-size: 40px;color: {
        {color}}">
      {
        {text}}
      <text style="color:#00ffff">（最后一行）</text>
    </text>
    <view style="margin: 20px;">
      <button bindtap="add">添加一行</button>
      <button bindtap="remove">删除一行</button>
      <button bindtap="setColor">设置文字颜色</button>
    </view>

这段布局代码的显示效果如图1所示。

![format_png][]

图1  text组件效果演示

这三个按钮分别对应三个函数：add、remove和setColor。改变text组件中文本时通过改变text变量的值完成的，而设置text组件中文本的颜色是通过改变color变量的值完成的，完整的实现代码如下：

var initData = '第一行\n第二行'
    Page({
      data: {
        text: initData,    //  文本的初始数据
        color: '#ff0000'   //  文本的初始颜色
      },
      extraLine: [],       //  用于保存追加的字符串
      add: function (e) {
        //  最近一个新行
        this.extraLine.push('新行' + (this.extraLine.length + 1));
        this.setData({
          text: initData + '\n' + this.extraLine.join('\n')
        })
      },
      remove: function (e) {
        //  如果有追加的行，从最后一行删除
        if (this.extraLine.length > 0) {
          this.extraLine.pop()
          this.setData({
            text: initData + '\n' + this.extraLine.join('\n')
          })
        }
      },
      setColor: function (e) {
        //  让文本颜色在红色和蓝色之间不断切换
        if (this.data.color == '#ff0000') {
          this.setData(
            {
              color: '#0000ff'
            }
          )
        }
        else {
          this.setData(
            {
              color: '#ff0000'
            }
          )
        }
      }
    })

从这段JavaScript代码可以看出，当点击“添加一行”按钮后，会向extraLine数组中添加一行字符串。然后会利用“\\n”让字符串折行。

2. 系统内置图标组件（icon）

icon组件用于显示系统内置的图标，该组件并不能自己指定图标文件。icon组件包含如下3个属性。

*  size：Number类型，用于设置图标的尺寸，默认值是23
 *  type：String类型，用于设置系统图标的类型，详细的类型见后面的JavaScript代码
 *  color：Color类型，和css中的color属性的作用相同。该属性没有默认值，如果不指定该属性，每一个类型的图标会使用自己的默认颜色，如success图标的默认颜色是绿色

下面分别来演示这三个属性的使用方法。

下面的布局代码通过循环为icon组件显示的图标设置了不同的尺寸。

其中iconSize是在index.js文件中定义的数组变量，为了方便，下面给出了index.js文件的完整代码，其中iconType数组定义了目前icon组件支持的所有系统图标的类型。

Page({
      data: {
        iconSize: [20, 30, 40, 50, 60, 70].reverse(),  //  倒序数组
        iconColor: [
          'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
        ],
        iconType: [
          'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn',
          'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download',
          'info_circle', 'cancel', 'search', 'clear'
        ]
      }
    })

在初始化iconSize数组时，使用了reverse函数将数组元素进行倒序处理，所以前面的布局代码显示的效果如图2所示。

![format_png 1][]

图2 从大到小显示success图标

下面的布局代码用于根据iconType数组显示不同的系统图标，这些图标都会使用默认的颜色，字号都是45。

显示效果如图3所示。

![format_png 2][]

图3 显示所有的系统图标

下面的布局代码根据iconColor数组为icon设置不同的颜色。

显示效果如图4所示。

![format_png 3][]

图4  为icon组件设置不同的颜色

3.  progress组件

progress组件可以设置完成的百分比。该组件有如下5个属性。

*  percent：Float类型，默认值是0，该属性的取值范围是0~100
 *  show-info：Boolean类型，默认值是false，如果该属性为true，会在进度条右侧显示百分比
 *  stroke-width：Number类型，默认值是6，单位是px，表示进度条的宽度
 *  color：Color类型，默认值是\#09BB07，表示进度条颜色
 *  active：Boolean类型，默认值是false，如果该属性值为true，表示进度条在装载时会以动画形式显示（从左到右的动画）

下面的布局代码演示了progress组件的各种用法。

显示效果如图5所示。

![format_png 4][]

图5  进度条效果

往期回顾：

[微信小程序开发实战（1）：容器组件][1]

[微信小程序开发实战（2）：添加广告轮询图][2]

[微信小程序开发实战（3）：条件渲染][3]

[微信小程序开发实战（4）：列表渲染][4]

[微信小程序开发实战（5）：组件复用利器-模板][5_-]

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png 5][]

关注  极客起源  公众号，获得更多免费技术视频和文章。

![format_png 6][]

[format_png]: /images/20230209/933e9a5019004fbea682e582501bf1ae.png
[format_png 1]: /images/20230209/ba0c7c6c550d419dacbe8475ad5deeaa.png
[format_png 2]: /images/20230209/1542a46edf5b4fa48703eaba55521e1b.png
[format_png 3]: /images/20230209/2c29d9ef754a4263b831f29ecb6584a5.png
[format_png 4]: /images/20230209/b0150bd08d6245c49fff06949a7b7996.png
[1]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6902b58a1e8ba3cdf5cbef243ca7d238fcb69a2fad8e6056afe18d08787d5413393fc7b5eb&idx=1&mid=2651364419&scene=21&sn=4f08ee94682f107f54b2dc81474fd20c#wechat_redirect
[2]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6902888a1e8b9e6daa10d07e4c20ebdbaf0a1358c84300a697c3b126a2600a84bc89b8d4f1&idx=1&mid=2651364478&scene=21&sn=3196017aab20e51f5d23f68ab463403f#wechat_redirect
[3]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd69025f8a1e8b496460cb42ecfbddf1545333f47ffc225ef5c6b568bda1696486ba11534f66&idx=1&mid=2651364521&scene=21&sn=50cf1c358c636f01f4ab8903fbe15578#wechat_redirect
[4]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd6903178a1e8a01a14799a7cfc020dc577b2f72513314f142ec5df19134bc2f9c84efac1269&idx=1&mid=2651364833&scene=21&sn=6b87dba7c587f1197143f21c4b7a88f4#wechat_redirect
[5_-]: http://mp.weixin.qq.com/s?__biz=MjM5MzU1NzQwMQ%3D%3D&chksm=bd69031c8a1e8a0a2d092645e155064a4301bd9e5ed686a00f51f163b2f9a1786d3d634309e8&idx=1&mid=2651364842&scene=21&sn=689182ec496bc9f48ee18bfa3a2a5d06#wechat_redirect
[format_png 5]: /images/20230209/5c2da79c0af345e7b940ddafbe11957b.png
[format_png 6]: /images/20230209/95e46408003342fe8e15d4702263afb4.png