当前位置:首页 > 版本前瞻

微信小程序开发(常用标签用法

admin 2025-10-13 23:39:51 3068

目录:

rich-text标签

icon标签

switch标签

最后一篇常用标签

rich-text标签富文本标签。可以将HTML代码转换为小程序代码显示。

支持的HTML标签:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

该标签通过nodes属性将HTML代码转为小程序页面显示。

如:

代码语言:javascript代码运行次数:0运行复制nodes的值可以是数组也可以是字符串,当值为数组时需要在js文件data中定义,由于之前没有写到js文件,所以这里数组形式后面在写js文件时再举例说明。

icon标签用于显示小程序内置的图标,如成功、提示、警告等图标。

图标显示的类型使用type属性指定,size属性指定图标的大小,color属性指定图标的颜色。

图标类型的有效值:

类型

描述

success

成功

info

提示

warn

警告

waiting

等待

success_no_circl

多选空间图标_已选择

circle

多选控件图标_未选择

download

下载

cancel

叉号

search

放大镜

如:

代码语言:javascript代码运行次数:0运行复制switch标签开关选择器,是一个小开关。

常用的属性:

checked属性来控制它是否被选中,Boolean类型的值。

disbled属性来控制它是否被禁用。

type属性来控制它的类型,有效值:switch, checkbox。

color属性来控制它被选中时的颜色,默认为绿色。

bindchange属性指定checked状态改变时触发的事件。

如:

代码语言:javascript代码运行次数:0运行复制其中switchChange为触发的事件,该事件在js文件中定义。

progress标签进度条标签。通过属性来指定和更新当前进度百分比。

常用属性:

percent属性指定当前进度条百分比进度,值为1-100。

show-info属性指定是否在右侧显示百分比,值为Boolean类型。

border-radius属性指定进度条的四角圆滑程度。

font-size属性指定右侧字体的大小。

stroke-width属性指定进度条的宽度。

activeColor指定已加载部分进度条的颜色。

backgroundColor属性指定未加载部分进度条的颜色。

更多属性:https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

如:

代码语言:javascript代码运行次数:0运行复制