Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【愚公系列】《微信小程序与云开发从入门到实践》016-基础功能组件

【愚公系列】《微信小程序与云开发从入门到实践》016-基础功能组件

原创
作者头像
愚公搬代码
发布于 2025-01-15 15:57:58
发布于 2025-01-15 15:57:58
23600
代码可运行
举报
运行总次数:0
代码可运行

标题

详情

作者简介

愚公搬代码

头衔

华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。

近期荣誉

2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。

博客内容

.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。

欢迎

👍点赞、✍评论、⭐收藏

🚀前言

微信小程序的开发旅程中,基础功能组件是构建应用的基石。这些组件不仅提供了常见的用户交互功能,还帮助开发者快速实现丰富的应用场景。无论是按钮、输入框,还是导航栏、列表等,这些基础组件的合理运用都能大大提升用户体验和开发效率。

本篇文章将深入探讨微信小程序的基础功能组件,详细介绍它们的特性、使用方法以及最佳实践。我们将结合实际案例,帮助你理解如何灵活运用这些组件,以满足不同的业务需求和用户期望。

所谓功能组件,是指为页面提供功能支持的基础组件。通过容器组件将功能组件进行包装即可扩展出更复杂的自定义组件。常用的功能类组件有文本标签、图标、进度条、按钮、选择框、选择器等,每种功能组件都有其特定的属性与切样式。

无论你是小程序开发的新手,还是希望进一步优化应用的资深开发者,这篇文章都将为你提供实用的技巧和深入的理解。让我们一起探索微信小程序的基础功能组件,打造出更具吸引力和实用性的小程序吧!

🚀一、基础功能组件

基础功能组件是指UI样式简单一般不会有太多交互功能的组件,包括icon(图标)组件、progress(进度条)组件、text(文本)组件与rich-text(富文本)组件。

🔎1.icon 组件的应用

在页面开发时,图标组件(icon)经常用于显示一些常见提示,例如告知用户操作成功时显示一个绿色的“对号”图标,或者告知用户操作异常时显示一个红色的“叹号”图标。这些常用的图标已经内置于小程序开发框架中,可以直接使用 icon 组件。

示例代码:

在示例工程中的 pages 文件夹下新建一个名为 iconDemo 的页面,并在 icon.wxml 文件中编写以下示例代码:

代码语言:xml
AI代码解释
复制
<!-- pages/iconDemo/iconDemo.wxml -->
<view>成功样式图标: <icon type="success" size="30"></icon></view>
<view>提示样式图标: <icon type="info" size="30"></icon></view>
<view>无圆对号样式图标: <icon type="success_no_circle" size="30"></icon></view>
<view>警告样式图标: <icon type="warn" size="30"></icon></view>
<view>等待样式图标: <icon type="waiting" size="30"></icon></view>
<view>取消样式图标: <icon type="cancel" size="30"></icon></view>
<view>下载样式图标: <icon type="download" size="30"></icon></view>
<view>搜索样式图标: <icon type="search" size="30"></icon></view>
<view>清除样式图标: <icon type="clear" size="30"></icon></view>

图标类型及效果:

  1. 成功样式图标:undefinedtype="success",表示成功。
  2. 提示样式图标:undefinedtype="info",表示提示。
  3. 无圆对号样式图标:undefinedtype="success_no_circle",表示成功,但没有圆圈。
  4. 警告样式图标:undefinedtype="warn",表示警告。
  5. 等待样式图标:undefinedtype="waiting",表示等待。
  6. 取消样式图标:undefinedtype="cancel",表示取消。
  7. 下载样式图标:undefinedtype="download",表示下载。
  8. 搜索样式图标:undefinedtype="search",表示搜索。
  9. 清除样式图标:undefinedtype="clear",表示清除。

运行效果:

运行代码后,页面将展示不同类型的图标,效果如下图(假设是图4-1)。每个图标的大小均为30px,展示了不同的状态提示图标。

icon 组件可配置的属性有3个,如表所示。

属性名

类型

意义

type

字符串

设置图标的类型,可选值如下:success、success_no_circle、info、warn、waiting、cancel、download、search、clear

size

数值

设置图标的大小

color

字符串

设置图标的颜色

🔎2.progress 组件的应用

progress 是一种进度条组件,在实际页面开发中,有很多场景会使用到进度条组件。例如视频播放的进度,下载任务的进度等。progress 组件提供了许多可配置的属性,支持显示百分比进度、播放进度动画等。

pages 文件夹下新建一个名为 progressDemo 的页面,在 progressDemo.wxml 文件中编写如下代码:

代码语言:xml
AI代码解释
复制
<!--pages/progressDemo/progressDemo.wxml-->
<view><progress percent="20" show-info stroke-width="3"/></view>
<view><progress percent="40" active stroke-width="6" show-info/></view>
<view><progress percent="60" active stroke-width="9" show-info/></view>
<view><progress percent="80" color="blue" active stroke-width="12" show-info border-radius="6"/></view>

运行代码,效果如图所示。

可以发现,页面首先加载时,进度条会以动画的方式前进到指定的进度。相比 icon 组件,progress 组件的可配置属性较多,如表所示。

属性名

类型

意义

percent

数值

当前进度条的百分比

show-info

布尔值

设置在进度条右侧是否显示百分比

border-radius

数值或字符串

设置进度条的圆角大小

font-size

数值或字符串

设置进度条右侧百分比数字的字体大小

stroke-width

数值或字符串

设置进度条线的宽度

color

字符串

设置进度条颜色

activeColor

字符串

设置进度条条激活部分的颜色

backgroundColor

字符串

设置未激活部分的进度条颜色

active

布尔值

设置是否显示进度条从左到右的动画进度

active-mode

字符串

设置动画的播放类型,包括以下两种类型:backwards:动画从头播放 forwards:动画从上次结束的地方播放

duration

数值

设置进度增加 1% 动画所需的时间,默认为 30ms

bindactiveend

函数

设置动画播放完成的回调

🔎3.text 组件的应用

text 是一种用来展示文本的组件。其本身使用非常简单,当我们新建一个页面时,默认生成的模板中就带有一个 text 组件,如下所示:

代码语言:xml
AI代码解释
复制
<!--pages/textDemo/textDemo.wxml-->
<text user-select>文本示例</text>

text 组件可配置的属性如表所示。

表 text 组件的属性

属性名

类型

意义

user-select

布尔值

文本是否支持选中

space

字符串

设置空格字符的大小,可设置为:ensp:半角空格,emsp:全角空格,nbsp:半角不换行的空格

decode

布尔值

设置是否对文本进行解码

decode 属性用来设置是否对文本进行解码操作,支持解码的字符如表所示。

表decode 属性支持的解码字符

字符

意义

 

半角不断行空格符

<

小于号

>

大于号

&

"&" 符号

'

"'" 符号

半角空格

全角空格

还有一点需要注意,text 组件内部只允许嵌套 text 组件。

🔎4.rich-text 组件的应用

在小程序中,rich-text 组件可以用来渲染富文本内容。下面是两个示例,其中一个是使用字符串渲染富文本,另一个是使用描述 Node 节点的对象来渲染富文本。

🦋4.1 示例 1:使用字符串渲染富文本

  1. pages/textDemo/textDemo.wxml 文件中编写以下代码:
代码语言:xml
AI代码解释
复制
<!--pages/textDemo/textDemo.wxml-->
<rich-text nodes="{{html}}"></rich-text>
  1. textDemo.js 文件中定义一个字符串 html
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// pages/textDemo/textDemo.js
Page({
  data: {
    html: `<div>
             <h1>标题</h1>
             <p class="p">正文段落<i>斜体</i> <b>粗体</b>.</p>
           </div>`
  }
});

运行代码,效果如图所示。

🦋4.2 示例 2:使用描述 Node 节点的对象渲染富文本

  1. 修改 textDemo.wxml 文件中的代码如下:
代码语言:xml
AI代码解释
复制
<!--pages/textDemo/textDemo.wxml-->
<rich-text nodes="{{nodes}}"></rich-text>
  1. textDemo.js 文件中定义一个 Node 节点对象数组 nodes
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// pages/textDemo/textDemo.js
Page({
  data: {
    nodes: [
      {
        name: 'h1',
        attrs: {
          style: 'line-height: 60px; color: #1AAD19;'
        },
        children: [
          {
            type: 'text',
            text: '标题'
          }
        ]
      },
      {
        name: 'p',
        children: [
          {
            type: 'text',
            text: '正文段落'
          }
        ]
      }
    ]
  }
});

运行代码,效果如图所示。

🦋4.3 使用 Node 对象渲染富文本

在使用 Node 对象渲染富文本时,需要传递一组 Node 节点对象。

Node 节点对象可配置的属性如表所示。

属性名

类型

意义

name

字符串

标签名

attrs

对象

当前标签元素的属性

children

数组

子节点数组

type

字符串

节点类型,可设置为 .node:标签节点,.text:文本节点

text

字符串

文本,只有 tex 节点可以设置此值

rich-text 支持的标签及属性

标签名

支持的属性

意义

a

class、style

超链接标签

abbr

class、style

缩写标签

address

class、style

文档联系人的信息标签

article

class、style

独立内容标签

aside

class、style

侧边栏标签

b

class、style

粗体标签

bdi

class、style

bidi 隔离标签

bdo

class、style、dir

bidi 覆盖标签

big

class、style

大号字体文本标签

blockquote

class、style

引用标签

br

class、style

换行标签

caption

class、style

表格标题标签

center

class、style

文本居中标签

cite

class、style

作品标题标标签

code

class、style

代码文本标签

col

class、style、span、width

对表格中的列进行组合

colgroup

class、style、span、width

定义 colgroup 内每一列的列属性

dd

class、style

列表项标签

del

class、style

文本删除标签

div

class、style

块标签

dl

class、style

列表标文本标签

dt

class、style

列表标标签

em

class、style

文本强调标签

fieldset

class、style

表单分组标签

font

class、style

字体配置标签

footer

class、style

页脚标签

h1

class、style

标题标签

h2

class、style

标题标签

h3

class、style

标题标签

h4

class、style

标题标签

h5

class、style

标题标签

h6

class、style

标题标签

header

class、style

页头标签

hr

class、style

水平分割线标签

i

class、style

文本斜体标签

img

class、style、alt、src、height、width

图片标签

ins

class、style

文本插入标签

label

class、style

标注标签

legend

class、style

fieldset 中的标题标签

li

class、style

列表项标签

mark

class、style

文本记号标签

nav

class、style

导航标签

ol

class、style、start、type

有序列表标签

p

class、style

段落标签

pre

class、style

文本预格式化标签

q

class、style

文本引用标签

rt

class、style

注音标签

ruby

class、style

定义注音,与 rt 和 rp 标签一起使用

s

class、style

定义不正确文本的标签

section

class、style

区域标签

small

class、style

小号字体标签

span

class、style

行内元素标签

strong

class、style

文本加粗标签

sub

class、style

下标文本标签

sup

class、style

上标文本标签

table

class、style、width

表格标签

tbody

class、style

主体内容标签

td

class、style、colspan、height、rowspan、width

表格中的单元格标签

tfoot

class、style

表格页脚标签

th

class、style、colspan、height、rowspan、width

表头单元格标签

thead

class、style

表头内容标签

tr

class、style、colspan、height、rowspan、width

表格行标签

tt

class、style

打字机文本标签

u

class、style

下划线文本标签

ul

class、style

无序列表标签

rich-text 渲染时,其中大部分标签的用法都与 HTML 原标签的用法一致。但是有些也有区别,比如富文本中的 img 标签只能支持网络图片资源。如果使用了非上述列表中的标签,则会被自动移除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
「小程序JAVA实战」小程序的基础组件(24)
来说下 ,小程序的基础组件。源码:https://github.com/limingios/wxProgram.git 中的No.11 基础组件 icon图标组件 rich-text 富文本组件 te
IT架构圈
2018/12/25
9130
微信小程序开发(常用标签用法-第三篇)
支持的HTML标签:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
全栈开发日记
2022/05/13
8340
微信小程序开发(常用标签用法-第三篇)
全栈开发工程师微信小程序-上(下)
nodes 文本节点:type = text,全局支持class和style属性,不支持id属性。
达达前端
2019/07/03
1.6K0
全栈开发工程师微信小程序-上(下)
如何使用小程序视图容器组件
在上一篇文章中,我们介绍了小程序入门开发的基础步骤,并通过几个Hello Word例子,让大家体验了下小程序的组件及API使用,接下来的教程中,我们将教大家详细使用每个组件及API的使用。
宮園薰
2018/11/05
9.9K0
如何使用小程序视图容器组件
微信小程序入门之常用组件(04)
重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等
海拥
2021/08/23
7960
04-微信小程序常用组件-基础组件
微信小程序包含了六大组件:视图容器、基础内容、导航、表单、互动和导航。这些组件可以通过WXML和WXSS进行布局和样式设置,从而构建出丰富的小程序界面和交互体验。
度假的小鱼
2023/11/22
6050
04-微信小程序常用组件-基础组件
【愚公系列】《微信小程序与云开发从入门到实践》017-提供用户交互功能的组件
在微信小程序的开发过程中,用户交互功能的实现是提升用户体验的关键。而微信小程序提供了一系列强大的组件,专门用于增强用户与应用之间的互动。这些组件不仅丰富了小程序的功能,也为开发者提供了灵活的工具,以满足不同场景下的交互需求。
愚公搬代码
2025/01/16
4150
手把手小程序开发【3-小程序组件】】
小程序的前端界面,都是有相关的组件组成的。小程序组件的概念和HTML标签类似,虽然名称、属性和Html标签不太一样,但是实现效果和写法是类似的。
Lemon黄
2019/10/08
6360
【愚公系列】2022年10月 微信小程序-优购电商项目-小程序常见组件
mode 有效值: mode 有 13 种模式,其中 4 种是缩放模式,9种是裁剪模式。
愚公搬代码
2022/11/07
1K0
微信小程序【常用组件及自定义组件】
微信小程序入门的文章,其实暂时就更新到这里了,还有一个生命周期的内容,感觉当初整理的不是很好就不更新了,学完了 WXML、WXSS、一些常用组件,还有事件绑定,其实一个较为不错的页面已经能自己搭建出来了,如果你还想继续往后面研究,我给一下方向就是,可以开始看 与后台交互的内容了,发送异步请求,对数据进行回显等,回显内容时,你就又可以开始考虑用什么别的组件,可以让页面的数据加载或者观看更加顺滑,美观,当然有很多小伙伴都是后端,所以,可以自己搭个后台,试着弄用户登录授权这块,这块算是小程序一个重要的点,要好好研究一下,以后要做的事情,就和传统的后端基本一样了。我的文章都是根据官网写的原生写法,当然你也可以看一下一些小程序框架,或者看一看 ES6 的内容,毕竟我也是个后端,也没细细研究前端的内容,有什么想法或者意见,可以在公众号菜单页面直接给后台发文字,或者发送邮件:ideal_bwh@163.com
BWH_Steven
2020/09/18
2K0
微信小程序之组件(一)
组件是视图层的组成单元,具有UI风格样式及特定的功能效果。当打开某款小程序后,界面中的图片,文字等多需要使用组件,小程序组件使用灵活,组件之间通过相互嵌套进行界面设计,开发者可以通过组件的选择和样式属性设计出不同的界面效果,一个组件开始包括标签和结束标签,属性用来装饰这个组件的样式。
淼学派对
2022/11/20
3.1K0
微信小程序之组件(一)
小程序开发实战(6):基础组件(text、icon和progress)
小程序在有很多组件,其中基础组件用来显示一些静态的信息,也是各种组件中比较常用的。本文主要介绍text组件、icon组件和progress组件。
蒙娜丽宁
2020/07/10
7590
小程序开发实战(6):基础组件(text、icon和progress)
uni-app入门教程(4)组件的基本使用
本文主要介绍了uni-app中的组件,包括四大类:基础组件(scroll-view、swiper、text等)、表单组件(button、checkbox、input等)、导航组件navigator和页面传参、媒体组件(audio、image和video等),详细说明了这些组件的常用属性和方法,并进行使用举例和演示。
cutercorley
2020/12/25
4.8K0
2019-面向小白的微信小程序-视频教学-基础
微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用
万少
2025/02/08
2970
2019-面向小白的微信小程序-视频教学-基础
微信小程序官方组件展示之基础内容rich-text源码
以下将展示微信小程序之基础内容rich-text源码官方组件能力,组件样式仅供参考,开发者可根据自身需求定义组件样式,具体属性参数详见小程序开发文档。
软件事业部
2022/08/19
6150
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
宿主环境(host environment)指的是程序运行所必须的依赖环境。例如: Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
小白的大数据之旅
2025/05/16
1750
零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)
两万字:讲述微信小程序之组件
6.cover-image目前原生组件均已支持同层渲染,建议使用 image 替代
淼学派对
2022/11/20
4.1K0
两万字:讲述微信小程序之组件
【愚公系列】《微信小程序与云开发从入门到实践》021-map(地图)组件及应用
在现代应用开发中,地图功能的实现已成为提升用户体验的重要一环。作为一款流行的应用框架,微信小程序提供了强大的地图组件(map),使开发者能够轻松地集成地图功能,展示地理位置信息,并实现丰富的交互体验。无论是定位用户位置、搜索附近商家,还是规划行程路线,地图组件都能为用户提供更直观的服务。
愚公搬代码
2025/01/17
6150
微信小程序开发学习笔记(二)——小程序框架、组件、WXML
小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
张果
2023/04/28
2.3K0
微信小程序开发学习笔记(二)——小程序框架、组件、WXML
【愚公系列】《微信小程序与云开发从入门到实践》056-迷你商城小程序的开发(电商应用首页开发)
随着移动互联网的快速发展,电商行业也迎来了新的机遇与挑战。迷你商城小程序作为一种便捷的购物工具,逐渐成为消费者线上购物的重要选择。它不仅具备快速加载、易于分享的特点,还能为用户提供个性化的购物体验。
愚公搬代码
2025/01/31
2880
推荐阅读
相关推荐
「小程序JAVA实战」小程序的基础组件(24)
更多 >
交个朋友
加入腾讯云官网粉丝站
蹲全网底价单品 享第一手活动信息
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验