清弦子@博客

固件库

Fri, 10 Apr 2026 00:00:00 GMT

核心心法：如何阅读手册中的寄存器表格？

STM32F1系列下的不同产品子系列

基础/增强型：STM32F10X_LD / _MD / _HD。这是最常用的分类，根据Flash容量大小划分-。STM32F103C8T6 就属于这个类别，对应 STM32F10X_MD。

互联型：STM32F10X_CL (Connectivity Line)。指集成了更丰富外设（如以太网、USB OTG）的STM32F105/107系列。

超值型：STM32F10X_LD_VL / _MD_VL / _HD_VL (Value Line)。专指性价比高、成本敏感的STM32F100系列。

频率和秒的知识点

格式化输出符号

C语言常用转义字符

转义字符以\开头，用来表示无法直接输入 / 显示的特殊字符，或解决\、"这类符号的冲突问题。

转义字符	ASCII 码（十进制 / 十六进制）	功能说明	串口 / 终端常见场景
`\0`	0 / 0x00	字符串结束标志	C 语言中`char[]`的终止符，`while(*str != '\0')`就是靠它判断字符串结束
`\n`	10 / 0x0A	换行（Line Feed）	光标移到下一行，但不回到行首
`\r`	13 / 0x0D	回车（Carriage Return）	光标回到当前行的行首，但不换行
`\r\n`	13+10 / 0x0D 0x0A	Windows 标准换行	同时实现「回到行首 + 换行」，串口助手里按回车就会发送这两个字节
`\t`	9 / 0x09	水平制表符（Tab）	光标跳到下一个 Tab 位置，用来对齐文本
`\b`	8 / 0x08	退格（Backspace）	光标回退一格，删除前一个字符
`\f`	12 / 0x0C	换页（Form Feed）	在 Windows 超级终端 / 串口助手发送`\f`（即`0x0C`）可实现清屏
`\\`	92 / 0x5C	反斜杠本身	因为`\`是转义起始符，要输出单个`\`必须写两个`\\`
`\'`	39 / 0x27	单引号	解决 C 语言中`'`作为字符边界的冲突
`\"`	34 / 0x22	双引号	解决 C 语言中`"`作为字符串边界的冲突
`\ddd`	8 进制表示的字符	用 1-3 位 8 进制数表示 ASCII 字符	比如`\012`等价于`\n`（8 进制 12 = 十进制 10）
`\xhh`	16 进制表示的字符	用 1-2 位 16 进制数表示 ASCII 字符	比如`\x0A`等价于`\n`，`\x0D`等价于`\r`

ANSI 终端控制码（彩色文本 + 格式控制）

NSI 控制码以\033[（即ESC[，\033是 ESC 的 8 进制表示）开头，用来控制终端的文本颜色、格式，支持大部分串口助手（如 DYS 串口助手、Xshell、PuTTY）

（1）基础格式控制码

开启码	对应关闭码	功能说明	杜洋串口助手 V1 支持情况	备注
`0`	无（全局重置）	恢复所有默认设置（黑底白字，关闭所有格式）	✅ 完美支持	最常用！所有格式输出后必须加这个，否则后续文字都会带格式
`1`	`22`	高亮 / 加粗显示	✅ 完美支持	最常用！让文字更醒目，调试信息必备
`2`	`22`	暗淡 / 低亮度显示	❌ 不支持	绝大多数串口助手都不支持
`3`	`23`	斜体显示	❌ 不支持	只有 Xshell、SecureCRT 等专业终端支持
`4`	`24`	下划线	✅ 完美支持	可以用来标记重要标题
`5`	`25`	慢速闪烁（<150 次 / 分钟）	⚠️ 部分支持	杜洋串口助手会显示为高亮，不会真的闪烁
`6`	`25`	快速闪烁（>150 次 / 分钟）	❌ 不支持	几乎没有终端支持
`7`	`27`	反白显示（前景色和背景色互换）	✅ 完美支持	用来突出显示警告信息
`8`	`28`	隐藏 / 不可见	❌ 不支持	杜洋串口助手会显示为黑色文字
`9`	`29`	删除线 / 划除线	❌ 不支持	只有现代终端支持

（2）前景 / 背景颜色对照表

（2.1）基础8色（所有终端通用）

前景色代码	背景色代码	颜色名称	效果
30	40	黑色	深黑色
31	41	红色	深红色
32	42	绿色	深绿色
33	43	黄色	深黄色（偏棕）
34	44	蓝色	深蓝色
35	45	紫红色	深紫色
36	46	青蓝色	深青色
37	47	白色	浅灰色（标准白色）

（2.2）16 色（绝大多数串口助手支持，推荐使用）

在基础 8 色的基础上，增加了高亮版本，通过在颜色代码前加1;（高亮属性）实现，颜色更鲜艳、更清晰

前景色代码	背景色代码	颜色名称	效果
30	40	黑色	深黑色
90	100	亮黑色	深灰色
31	41	红色	深红色
91	101	亮红色	鲜红色
32	42	绿色	深绿色
92	102	亮绿色	鲜绿色
33	43	黄色	深黄色
93	103	亮黄色	纯黄色
34	44	蓝色	深蓝色
94	104	亮蓝色	天蓝色
35	45	紫红色	深紫色
95	105	亮紫红色	洋红色
36	46	青蓝色	深青色
96	106	亮青蓝色	天青色
37	47	白色	浅灰色
97	107	亮白色	纯白色

示例（STM32）：

（2.3）256 色（部分高级串口助手支持）

支持 Xshell、SecureCRT、MobaXterm 等专业终端

格式：

前景色：38;5;颜色编号
背景色：48;5;颜色编号

颜色编号范围：0~255，分为 3 个区域：

0~15：对应上面的 16 色
16~231：216 种 RGB 颜色（6×6×6 色板）
232~255：24 级灰度（从黑到白）

示例：

（2.4）24 位真彩色（仅专业终端支持）

支持 Xshell 7+、SecureCRT 9+、Windows Terminal 等现代终端，绝大多数串口助手不支持

格式：

前景色：38;2;R;G;B
背景色：48;2;R;G;B

其中 R、G、B 的范围是0~255

示例：

（3）控制码格式与示例

格式：\033[<格式>;<背景>;<前景>m，用\033[0m结束控制序列

示例 1：黑底绿色高亮文字

\033[1;40;32m：开启高亮、黑背景、绿前景

\033[0m：恢复默认格式，避免后续文本也带颜色

示例 2：红色闪烁文字

示例 3：带背景的蓝色文字

存储器映像

STM32F103xx增强型模块框图（后续设置SYSCLK、AHB、APB1、APB2等都需要查看这幅图）

时钟树（后续设置SYSCLK、AHB、APB1、APB2等都需要查看这幅图）

单片机内部电路常见的四种模式

51单片机识别模式方式

双向模式

开漏模式

推挽模式

上方MOS管：PMOS管，下方MOS管：NMOS管

左边NMOS管：高电平导通

右边PMOS管：低电平导通

浮空模式

一、四种方法实现的LED闪灯程序文件分析

main.c文件代码：

1.1 RCC_Configuration(void)

sys.c文件部分代码：

① 宏观目的

② 编写者视角🚀

③ RCC时钟是什么？为什么要从HSI设置为HSE+PLL？为什么需要外设时钟？

【代码解释】：

ErrorStatus HSEStartUpStatus

出自CMSIS文件夹下的外设相关的stm32f10x.h（外设寄存器的定义）- - - ✿ 固体库文件

含义：定义状态变量

我写这行的想法：定义一个叫 HSEStartUpStatus 的变量，它的类型是 ErrorStatus。我查到 ErrorStatus 只有两个值：SUCCESS 和 ERROR。我用它来存“等待外部晶振”的结果：成功了还是失败了。

stm32f10x.h文件中ErrorStatus类型的定义代码：

RCC_DeInit( )

编写这行代码之前，芯片的时钟系统被人动过什么手脚（可能别的代码改过、或者系统从某个异常状态恢复）。我不能冒险在一个不确定的状态上直接配置，万一某个寄存器里还残留着上次的“半吊子”设置，我的配置加上去可能就乱了。所以我的第一件事是：全部清零，重新来过。

含义：恢复出厂时钟设置

设计意图：这是一个“回到原点”的操作。它不假定任何硬件状态，强制把时钟系统拨回最原始的上电默认值。这样我后续的配置就是从一张白纸开始，不会出现“旧配置残留导致异常”的棘手Bug。

我写这行的想法：先把时钟系统“恢复出厂设置”。为什么第一件事要做这个？因为我不知道之前系统被谁动过、处于什么状态。直接配置可能出乱子。所以我调用 RCC_DeInit，它帮我把所有时钟寄存器拨回到上电默认值（系统切回内部8MHz时钟，关掉外部晶振和PLL）。

出自Lib文件夹下的src文件夹下的外设相关的stm32f10x_rcc.c（外设固体库文件）- - - ✿ 固体库文件

stm32f10x_rcc.c文件中RCC_DeInit函数代码：

★（1）RCC->CR |= 0x01

毕设思路

Mon, 11 Nov 2024 00:00:00 GMT

简要记录自己的想法、知识点和参考文献

JavaScript基础

Tue, 20 Aug 2024 00:00:00 GMT

一、JavaScript的内外部

1.1 内部JavaScript

其格式为：

【JavaScript的alert()方法】：弹窗提醒；其格式为：alert("语句");

实例：

代码测试结果如下：

【注意】：内部JavaScript可以在页面上的任何位置，而页面也允许在不同位置上放入多段javaScript代码

1.2 外部JavaScript

用法在于将原本应写到的内容变为在外面另建一个.js文件，并存放在里面

建好.js文件后，如果要用，则必须在HTML代码中，声明如下：

代码如下：

myFireScript.js

Test1_1.html

代码测试结果如下：

二、JavaScript语法

有大小写之分

其语法类似于java

每一段语句可以有分号（;），也可以没有分号（;）

注释可以这样表示：

// 或 /* */

【注意】：注释只能在之间的标签或外部js文件使用

三、JavaScript变量

3.1 变量声明

无论是什么类型内容，都统一使用关键字var加上变量名称进行声明，例如：var a = 2

在声明变量的同时可以对其进行初始化，也可以先声明变量，再另行赋值

允许一个关键字var同时声明多个变量，同时多个变量也可以是相互不同的类型，也可以是全部相同的类型

变量声明var不是必须存在的，也可以直接使用变量名称进行赋值使用，例如：list = “String”

当程序遇到未声明的变量时，就像上方的list，会自动使用该名称创建一个变量并继续使用

如果声明的变量没有赋值，则alert(变量名称)显示为underfined

3.2 变量的命名规范

首位字符必须是字母、下画线、美元符号

其他位置可以为下画线、美元符号、数字、字母

变量命名方式有Camel标记法（变量为多个单词时，第一个单纯的首字母为小写，其他单词的首字母为大写，如，var myFirseScript）、Pascal标记法（所有单词的首字母大写）、匈牙利类型标记法（在Pascal标记法的基础上，加上一个前缀【i表示整数，s表示字符串】，如，varsMyFirstScript）

3.3 关键字和保留字

关键字

break	case	catch	continue	default
delete	do	else	finally	for
function	if	in	instanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

保留字

abstract	boolean	byte	char	class
const	debugger	double	enum	export
extends	final	float	goto	implements
import	int	interface	long	native
package	privaste	protected	public	short
static	super	synchronized	throws	transient
volatite	ㅤ	ㅤ	ㅤ	ㅤ

都不能作为变量或函数名称

四、JavaScript基本数据类型

五种原始类型：Number（数字）、Boolean（布尔值）、String（字符串）、Null（空值）和Undefined（未定义）

typeof 变量名称：返回该变量名称的类型

typeof方法的常见返回值

返回值	示例	解释
underfined	var x; alert(x);	该变量为赋值
boolean	var x = true; alert(x);	该变量为布尔值
string	var x = “Hello”; alert(x);	该变量为字符串
number	var x = 3.14; alert(x);	该变量为数值
object	var x = null; alert(x);	该变量为空值null或对象

4.1 Undefined类型

当输出的变量从未声明过，或使用关键字var声明过后但并未赋值，alert(变量名称)会显示undefined字样

代码如下：

代码测试结果：

4.2 Null类型

null值表示变量的内容为空，可用于初始化变量或者清空已经赋值的变量

示例：

4.3 String类型

用于存储文本内容，赋值时，可以用单引号或双引号

这里的单引号不是指只能一个字符，它与字符串是相同的意思

当文本内容里有双引号，则外面字符串用单引号表示，反之亦然

示例:

JavaScript String对象常见方法

方法名	解释
charAt()	返回指定位置上的字符
charCodeAt()	返回指定位置上的字符Unicode编码
concat()	连接字符串
indexOf()	正序检索字符串中指定内容的位置
lastIndexOf()	倒序检索字符串中指定内容的位置
match()	返回匹配正则表达式的所有字符串
replace()	替换字符串中匹配正则表达式的指定内容
search()	返回匹配正则表达式的索引值
slice()	根据指定位置节选字符串片段
split()	把字符串分割成字符串数组
substring()	根据指定位置节选字符串片段
toLowerCase()	将字符串中所有字母都转换为小写
toUpperCase()	将字符串中所有字母都转换为大写

4.3.1 字符串长度

可以使用变量名称.length 获取其长度（与java相同）

4.3.2 获取字符串中的单个字符

使用charAt()方法获取字符串中的单个字符，使用charCodeAt()方法获取字符串中的单个字符的Unicode编码

示例：

4.3.3 连接字符串

使用concat()方法将新的字符串内容连接到原始字符串上

其格式为：concat(String s1,String s2,String s3,········,String sn);

示例：

4.3.4 查找字符串是否存在

使用indexOf()和lastIndexOf()方法来查找原始字符串中是否包含指定的字符串

其格式为：【正序】indexOf(指定的字符串，指定开始索引的位置)，【倒序】`lastIndexOf(指定的字符串，指定开始索引的位置)

4.4 Number类型

Number类型表示数字，其数字可以是32位以内的整数或64位以内的浮点数

4.4.1 科学计数法

其格式为：数值e倍数（倍数可以为负数，其格式含义为数值【整数或浮点数】乘以10的倍数次方）

示例：

4.4.2 八进制与十六进制数

要运用到八进制、十六进制以及相互转换之间的知识

Number类型也可以是八进制（以0开头，后面跟的数字只能是0—7中的一个）或十六进制（以0x开头，后面跟的字符只能是0—9或A-F之间的一个）

示例：

在代码中虽然以八/十六进制赋值，最后输出是以十进制输出

4.4.3 浮点数

使用toFixed（）方法规定小数点后保留几位数，其格式为：

若使用浮点数计算，有时会产生误差

代码如下：

代码测试结果：

4.4.4 特殊Number值

JavaScript中Number类型的特殊值

特殊值	解释
Infinity	正无穷大，在JavaScript使用Number.POSITIVE_INFINITY表示
-Infinity	负无穷大，在JavaScript使用Number.NEGATIVE_INFINITY表示
NaN	非数字，在JavaScript使用Number.NaN表示
Number.MAX_VALUE	数值范围允许的最大值，大约等于1.8e308
Number.MIN_VALUE	数值范围允许的最小值，大于等于5e-324

Infinity有正负之分，但如果Number数值超出他的上限或下限，就会返回Infinity

示例：

当两个变量数值都超出数值范围的大小，但他们各自的实际长度不相同；而由于都超出范围限制，都变为Infinity,所以判定两者是相等的，返回true；

示例：

使用数字0作为除数不会报错，则分为几种情况：

正数 / 0 = Infinity
负数 / 0 = -Infinity
0 / 0 = NaN(非数字)

Infinity不可以与其他正常的数字进行计算，返回结果仍是Infinity

Infinity - Infinity = NaN

4.4.5 NaN

表示的是非数字，用于表示数据转换成Number类型失败的情况，从而抛出异常

isNaN（变量名称）：判断数据类型是否为数值的方法，返回值为布尔值

【true时，为无法转换；false，可以转换】

4.4.6 关于Infinity 、-Infinity 、NaN三者的讨论

Infinity 运算法则

正数除以 0 得 Infinity。
Infinity 加或减任何有限数字都得 Infinity 。Infinity + Infinity 或 Infinity - -Infinity 也得 Infinity 。
Infinity 乘或除以任何有限正数得 Infinity 。Infinity 乘或除以任何有限负数得 -Infinity 。 Infinity * Infinity 或 Infinity / 0 也得 Infinity 。Infinity * -Infinity 得 -Infinity。
Infinity - Infinity 得 NaN 。 Infinity / Infinity 得 NaN 。 Infinity * 0 得 NaN 。
Infinity == Infinity 为真。 Infinity.isNaN() 为假。
Infinity.isFinite() 为假。 Boolean(Infinity) 为真。

Infinity 运算法则

负数除以 0 得 -Infinity。
Infinity 加或减任何有限数字都得 -Infinity 。-Infinity + -Infinity 或 -Infinity - Infinity 也得 -Infinity
Infinity 乘或除以任何有限正数得 -Infinity 。-Infinity 乘或除以任何有限负数得 Infinity 。 -Infinity * Infinity 或 -Infinity / 0 也得 - Infinity 。-Infinity * -Infinity 得 Infinity。
Infinity - -Infinity 得 NaN 。 -Infinity / -Infinity 得 NaN 。 -Infinity * 0 得 NaN 。
Infinity == -Infinity 为真。 -Infinity.isNaN() 为假。
Infinity.isFinite() 为假。 Boolean(-Infinity) 为真。

NaN 运算法则

0 / 0 得 NaN 。上面也有一些得 NaN 的情况。
NaN 加、减、乘或除以任何数（包括 Infinity 、 -Infinity 和 NaN 本身）得 NaN 。
无论变量 x 取何值（包括 undefined 、 null 、 true 、 false 、 Infinity 、 -Infinity 和 NaN 本身），NaN == x 恒为假。NaN.isNaN() 为真。 NaN.isFinite() 为假。 Boolean(NaN) 为假。

本段来源于关于 Infinity， -Infinity 和 NaN

4.5 Boolean类型

多用于条件判断，返回为布尔值（true或false）

总之： 1.特殊值undefined和null变成false. 2.数字0和NaN变成false. 3.空字符串变成false. 4.所有其他值都变成true.

另：凡是关于Boolean()、Number()等都是将括号里的元素强制转换为外面声明的类型

五、涉及八进制和十六进制的知识补充

六、JavaScript运算符

赋值运算符：=

示例：var x1 = 9;

算数运算符的常见用法：

运算符	解释
+	加号，求和，连接字符串
-	减号，求差
*	乘号,求积
/	除号，求商
%	求余符号
++	自增加1
–	自减减1

运算符组合：

运算符组合	格式	解释
+=	x+=y	x=x+y
-=	x-=y	x=x-y
*=	x*=y	x=x*y
/=	x/=y	x=x/y
%=	x%=y	x=x%y

逻辑运算符有三种类型：NOT（逻辑非）、AND（逻辑与）、OR（逻辑或）

逻辑运算符分为：！（逻辑非，表示对结果的对立面）、&&（逻辑与，表示并列关系）、||（逻辑或，表示二选一）

【注意：】这里与Java不同的是，JavaScript自带有一个抽象方法ToBoolean，可以提前将运算条件转换为布尔值，之后在进行逻辑运算符判断；

ToBoolean的具体转换规则如下：

值	示例	转换结果
布尔值true	var x = true;	true
布尔值false	var x = false;	false
null	var x = null;	false
underfined	var x = underfined;	false
非空字符串	var x = “Hello”;	true
空字符串	var x = ““;	false
数字0	var x = 0;	false
NaN	var x = NaN;	false
除0和NaN以外的其他数字	var x = 99;	true
对象	var student = new Object();	true

逻辑与特殊情况：

运算数类型	示例	返回值
一个是对象，一个是布尔值	var student = new Object(); var result = student && true;	返回对象类型，即student
两个都是对象	var student1 = new Object(); var student2 = new Object(); var result = student1 && student2;	返回第二个对象，即student2
一个是空值null,一个是布尔值	var x = null; var result = x && true;	null
存在NaN	var x = NaN; var result = x && true;	NaN
存在未赋值undefined	var x; var result = x && true;	underfined

但有一点：若条件1为假，返回值都是假的；【逻辑或（||）亦是如此，只要条件1为真，返回值都为真的】

逻辑或特殊情况：

运算数类型	示例	返回值
条件1位false,条件2为对象	var student = new Object(); var result = flase`\|\|`student;	返回对象类型，即student
两个都是对象	var student1 = new Object(); var student2 = new Object(); var result = student1`\|\|`student2;	返回第一个对象，即student1
条件1是false，条件2为空值null	var x = null; var result = flase`\|\|`x;	null
条件1是false,条件2为NaN	var x = NaN; var result = false`\|\|`x;	NaN
条件1为false,条件2为underfined	var x;var result = false`\|\|`x;	underfined

关系运算符分为三种比较方式：

数字之间的比较（和正常做数学题差不多）、字符串之间的比较（根据位数，判断该位数上的字母那个unicode的数字大或小；另，再讲个较为特殊一点的：一个是“9”，另一个是“10”，则按位数进行比较，切勿当做数学题做，这里9和1是同一位数的，所以按照数学正常比大小顺序，9>1，则“9”>10）、字符串与数字之间的比较（先将字符串转为数字，再进行比较；若无法转为数字，则返回false）

另：附加两个方法：toLowerCase()【将所有字母转换为小写形式】、toUpperCase()【将所有字母转换为大写形式】

相等性运算符是先将其他非数字类型的转换为数字类型，在进行相等判断；

数据类型转换规则表

数据类型	示例	转换结果
布尔值（真）	true	1
布尔值（假）	false	0
字符串（纯数字类型）	“99”	99
字符串（非纯数字类型）	“99hello123”	NaN
空值	null	null
未定义的值	undefined	undefined

相等性特殊情况规则（数据类型转换后仍不是数字类型的特殊情况）

运算数类型	示例	返回值
其中一个为null，另一个为undefined	var x1 = null; var x2; var result = (x1==x2);	true
两个值均为null	var x1 = null; var x2 = null; var result = (x1==x2)	true
两个值均为undefined	var x1; var x2; var result = (x1==x2);	true
其中一个为数字，另一个为NaN	var x1 = 5; vae x2 = parseInt(“a”); var result = (x1==x2);	false
两个值均为NaN	var x1 = parseInt(“a”); var x2 = parseInt(“b”); var result = (x1==x2);	false

那为什么两个值为NaN时，返回为false？

因为NaN是不可预测的数字，所以当两个值为NaN时，不知道哪个是大，哪个是小，因此返回false；

七、JavaScript条件语句

if-else if-else语句与java用法相同，这里不阐述；

switch-case-default语句与java用法相同，这里也不阐述；

八、JavaScript函数

函数的格式如下：

javascript的函数返回形式与java不同，它不需要在函数名前特别声明该返回什么类型，也不要加什么void，只需要按正常的在函数内部内容直接返回return加需要返回的内容就行了，没有返回值就不用写吧return；

九、文档对象模型

9.1 含义

HTML的应用程序接口

简称DOM

将整个HTML页面看作由各种节点层级构成的结构

9.2 在javascript中查找HTML元素有三种方法

HTML元素的id名称查找

其格式为document.getElementById("id名称");
如果未找到id名称，则会返回null；如果找到，则以对象形式返回；
//根据id名称获取元素（id为test）对象var test = document.getElementId("test");//获取元素内容var result = test.innerHTML;

HTML元素的标签名称查找

其格式为document.getElementsByTagName("标签名称");
注意这里的Elements是复数形式，其原因在于可能存在多个元素符合要求；这时若找到标签名称，则会以数组的形式返回；而找不到，则返回null；
var test = document.getElementsByTagName("p");var result = p[0].innerHTML;

HTML元素的类名称查找

其格式为document.getElementsByClassName("类名称");
注意这里的Elements是复数形式，其原因在于可能存在多个元素符合要求；这时若找到标签名称，则会以数组的形式返回；而找不到，则返回null；
var test = document.getElementsByClassName("coral");var result = test[0].innerHTML;

9.3 DOM HTML

9.3.1 使用document.write（）方法可以想页面动态输出内容

示例：

9.3.2 innerHTML的用法

innerHTML可以实现用于获取元素内容，也可用于修改元素内容。

其格式为:

获取：

修改内容：
修改元素属性：

9.4 DOM CSS

其格式为：

9.5 DOM事件

含义：可以再HTML页面状态发生变化时执行代码

示例：

button>

HTML常用事件属性

事件属性	解释
onabort	图像加载过程被中断
onblur	元素失去焦点
onchange	域的内容被改变
onclick	元素被鼠标左键点击
ondbclick	元素被鼠标左键双击
onerror	加载文档或图像时发送错误
onfocus	元素获得焦点
onkeydown	键盘按键被按下
onkeypress	键盘按键被按下并松开
onkeyup	键盘按键被松开
onload	页面或图像被加载完成
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从当前元素上移动
onmouseover	鼠标移动到当前元素上
onmouseup	鼠标按键被松开
onreset	重置按钮被点开
onresize	窗口或框架的大小被更改
onselect	文本被选中
onsubmit	提交按钮被点击
onunload	退出页面

9.6 DOM节点

9.6.1 添加HTML元素

两个步骤：

创建新的元素，其格式为：document.createElement("元素标签名");
将其追加到一个已存在的元素中，其格式为：已存在的元素对象.appendChild(需要添加的新元素对象);【已存在的元素对象可由document对象的getElementById(“id名称”)获取】
其总的格式为：

9.6.2 删除HTML元素

两个步骤：

使用document对象的getElementById(“id名称”)方法获取该元素；
使用removeChild()方法将其从父元素中删除
另：若父元素有明确的的id名称，可以使用getElementById()方法获取

示例：

另：若父元素没有明确的id名称，则可以使用子元素的parentNode属性获取其父元素对象

示例：

代码如下：

代码测试结果：

GraceUI5.0手册 (5)

Sun, 19 Apr 2026 00:00:00 GMT

头像剪裁

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	不支持

演示代码

UNI 普通版本

证件上传

图片素材

为了确保图片能够在所有平台打开，请下载图片到本地或者部署到您的云，并替换演示代码中的2个身份证默认图片！图片下载地址 : https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/e53bf48607dcf795ab78e419dc5cf432.png https://img-cdn-tc.dcloud.net.cn/uploads/article/20210107/dac9c5c703b2a0bcd254a919d0da5632.png

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

会员排行模板

组件介绍

带有“背景大图”的排行榜界面，请跟据项目实际情况进行修改；

页面配置

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

手写签名界面

界面介绍

基于画布 + 手指触屏事件;非组件模式，更自由的应用及二次开发;签名完成自动产生临时文件便于后续开发;

注意事项

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	不支持

界面源码

UNI 普通版本

商品列表

组件介绍

gui-product-list 组件用于以列表形式展示商品（一行2列），包含图片、价格、购买人数数据展示；

组件名称

gui-product-list : /graceUI/组件目录/gui-product-list

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
products	Array	[]	商品数据
margin	Number	15	项目左右间距，单位 rpx
imgHeight	Number	345	商品图片高度

组件事件

gotoInfo(index, item) : 点击商品时触发，携带参数 : 数据索引, 对应商品数据

改进建议

如果组件不能满足您的项目要求 ( 或者数据格式与您的后端不一样 )，请按照下面的步骤改进组件 :
复制一份 gui-product-list.vue 命名为自己的组件；
改进组件，添加元素及样式；
在页面上使用自己的自定义组件；

演示代码

UNI 普通版本

商品详情

模板介绍

提供基础的商品详情布局(轮播图、详情介绍内容、分享按钮等);提供了详情和评论切换功能;提供商品购买前的属性、数量相关功能;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

订单中心模板

模板介绍

实现订单展示功能；全屏选项卡数据绑定、切换；全屏选项卡的加载更多及下拉刷新；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

购物车模板

模板介绍

以商铺为基本展示单位;支持勾选形式结算;动态价格计算功能;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

排序与筛选

模板介绍

吸顶式的多条件筛选、排序等功能，常用于商城列表顶部。已经完成基础布局及逻辑，请根据项目需求自行改进;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

地址列表

模板介绍

基于列表布局实现常用地址布局，请跟据项目需要自行改进；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

添加地址

模板介绍

完成页面布局及表单元素布局工作；完成表单验证及表单数据收集工作；请跟据自己的项目需要进行进一步开发；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

抽奖模板

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

优惠券组件

组件介绍

通用优惠券列表展示布局组件，您可以跟据项目实际需要复制本组件命名为自己的然后改进调用。

组件名称

gui-coupons : /graceUI/组件目录/gui-coupons

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
coupon	Object	{}	对象形式的单个优惠券数据数据格式见演示代码

页面背景颜色设置

演示代码

UNI 普通版本

即时通讯消息列表组件

组件介绍

gui-im-message 消息展示组件用于展示及时通讯消息，支持文本、图片、语音三种格式，带有图片预览，语音播放等功能；

组件名称

gui-im-message : /graceUI/组件目录/gui-im-message

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	不支持，请使用vue实现

组件属性

属性名称	类型	默认值	作用
msgs	Array	[]	消息数据，格式见下面的说明
userid	String	ㅤ	用户唯一性识别id，当用户id与消息数据中的uindex相等时消息右侧展示
group	String	ㅤ	消息分组，过滤本组消息
background	String	#F7FBFE	组件背景颜色
unameStyle	String	line-height:28rpx; height:28rpx; font-size:26rpx; color:#666666;	用户昵称样式
txtContentStyle	String	line-height:38rpx; font-size:30rpx; color:#2B2E3D;	文本消息样式

消息格式

演示代码

UNI 普通版本

即时通讯消息输入组件

组件介绍

gui-im-input 用于即时通讯的消息输入环节，提供了文本提交、图片选择、语音录制等功能；

组件名称

gui-im-input : /graceUI/组件目录/gui-im-input

兼容平台

H5	APP	小程序	NVUE
✔ 不支持录音功能	✔	✔	不支持

组件事件

演示代码

UNI 普通版本

消息列表

模板介绍

基于滑动列表组件实现的即时通讯消息列表功能。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

皮肤样式

注意事项

演示代码

UNI 普通版本

二维码生成

模板介绍

基于 QRCode 的二维码创建模板，相关配置见代码注释。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	不支持

模板代码

UNI 普通版本

条形码生成

组件介绍

利用 barcode.js 实现的条形码生成模板，详见模板代码

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	不支持

模板代码

UNI 普通版本

海报模板

模板流程

实现画布初始化算法；使用 drawText 文本绘制函数进行文本绘制, 参数见代码注释；使用 drawBGIMG 图片绘制函数，注意 : 图片绘制会先进行图片的下载，这样就会产生一个异步行为，请在下载成功后完成后续的图片绘制操作及其他后续步骤操作;画布转图片 ( 代码演示了在完成画布绘制后如何将画布转换为一个图片 ) ;
05 长按保存 ( 有了图片，就可以实现长按图片并保存到相册的功能 )，至此整个流程完毕。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	不支持

模板代码

UNI 普通版本

GraceUI5.0手册 (4)

Sun, 19 Apr 2026 00:00:00 GMT

动态表单元素

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

分步提交

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

步进器

组件名称

gui-step-box : /graceUI/组件目录/gui-step-box

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	String	200rpx	组件宽度
value	Number	0	默认值
step	Number	1	步进值
maxNum	Number	9999	最大值
minNum	Number	0	最小值
buttonStyle	String	width:66rpx; font-size:38rpx; color:rgba(69, 90, 100, 0.6);	加减按钮样式
inputStyle	String	line-height:58rpx; height:58rpx; font-size:26rpx; color:#2B2E3D; background-color:#F6F7F8; border-radius:8rpx;	输入框样式
disabled	Boolean	false	输入框是否禁用
index	Number	0	组件索引值，通过 change 事件携带回来
datas	Array	[]	自定义携带数据，通过 change 事件携带回来
decimal 2021.03.09 新增	Number	2	小数位数截取，默认2位，请跟据实际情况设置

演示代码

UNI 普通版本

数字键盘

组件名称

gui-number-keyboard : /graceUI/组件目录/gui-number-keyboard

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
doneBtnName	String	完成	完成按钮文本
isPoint	Boolean	true	是否展示小数点
showInputRes	Boolean	true	是否同步输入结果
value	String	’’	默认值
resultColor	String	#2B2E3D	数值展示文本颜色
resultSize	String	32rpx	数值展示文本大小
canCloseByShade	Boolean	false	点击遮罩层(空白处)是否会关闭组件
tapBgColor	String	#008AFF	点击时按钮背景色
maxPointNumber	Number	-1	小数点最大个数 2024.09.02 新增

组件函数

组件事件

演示代码

UNI 普通版本

车牌键盘

组件介绍

车牌号码专用输入键盘，兼顾新能源车牌号码。

组件名称

gui-car-number : /graceUI/组件目录/gui-car-number

组件事件

@confirm 客户点击确定按钮时触发，携带参数 : 车牌号码
2022.01.10 新增事件 @open 键盘打开 @close 键盘关闭

组件函数

setType(carType) : 切换类型， 0 - 普通 1 - 新能源 setVal(carNumber) : 设置默认车牌号

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

滑动解锁

组件名称

gui-slide-to-unlock : /graceUI/组件目录/gui-slide-to-unlock

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx
padding	Number	6	内部间距，单位 rpx
size	Number	68	滑块大小，单位 rpx
bgColor	String	#F6F7F8	组件背景颜色
blockColor	String	#008AFF	滑块背景色
blockActiveColor	String	#39B55A	解锁后滑块背景色
iconSize	String	30rpx	滑块图标尺寸
iconColor	String	#FFFFFF	滑块图标颜色
borderRadius	String	6rpx	组件圆角尺寸
msg	String	请向右滑动滑块解锁	提示文本
msgUnlock	String	解锁成功	解锁成功提示文本

演示代码

UNI 普通版本

进度滑块

组件名称

gui-single-slider : /graceUI/组件目录/gui-single-slider

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
barHeight	Number	32	组件高度，单位 rpx
barWidth	Number	168	滑块宽度，单位 rpx
barColor	String	#FFFFFF	滑块内文本颜色
barBgColor	String	linear-gradient(to right, #3688FF,#3688FF)	滑块背景颜色
bglineSize	Number	2	滑块背景线条尺寸
bglineColor	String	rgba(54,136,255,0.5)	滑块背景线条颜色
bglineAColor	String	#3688FF	滑块背景线条激活颜色
barText	String	’’	滑块文本内容
barTextSize	String	20rpx	滑块文本大小
borderRadius	String	32rpx	组件圆角尺寸
canSlide	Boolean	true	是否允许滑块滑动

组件方法

setProgress : 设置组件默认进度, 参数 : 0 - 100 间的整数;

组件事件

@change : 组件进度发生变化时触发，携带参数 : 进度值；

演示代码

UNI 普通版本

区间滑块

组件名称

gui-interval-slider : /graceUI/组件目录/gui-interval-slider

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
bgColor	String	#F6F7F8	进度条背景颜色
activeColor	String	#3688FF	激活进度条颜色
width	Number	750	组件宽度，单位 rpx
height	Number	2	进度条高度
blockBgColor	String	#FFFFFF	滑块背景颜色
blockSize	Number	30	滑块尺寸，单位 px
min	Number	0	区间最小值
minDefault	Number	0	默认最小值
max	Number	100	区间最大值
maxDefault	Number	100	默认最大值

组件事件

滑块滑动触发 change 事件，返回滑块值，数组形式 : [ 区间左值, 区间右值 ]

演示代码

UNI 普通版本

功能标签

组件介绍

gui-stags 功能标签组件基于标签形式实现标签的选择和删除功能；

组件名称

gui-stags : /graceUI/组件目录/gui-stags

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	0	组件宽度，单位 rpx，0 代表自动宽度
text	String	’’	标签文本
size	Number	26	文本尺寸，单位 rpx
lineHeight	Number	1.8	行高比例，高度、行高=文本尺寸*行高比例
padding	Number	15	内间距，单位 rpx
margin	Number	15	组件右侧、底部间距，单位 rpx
defaultBg	String	gui-bg-blue	组件背景样式
defaultColor	String	gui-primary-color	文本颜色样式
borderRadius	Number	6	圆角尺寸，单位 rpx
tags	Array	[]	标签项目数据，格式见演示代码
type	String	radio	radio 单选，checkbox 多选，remove 可删除
checkedBg	String	gui-bg-blue	标签选中背景样式
checkedColor	String	gui-color-white	标签选中文本样式

组件事件

change : 组件数据变化时触发，携带数据: 01 单选 : 有选中的项目 : {选中项目的数据 }, {标签数据}；无选中的项目 : -1, {标签数据}
02 多选 : [ 数组形式的多选项目的索引], {标签数据};
03 删除 : 删除后新的 [ 标签数据 ];

演示代码

UNI 普通版本

点选组件

组件介绍

gui-radio 点选组件区别于原生的 radio，样式更自由，用于单个选择；

组件名称

gui-radio : /graceUI/组件目录/gui-radio

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
size	Number	38	选择图标尺寸，单位 rpx
color	String	#EEEEEE	默认图标颜色
checkedColor	String	#008AFF	选中后图标颜色
checked	Boolean	false	默认选中状态
parameter	Array	[]	组件附加数据
justifyContent 2021.01.26 新增	String	flex-start	横向对齐方式，flex-start : 左侧 center : 居中 flex-end : 右侧

演示代码

UNI 普通版本

日历组件

组件名称

gui-calendar : /graceUI/组件目录/gui-calendar

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
isTime	布尔	true	是否展示时间选择
currentDate	字符串	ㅤ	默认日期及时间, 如 2020-01-01 或 2010-01-01 18:18
bgColor	字符串	#F7F8FA	日期项目默认背景颜色
activeBgColor	字符串	#008AFF	选中日期的背景颜色
borderRadius	字符串	6rpx	日期项目圆角尺寸
isLunar	布尔	true	是否展示农历
zIndex 2021.05.27 新增	整数	9999	组件 z-index 值

组件事件

@changeDate : 日期选择时触发，携带数据当前日期 @confirm : 点击确定按钮时触发，携带数据当前日期 [ 2021.08.02 新增事件 ]

演示代码

UNI 普通版本

日期区间

组件名称

gui-date-between : /graceUI/组件目录/gui-date-between

组件介绍

graceDateBetween 以日历形式来实现日期区间的选择功能。通过属性设置您可以实现 : 选中区域背景色调整、展示月份数量调整等多种功能。

属性名称	类型	默认值	作用
weekBg	String	#F8F8F8	星期栏背景颜色
unit	Array	[’ 年 ‘,’ 月’]	年月展示单位
sedBg	String	rgba(54,136,255,0.8)	选中区域背景颜色
itemBg	String	#FFFFFF	日期默认背景颜色
color	String	#323232	日期文本颜色
sedColor	String	#FFFFFF	选中日期文本颜色
startBg	String	rgba(54,136,255,1)	起始日期背景颜色
endBg	String	rgba(54,136,255,1)	结束日期背景颜色
monthNumber	Number	2	展示月份数量，:monthNumber=“3” 代表3个个月

组件事件

selectDate : 区间选择变化时激活的事件，携带数据 [[起始日期, 结束日期], 总天数]。

组件方法

setMonth()
功能 : 设置组件展示的起始月份参数 : 有效的月份，格式 2020年05月或者 2020-05
setBetween
功能 : 设置默认区间参数 : [ 默认起始日期, 默认结束日志 ]，请严格遵守格式 : [ 20200501, 20200522 ]

演示代码

UNI 普通版本

日期时间选择器

组件名称

gui-datetime : /graceUI/组件目录/gui-datetime

功能介绍

gui-datetime 组件以 picker-view 形式来实现日期时间的选择工作，具备以下特色 :
选择器展示、关闭封装在组件内，不需要开发者实现，调用更方便;
自动识别对应年份对应月份应有的天数（如 : 自动计算某年2月份应用的天数）;

组件属性

属性名称	类型	默认值	作用
cancelText	String	取消	取消按钮文本
cancelTColor	String	#888888	取消按钮文颜色
confirmText	String	确定	确认按钮文本
confirmColor	String	#008AFF	确认按钮文本颜色
value	String	’’	默认时间值，格式 xxxx-xx-xx HH:ii:ss，默认当前时间
isTime	Boolean	true	是否展示时间选择器
isMinute	Boolean	true	是否展示分钟选择器 2021.06.07 新增
isSecond	Boolean	true	是否展示秒钟选择器
startYear	Number	1980	起始年份
endYear	Number	2050	结束年份
units	Array	Array(‘年’,‘月’,‘日’,‘时’,‘分’,‘秒’)	日期时间单位信息
height	String	300rpx	组件高度
zIndex	Number	90	z-index 默认值
width	String	750rpx	组件宽度值
indicatorStyle	String	height:36px; line-heiht:36px;	选项样式 2022.04.26 新增

会触发的事件

修改默认值

组件插槽

演示代码

UNI 普通版本

时间段选择

组件名称

gui-datetime-between : /graceUI/组件目录/gui-datetime-between

功能描述

GraceUI 日期时间区间选择组件以 picker-view 为基础实现，可以方便地完成时间段的选择功能;

组件属性

属性名称	类型	默认值	作用
cancelText	String	取消	取消按钮文本
cancelTColor	String	#888888	取消按钮文颜色
confirmText	String	确定	确认按钮文本
confirmColor	String	#3688FF	确认按钮文本颜色
startValue	String	’’	默认起始时间值，格式 xxxx-xx-xx HH:ii:ss，默认当前时间
endValue	String	’’	默认结束时间值，格式 xxxx-xx-xx HH:ii:ss，默认当前时间
isDay	Boolean	true	是否展示日期选择器
isTime	Boolean	true	是否展示时间选择器
isMinute	Boolean	true	是否展示分钟选择器
isSecond	Boolean	true	是否展示秒选择器
startYear	Number	1980	起始年份
endYear	Number	2050	结束年份
units	Array	Array(‘年’,‘月’,‘日’,‘时’,‘分’,‘秒’)	日期时间单位信息
titles	Array	[‘请选择开始时间’,‘请选择结束时间’]	时间选择器前的分割标题
indicatorStyle	String	height:36px; line-heiht:36px;	滚动选项样式 2022.04.26 新增
height	String	300rpx	区间 picker 高度 2022.06.23 更新

触发事件

组件插槽

演示代码

UNI 普通版本

日程日历

组件介绍

带有日程安排、提醒的日历组件。

组件名称

gui-schedule : /graceUI/组件目录/gui-schedule

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
currentDate	String	’’	当前日期, 格式 YYYY-mm-dd
bgColor	String	#FFFFFF	日期项目背景颜色
activeBgColor	String	#3688FF	选中日期背景颜色
isLunar	Boolean	true	是否展示农历信息
startDate	String	1950-01-01	起始日期
endDate	String	2050-01-01	结束日期
schedules	Array	[]	日程数组，格式见示例
pointColor	String	#FF0036	日程提醒点颜色

组件事件

01 scheduleTap : 日程项目被点击时触发，携带参数 : 被点击项目的索引; 02 chooseDate : 点击具体日期时触发，携带参数 : 选中的日期信息; 03 selectDate : 用户点击日期 picker 并确认选择日期后触发，携带参数 : 选中的日期信息; 04 gotoToday : 用户点击返回今天按钮时触发，携带参数 : 今天对应的日期信息;

演示代码

注意 : 请使用 v-if/wx:if 等待api加载完成后再创建组件，详见项目的演示代码 (:

UNI 普通版本

横向日历

布局介绍

GraceUI 横向日历由滚动区域 + 列表组件组合而成，适用于日期、行程类应用界面；非组件布局模式，更灵活。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

文章列表

组件说明

内部使用 gui-image 组件完美实现图片的兼容和加载效果；如果组件属性不能满足您的项目需求，请复制此组件命名为自己的组件进行改进；演示代码演示了最基础用法，更复杂的应用演示见左侧手册文章列表相关；

组件名称

gui-article-list : /graceUI/组件目录/gui-article-list

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
articles	Array	[]	文章列表数据，格式见 article.js, 如果您的 api 返回值格式与组件不一致，请转换对应的格式或者改造组件。
titleStyle	String	lineHeight:44rpx;font-size:32rpx;color:#2B2E3D;	文章标题样式
itemStyle	Sting	background-color:#FFFFFF;	列表项目样式

演示代码

UNI 普通版本

文章列表实战演示

演示介绍

利用页面组件 + 切换导航 + 文章列表 + 刷新组件 + 加载组件完成布局；点击分类切换对应的文章列表数据模式 ( 运行效率较高 )，选项卡模式见左侧手册；完整的实现了文章列表页面布局、刷新、加载、分类切换等功能；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

文章列表选项卡

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

重要说明

此页面基于轮播 + 滚动区域 + 文章列表组件实现，在低端机上有可能因为以下原因造成页面卡顿，我们也与官方沟通过此类情况，总结如下 :
图片过大并且数量较多，解决方案 : 后端压缩图片尺寸（与uni-app 官方沟通、验证过）；
nvue 端即便使用 list cell 依旧不能解决安卓低端机器卡顿问题，请使用 vue 版本实现（ uni-app 底层对图片组件进行了改进存在渲染问题）；
如果图片左右布局请使用列表组件来代替此页面的文章列表组件；
卡顿现象多出现于 app 顿，小程序端运行良好；

演示代码

UNI 普通版本

内容编辑器组件

组件介绍

gui-content-editor 编辑器组件目标是提供一个灵活的前端编辑器给用户来使用，具备以下特色 :
体验较好、功能丰富、全端兼容；
内容选项可以删除、排序；
以数组形式收集编辑器数据，可以使用 JSON.stringify() 将数据序列化后提交给后端并保存到数据库;
配套提供数据对应的解析器，用于展示编辑器产生的文章数据，体验更好；

组件名称

gui-content-editor : GraceUI 组件目录/gui-content-editor.vue

组件事件

@deleteImage 删除已上传图片时触发，携带参数 : 图片路径。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

上传后端返回值格式

使用说明

编辑器默认值赋值方式在演示代码 mounted() 处，请参考后用于文章编辑功能；采用提交时上传图片方式，上传代码在演示代码中已经写好；上传图片时采用一次一个循环上传的方式进行上传；我们已经为大家写好了基于 php 和 go 语言的后端源码，请加入 GraceUI 付费用户 QQ 群，进入群文件进行下载。

演示代码

UNI 普通版本

编辑器组件

此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧内容编辑器组件。

组件介绍

gui-editor 编辑器组件目标是提供一个灵活的前端编辑器给用户来使用，具备以下特色 :
体验较好、功能丰富、全端兼容；
内容选项可以删除、排序；
以数组形式收集编辑器数据，可以使用 JSON.stringify() 将数据序列化后提交给后端并保存到数据库;
配套提供数据对应的解析器，用于展示编辑器产生的文章数据，体验更好；

组件名称

gui-editor : /graceUI/组件目录/gui-editor

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

上传后端返回值格式

使用说明

编辑器默认值赋值方式在演示代码 onload 函数内，请参考后用于文章编辑功能；才有提交时上传图片方式，上传代码在演示代码中已经写好；上传图片时才有一次一个循环上传的方式进行上传，后端接收代码 php 版本示例 :
建议 : 写一个简单的单图上传功能，调试接口返回值，保证接口无误再使用组件;

演示代码

UNI 普通版本

将编辑器内容转换为HTML

转换介绍

说明 : 此功能为旧版本，仅为老用户保留，新的转换源码（ php 和 go 语言）请加入 GraceUI 付费用户群获取。
此页面以 php 为例 [ 其他后端语言原理类似 ]，演示了如何将 GraceUI 编辑器产生的项目转换为 html 内容，最终保存至数据库内；
项目实际使用流程 :
02.1 前端提交内容 : 前端编辑器产生内容项目 > 转换为 Json 格式发送给后端 api > 后端将其转换为 html 保存至数据库 ( 可以直接赋值给 ueditor 编辑器进行编辑 ) ; 02.2 后端提交内容后端使用编辑器 ( 如 : ueditor ) 生成内容 > 使用我们提供的解析器 ( http://www.graceui.com/v5/info/10101-100.html ) 解析给前端进行内容展示；

php 版本演示代码

5.0内容渲染组件

组件介绍

gui-content-render [ 内容解析组件 ] 功能包括 : 1、解析 GraceUI 编辑器产生的内容; 2、经过转换( 我们提供 php 和 go 语言版本的转换代码 ) 可以适配各类网页编辑器，如：UEditor 生成的 html 内容; 3、提供图片预览功能、样式更好看，基于原生组件渲染，效率更高;

组件名称

gui-content-render : GraceUI 组件目录/gui-content-render.vue

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	文章详情数据，数组格式
itemMargin	String	20rpx	项目直接的间距
padding	Number	30	文章详情整体左右间距
textClass	Array	[‘gui-article-text’, ‘gui-primary-text’]	文本样式
centerClass	Array	[‘gui-article-center’, ‘gui-primary-text’]	居中样式
imgRadius	String	6rpx	图片圆角
quoteClass	Array	[‘gui-article-quote’, ‘gui-primary-text’, ‘gui-bg-gray’, ‘gui-dark-bg-level-2’]	引用样式
strongClass	Array	[‘gui-article-strong’, ‘gui-primary-text’]	加粗样式
splineClass	Array	[‘gui-article-spline’, ‘gui-color-gray’]	分割线样式

为什么使用此组件

1、富文本 : 不支持格式较多、不够稳定、不支持图片点击事件; 2、webview : 交互困难，页面无法使用其他组件，效率较低、效果不好; 3、本组件基于原生组件渲染，效率更高。

项目数据结构

[{“type”:“txt”,“content”:““},……]

支持的类型

p - 普通文本
center - 居中
img - 图片
blockquote - 引用
pre - 代码块
strong - 加粗
a - 链接
hr - 分隔线 [ 编辑器对应 hr 标签 ] h1 ~ h6 video 视频

转换思路

我们提供了 php 和 go 语言版本的完整的配套后端源码，请在GraceUI 付费用户群内下载 ~

演示代码

UNI 普通版本

文章详情

此组件已废弃，仅为老用户保留，新版本组件请移步手册左侧内容渲染组件。

组件介绍

gui-article-info [ 文章内容解析组件 ] 功能包括 : 1、解析 GraceUI 编辑器产生的内容; 2、经过转换( 我们提供 php 版本的转换代码 ) 可以适配百度 UEditor 生成的 html 内容; 3、提供图片预览功能、样式更好看;

组件名称

gui-article-info : /graceUI/组件目录/gui-article-info

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
article	Array	[]	文章详情数据，数组格式
itemMargin	String	20rpx	项目直接的间距
padding	Number	30	文章详情整体左右间距
textStyle	String	line-height:50rpx; font-size:28rpx; color:#2B2E3D;	文本样式
centerStyle	String	line-height:50rpx; font-size:28rpx; color:#2B2E3D;	居中样式
imgRadius	String	6rpx	图片圆角
quoteStyle	String	line-height:44rpx; font-size:28rpx; color:#2B2E3D; padding:20rpx; background-color:#F8F8F8;	引用样式
strongStyle	String	line-height:50rpx; font-size:28rpx; color:#2B2E3D;	加粗样式
splineStyle	String	line-height:50rpx; font-size:30rpx; color:rgba(69, 90, 100, 0.6);	分割线样式

为什么使用此组件

1、富文本 : 不支持格式较多、不够稳定、不支持图片点击事件; 2、webview : 交互困难，页面无法使用其他组件; 3、效率较低、效果不好!

项目数据结构

[{“type”:“txt”,“content”:““},……]

支持的类型

txt - 普通文本
center - 居中
img - 图片
quote - 引用
pre - 代码块
strong - 加粗
link - 链接
spline - 分隔线 [ 编辑器对应 hr 标签 ] h1 ~ h6 2021.07.12 新增 video 2021.10.08 新增

转换思路

我们提供了 php 版本的基于“百度 UEditor“ 生成内容的转换代码，请在GraceUI 付费用户群内下载 ~

演示代码

UNI 普通版本

富文本

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔ 效果不好

一些问题

因 uni-app 提供的 rich-text 组件底层存在一下缺点 :
兼容性较差, nvue 端存在问题较多；
对于编辑器生成的 html 解析效率不高，复杂 dom 解析效果不好；

解决建议

使用 GraceUI 提供的编辑器及解析器完成文章相关工作；通过 uni-app 插件市场发现更多更好用的富文本插件，网址 :
https://ext.dcloud.net.cn/search?q=parse

演示代码

UNI 普通版本

展开阅读

组件名称

gui-spread : /graceUI/组件目录/gui-spread

功能描述

可配置限制高度，组件自动完成点击展开功能;

组件属性

属性名称	类型	默认值	作用
width [ 20200511 新增 ]	String	690rpx	内容区域宽度
height	String	600rpx	内容未展开前高度
btnTxt	String	展开阅读全文	按钮文本
btnColor	String	#999999	按钮文本颜色
btnTxtSize	String	28rpx	按钮文本大小
zIndex	Number	1	按钮组件层级
isShrink	Boolean	false	是否展示收缩按钮
shrinkBtnTxt	String	收缩展示	收缩按钮文本

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

评论布局

布局介绍

GaceUI 为您提供了评论列表样式，您可以通过基础样式组合出多种模式的评论列表效果;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

样式说明

演示代码

UNI 普通版本

评论提交

组件介绍

底部弹出形式的评论提交组件，包含 at、内容、图片信息;

组件名称

gui-submit-comment : /graceUI/组件目录/gui-submit-comment

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
placeholder	String	rgba	placeholder 提示文本
isImg	Boolean	true	是否带有图片选择功能
atColor	String	#008AFF	@ 文本颜色
submitColor	String	#008AFF	提交按钮颜色
removeBtnColor	String	#FF0036	图片移除按钮颜色
zIndex 2021.06.11 新增	Number	999	组件 z-index 值

重要说明

组件方法

组件事件

演示代码

UNI 普通版本

文章分享

布局介绍

利用弹出层组件 + 宫格布局完成布局。 H5 端预览 : 请下载源码内的图片，部署到自己的服务，然后替换自己的图片地址；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

布局代码

UNI 普通版本

音乐播放器

组件名称

gui-audio-player : /graceUI/组件目录/gui-audio-player

功能介绍

基于背景音乐api封装的音乐播放器，提供音乐播放、暂停、进度展示、进度选择、列表播放、单曲循环等常用的音乐播放功能；请使用真机调试体验效果~

兼容平台

H5	APP	小程序	NVUE
不支持	✔	✔	不支持

组件属性

属性名称	类型	默认值	作用
color	String	#FFFFFF	音乐标题颜色
list	Array	[]	音乐列表数据，格式请参考演示代码
listBg	String	#292E35	音乐列表背景颜色
listHeight	String	880rpx	音乐列表高度
autoplay 2021.05.21 增	Boolesn	true	是否自动播放

兼容性说明

因 H5 端不支持背景音乐 api，故本组件不支持 h5 端;因 nvue 端不支持音乐文件长度获取，故本组件暂不发布 weex 版本（ weex 项目请使用 .vue 完成此功能）;

权限说明

请仔细阅读权限相关要求，被在对应平台完成配置工作 :
uni-app 资料 https://uniapp.dcloud.io/api/media/background-audio-manager?id=getbackgroundaudiomanager
微信小程序资料 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#requiredBackgroundModes

微信小程序权限添加示例

扩展说明

播放器组件涉及的样式较多，且不同项目要求不一样，我们无法把他们都封装为属性。所以我们为您提供了完善的基础功能，我们建议您自己根据项目要求对组件进行二次开发! 开发流程 : 01 复制 gui-audio-player 组件文件 > 02 改成自己的文件 > 03 改进组件 > 04 调用自己修改过的组件;

演示代码

UNI 普通版本

视频播放

演示介绍

本页面以课程为例，展示了视频组件的用法，包含以下功能 : 1 课程描述与课程目录切换;
2 点击视频列表实现视频的切换与播放;
3 切换播放章节时对应更新头部标题信息;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

地图标注

重要说明

此页文档仅用于演示地图组件的某个用法，因为 uni-app 官方 map 组件要求较多，不同平台配置不同，请详细阅读 uni-app 官方手册 map 组件部分（尤其是注意事项部分）。手册地址 : https://uniapp.dcloud.io/component/map
经纬度必须为小数，建议使用 parseFloat() 函数转换一下动态纬度数据；

坐标拾取

坐标拾取工具 ( 可以手动获取某个地点的坐标 )
https://lbs.qq.com/tool/getpoint/index.html
利用后端语言开发一套 api 动态获取一个具体位置的坐标，后端代码 php 版本请在 GraceUI 已付费用户群群文件获取。

定位图标

请 GraceUI 已付费用户群群文件下载定位图标并将其部署到 /static/ 目录下, /static/location.png

示例说明

示例代码演示了搜索一个具体位置并在地图上进行标注；示例代码演示了点击标注点后使用第三方导航的功能；示例代码小程序端运行时请 “打开调试”;演示获取当前位置信息方法；演示详细位置到坐标的转换；演示根据精度纬度获取详细地址；需要打包生效 ( 建议使用 vue 完成地图功能页面 )；

微信小程序权限配置演示

完整代码

UNI 普通版本

地图周边

重要说明

此页文档仅用于演示地图组件的某个用法，因为 uni-app 官方 map 组件要求较多，不同平台配置不同，请详细阅读 uni-app 官方手册 map 组件部分（尤其是注意事项部分）。手册地址 : https://uniapp.dcloud.io/component/map 经纬度必须为小数，建议使用 parseFloat() 函数转换一下动态纬度数据；

功能介绍

获取当前位置；根据当前位置获取周边 1000 米内的兴趣位置信息；
注意 : nvue 模式需要打包生效，建议使用 vue 完成地图功能页面；

定位图标

请 GraceUI 已付费用户群群文件下载定位图标并将其部署到 /static/ 目录下, /static/location.png。

后端源码

本示例使用腾讯地图 api 获取周边信息，相关后端 php 文件请在 GraceUI 付费用户群内下载 (:

完整代码

UNI 普通版本

拖拽定位

重要说明

此页文档仅用于演示地图组件的某个用法，因为 uni-app 官方 map 组件要求较多，不同平台配置不同，请详细阅读 uni-app 官方手册 map 组件部分（尤其是注意事项部分）。手册地址 : https://uniapp.dcloud.io/component/map 经纬度必须为小数，建议使用 parseFloat() 函数转换一下动态纬度数据；

示例说明

利用地图组件的 controls 属性在地图中心摆放一个图标；利用 regionchange 事件获取地图中心点坐标；

完整代码

UNI 普通版本

用户隐私协议界面模板

组件介绍

利用 gui-modal 组件实现的用户隐私协议界面模板，涵盖动态高度计算、协议签订记录逻辑演示代码。

协议内容模板推荐

个推 - APP隐私政策模板 : https://docs.getui.com/templet/

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

会员登录

模板介绍

会员登录布局模板，基于用户名 + 密码。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

用户登录界面

模板介绍

会员登录布局模板，基于手机号 + 密码，带有国家号码前缀，使用提交按钮组件。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

短信登录模板

模板介绍

手机短信验证形式的会员登录模板，含有验证短信发送及倒计时功能。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

短信验证

页面介绍

GraceUI 短信验证

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

个人中心

模板介绍

个人中心模板基于 GraceUI list 组件及横向公告组件的组合，您可以在其基础上根据项目需要进行扩展。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

模板代码

UNI 普通版本

GraceUI5.0手册 (3)

Sun, 19 Apr 2026 00:00:00 GMT

列表布局

样式介绍

为了列表布局更灵活、更高效，我们没有将其封装为组件而是提供了列表布局样式，这样您可以在开发过程中更便捷地组合出符合您项目要求的列表。

列表结构

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

滑动列表

组件介绍

滑动展开功能按钮的列表组件（此组件最近一次更新时间 : 2021年8月24日14:50 , 请保证框架版本）。

组件名称

gui-slide-list : /graceUI/组件目录/gui-slide-list

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	750	组件宽度，单位 rpx
msgs	Array	[]	消息数组, 格式见演示代码
btnWidth	Number	160	操作按钮总宽度, 内部按钮自动平分此宽度

组件事件

@scrolltolower 滚动区域触底时触发，用于实现加载更多.

皮肤样式

注意事项

演示代码

UNI 普通版本

可选列表

组件介绍

可选列表可以配置单选、多选，能够配置图标，可以灵活地应用于开发过程中的选择场景。

组件名称

gui-select-list : /graceUI/组件目录/gui-select-list

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	选项数组，格式见演示代码
type	String	’’	radio 单选, checkbox 多选
checkedType	String	right	right - 右侧对钩形式 [ 适合单选 ]，ring - 左侧圆环形式 [ 适合多选 ]
isBorder	Boolean	true	是否展示下边框
borderColor	String	#F6F6F6	边框线条颜色
maxSize	Number	0	多选时最多选择数，0 代表不限制

组件事件

@change : 选中项改变时触发，携带数据已选择数据索引值（多选时为一个索引数组）。

皮肤样式

组件函数

getSelectedIndex 2021-03-01 新增 : 获取组件内部数据中已选中数据的索引，返回数组形式的索引数据，默认为 []，也可以使用返回值长度判断选中数据数量；

演示代码

UNI 普通版本

默认值设置技巧

有些情况下，我们希望组件在页面展示是组件重置选择效果，您可以效仿下面的代码 :

全选列表

布局介绍

使用 gui-select-list 组件为基础实现全选、取消全选、删除数据等功能；请根据项目实际需求进行二次开发，来实现符合您项目需要的全选列表；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

布局代码

UNI 普通版本

树状列表

组件名称

gui-tree : /graceUI/组件目录/gui-tree

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
trees	Array	[]	组件列表信息数据
indent	Number	28	每个层级的缩进距离，单位rpx
type	String	text	组件类型, text : 文本展示 , radio : 单选形式, checkbox : 复选形式
isIcon	Boolean	true	文本形式时是否展示横线图标
checkedId	[String, Number]	-1	单选默认选中 id
checkedIds	Array	[]	复选选中的 id 集合
allCanCheck	Boolean	true	是否全部选项都可以点击选择，如果设置false则只有子集才能选择
isFold	Boolean	true	文本模式下是否开启收缩/展开功能 [ 2020.07.27 新增 ]

组件事件

taped
携带数据 : 被点击选项的索引关系，利用它完成 : 1.1 文本形式 : 获取点击数据 1.2 选择形式 : 获取点击数据更新选中 id

演示说明

演示代码为您封装好了选项获取相关的函数，可以方便地获取选中信息，同时也是非常不错的递归函数学习资料（:演示代码实现了多种模式的切换，您在应用时选择一种即可，代码会简化很多;文本形式下点击项目前面的图标进行层级收缩及展示；

皮肤样式

演示代码

UNI 普通版本

竖向拖拽排序

竖向拖动排序介绍

封装为组件在使用时反而不灵活，所以使用页面布局实现;利用手指事件完成拖拽及拖拽完成后的数据排序功能;因 weex 底层原因暂不支持，请使用 vue 页面完成此功能;

核心事件

onLoad : 模拟 api 请求，并补全数据属性longtap : 长按后才能进行拖拽thStart : 手指滑动开始thMove : 手指滑动thEnd : 拖拽完成对数据进行重新排序

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	×

演示代码

卡片列表

组件介绍

GraceUI 以样式形式提供了卡片列表布局，因为卡片列表布局在实际项目中变化较多，样式方式更灵活，请您看一下相关样式说明，应用时可以在页面上复写相关样式，达到修改的目的。

样式说明

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

布局结构

演示代码

UNI 普通版本

名片卡片

布局介绍

考虑实际开发场景，使用布局实现更方便修改，所以没有进行组件封装；

布局结构

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

注意事项

演示代码

UNI 普通版本

切换导航

组件介绍

gui-switch-navigation 切换导航组件可以快速帮您实现多种形式的分类、状态导航，是一个非常常用、好用的组件;

组件名称

gui-switch-navigation : /graceUI/components/gui-switch-navigation

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx，默认 690 rpx
isCenter	Boolean	false	是否居中布局
currentIndex	Number	0	激活项目的索引
size	Number	120	宽度单位 rpx，为 0 时代表自适应内容宽度
items	Array	[]	导航项目数组形式 : [{id:0, name:‘名称1’},{id:1, name:‘名称2’, …} ]
activeLineBg	String	linear-gradient(to right, #66BFFF,#3388FF)	激活条颜色
activeColor	String	#333333	激活文本颜色
activeLineHeight	String	6rpx	激活条高度
activeLineWidth	String	36rpx	激活条宽度
activeDirection	String	ㅤ	激活条横向对齐模式，默认左 center:居中，flex-end:右
activeFontWeight	Number	700	激活文本加粗属性 : 700 / 900 代表加粗 400 代表普通
color	String	#333333	导航文本颜色
margin	Number	0	右侧间距单位 rpx
textAlign	String	left	文本布局方式
lineHeight	String	50rpx	文本行高
fontSize	String	28rpx	文本大小
activeFontSize	String	28rpx	激活项目文本大小
padding	String	0rpx	横向内间距
activeLineRadius	String	0rpx	激活条圆角尺寸
animatie	Boolean	true	切换时使用使用动画 [ nvue 暂不支持动画效果 ]
scorllAnimation	Boolean	true	是否产生滚动动画
tipsStyle	String	vue background-color:#FF0000; padding:0 10rpx; color:#FFFFFF; font-size:22rpx nvue background-color:#FF0000; padding-left:10rpx; padding-right:10rpx; color:#FFFFFF; font-size:22rpx	提示信息样式，如需修改请使用条件编译兼容 nvue

组件事件

@change=“” 点击导航进行切换时会激活 change 事件，并传递对应的索引值;

导航数据格式

组件说明

1 :size=“0” 代表自适应内容宽度，选中项目基于 scroll-into-view 属性实现展示位置切换动画（无法居中）。 2 后端 api 数据格式不匹配是请转换数据格式，参考： https://www.graceui.com/v5/info/10154-0.html

演示代码

UNI 普通版本

切换导航·多行模式

组件介绍

gui-switch-navigation2 多行切换导航组件可以快速帮您实现多种形式的分类、状态导航，是一个非常常用、好用的组件;

组件名称

gui-switch-navigation2 : /graceUI/组件目录/gui-switch-navigation2

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx
isCenter	Boolean	false	项目整体居中
currentIndex	Number	0	选中项目索引
size	Number	138	选项宽度，单位 rpx
fontSize	String	28rpx	文本尺寸
activeFontSize	String	28rpx	激活后文本尺寸
lineHeight	Number	52	导航标题行高，单位 rpx
fontSizeSmall	String	22rpx	描述文本尺寸
lineHeightSamll	Number	28rpx	描述文本行高
items	Array	[]	导航选项数组，格式: [{title:‘’, desc:’’},……]
color	String	#333333	导航文本默认颜色
descColor	String	#999999	描述文本默认颜色
activeColor	String	#3688FF	激活文本颜色
scorllAnimation	Boolean	true	是否产生滚动动画

演示代码

UNI 普通版本

、

局部选项卡

布局介绍

局部选项卡使用 gui-switch-navigation 组件 + swiper 组件实现;局部选项卡应该固定高度来避免选项切换引起的页面抖动（:通过 gui-switch-navigation 组件的属性可以修改选项卡标签，手册地址 : https://www.graceui.com/v5/info/10029-50.html

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

全屏选项卡

布局介绍

全屏选项卡经常被应用在项目的入口页面，一般使用切换导航+轮播组件实现，GraceUI 为您提供了基础布局，请掌握布局原理，然后灵活运用。

实现步骤

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

分段器组件

组件介绍

gui-segmented-control 分段切换组件适用于分类切换、状态切换等场景，可以对数据进行筛选，也可以配合轮播组件使用达到滑动切换的目的，您也可以把它当成 switch 组件来使用哦 ~

组件名称

gui-segmented-control : /graceUI/组件目录/gui-segmented-control

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	切换项目数据, 格式 : [‘项目1’,‘项目2’,……]
current	Number	0	当前选择项目的索引
borderRadius	String	6rpx	组件圆角设置

皮肤样式

演示代码

UNI 普通版本

折叠面板

布局介绍

折叠面板可以用于动态展示类似结构的某个项目，可以展示更多的列表信息。因封装组件反而不灵活，所以以样式形式实现。

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

竖向切换

布局介绍

竖向区域切换布局实现了点击切换导航跳转到页面具体位置的功能，同时当页面滚动时会自动识别对应的切换导航。

布局原理

1 uni-app vue 版本 1.1 页面核心元素布局使用包裹; 1.2 当页面滚动时根据的 top 值获取应该激活的切换导航; 1.3 当点击切换导航时计算的高度决定页面滚动位置;
2 基于 weex 的 2.1 nvue 无法控制页面滚动条，使用页面主体使用 list 及 cell 布局; 2.2 页面核心元素布局使用包裹; 1.2 当页面滚动时根据的 top 值获取应该激活的切换导航; 1.3 当点击切换导航时根据的索引滚动到对应位置;

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

分类切换

布局介绍

1、点击分类切换到对应商品; 2、右侧产品列表滑动自动切换左侧对应分类; 3、搜索商品关键字并展示; 4、建议使用场景商品量不大的外卖、点餐、无人商店等应用；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

完整代码

UNI 普通版本

滚动区域

样式介绍

滚动区域为原生组件，但使用时需要一些样式支持，GraceUI 提供基础样式，为您的使用提供便利 :
横向滚动 : 使用 .gui-scroll-x 及 .gui-scroll-x-items 修饰滚动区域及滚动项目;
竖向滚动 : 规划滚动区域及滚动项目的高度即可;
宽度、高度属性请跟据项目需求在样式中重写，详见演示代码;
scroll-view 组件手册 : https://uniapp.dcloud.io/component/scroll-view

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

进度横向滚动

组件介绍

基于滚动区域组件封装的带有滚动进度条的横向滚动组件。

组件名称

gui-progress-scrollview : /graceUI/组件目录/gui-progress-scrollview

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	700	组件宽度
progressWidth	Number	200	进度条宽度，值为 0 时关闭进度块展示
progressHeight	Number	10	进度条高度
progressRadius	Number	10	进度条圆角尺寸
progressBG	String	#D1D1D1	进度条背景色
progressBarWidth	Number	60	进度块宽度
progressBarBG	String	#008AFF	进度块背景色
progressPosition	String	start	进度块位置，默认 start : 左侧、center : 居中、end : 右侧

组件事件

scrolling : 滚动区域滚动时触发，携带参数 : 滚地区宽度, 滚动位置, 进度值 0 - 100；scrolltolower : 滚动区域滚动到最右侧触发；scrolltoupper : 滚动区域滚动到最左侧触发；

演示代码

UNI 普通版本

滚动公告

组件介绍

gui-speaker 滚动公告组件，以 swiper 组件为基础，可以用于展示多条公告的动画切换。

组件名称

gui-speaker : /graceUI/组件目录/gui-speaker

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
items	Array	[]	公告项目数据，格式 : { title: “标题”, url: “../跳转路径”, opentype: “页面打开方式”} 跳转功能使用 navigator 实现，手册 : https://uniapp.dcloud.io/component/navigator
current	Number	0	默认展示的选项
vertical	Boolean	false	是否竖向切换
interval	Number	5000	切换间隔时间
styles	String	overflow:hidden; height:60rpx; line-height:60rpx; font-size:28rpx;	核心区域样式，请通过属性来修改

演示代码

UNI 普通版本

无缝滚动

组件介绍

无缝滚动适合一条较长的文本公告滚动展示的场景，使用 css 动画完成滚动效果。组件提供了插槽，滚动内容及样式可以自定义。nvue 平台使用 BindingX 实现滚动动画；

组件名称

gui-scroll-message : /graceUI/组件目录/gui-scroll-message

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
speed nvue 专有属性	Number	12	滚动过程时间，单位秒，数值越大滚动越慢
distance nvue 专有属性 2021.03.23 新增	Number	800	滚动距离，请跟据内容长度进行调整

演示代码

UNI 普通版本

无缝滚动·卡片模式

组件介绍

横向无缝滚动，实现了循环滚动，内部为一个图片+一个遮罩形式的标题；如果组件本身数据格式或者布局不能满足您的项目需要，您可以复制一个自己命名为自己的，对复制的自己进行进一步修改，并使用；

组件名称

gui-scrollitems : /graceUI/组件目录/gui-scrollitems

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	690	组件宽度，单位 rpx
itemWidth	Number	345	项目宽度，单位 rpx
itemHeight	Number	200	项目高度，单位 rpx
itemMargin	Number	10	项目右侧间距，单位 rpx
items	Array	[]	项目数据，格式见演示代码
duration	Number	25	滚动事件，数组越小滚动越快

组件事件

itemTap : 滚动项目被点击时触发，携带数据 : 完整的被点击项目数据{对象形式}；

演示代码

UNI 普通版本

竖向滚动公告

组件介绍

GraceUI 竖向滚动公告组件实现了竖向消息循环展示功能，能够识别用户滚动行为实现合理的滚动机制、能够动态添加消息；

组件名称

gui-scrollitems-y : /graceUI/组件目录/gui-scrollitems-y

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
height	String	480rpx	滚动区域高度
imgStyle	String	width:88rpx; height:88rpx; border-radius:6rpx; margin-top:5rpx; margin-right:28rpx;’	左侧图片样式
textStyle	String	font-size:28rpx; color:#2B2E3D; line-height:38rpx;	右侧文本样式
msgWidth	String	570rpx	右侧文本区域宽度 ( 等于外层宽度 - 图片宽度 - 30rpx )
duration	Number	6000	消息切换间隔时间
items	Array	[]	消息数组，格式见演示代码，

组件方法

addItem : 添加消息对象 , 格式见演示代码；

演示代码

UNI 普通版本

轮播组件

组件名称

gui-swiper : /graceUI/组件目录/gui-swiper

重要说明

01 组件宽度高度算法 ( 所有轮播图的宽高比应该是一样的哦 ) 组件宽度 = 外层元素宽度如 700rpx 组件高度 = 轮播图高度 / 轮播图宽度 * 组件宽度，如轮播图片为 500 px * 225 px, 那么 : 组件高度 = 225 / 500 * 700 = 315 rpx
02 请参考演示代码利用属性配置出各种形式的轮播组件;

组件属性

属性名称	类型	默认值	作用
width	Number	750	组件宽度，单位 rpx
height	Number	300	组件高度，单位 rpx
swiperItems	Array	[]	轮播项目数组，格式见演示代码
borderRadius	String	10rpx	图片圆角尺寸
indicatorBarHeight	Number	68	进度圆点或标题文本高度，单位 rpx
indicatorBarBgColor	String	rgba(0,0,0,0)	进度圆点或标题文本背景颜色
indicatorWidth	Number	18	进度圆点宽度，单位 rpx
indicatorActiveWidth	Number	18	进度圆点激活后宽度，单位 rpx
indicatorHeight	Number	18	进度圆点高度，单位 rpx
indicatorRadius	Number	18	进度圆点圆角尺寸，单位 rpx
indicatorColor	String	rgba(255, 255, 255, 0.6)	进度圆点默认颜色
indicatorActiveColor	String	#3688FF	进度圆点激活后颜色
indicatorType	String	dot	none : 不展示圆点, dot : 可修饰的圆点, number : 数值+文本形式
indicatorPosition	String	absolute	圆点定位方式,赋值 relative 可以实现圆点在轮播图片下方
indicatorDirection	String	center	圆点点横向对齐方式，默认 center 居中, flex-start 左对齐, flex-end 右对齐
spacing	Number	50	轮播项目间距 [ nvue 不支持 ]
padding	Number	26	非激活项目的缩小间距 [ nvue 不支持 ]
interval	Number	5000	自动轮播间隔时间
autoplay	Boolean	true	是否自动播放
currentIndex	Number	0	当前激活项目索引
opacity	Number	0.66	非激活项目透明度
titleColor	String	#FFFFFF	标题文本颜色
titleSize	String	28rpx	标题文本大小
imgMode 2022.02.23 新增	String	widthFix	内部图片组件的图片裁剪、缩放的模式

组件事件

@swiperchange
轮播选项切换时触发，携带参数 : 当前轮播项目的索引值。
02 @taped 当选项数据的 opentype 为 click 时，用户点击选项触发并携带当前点击选项的索引值;

演示代码

UNI 普通版本

滚动主体布局

布局介绍

利用定位 + 滚动区域布局，滚动区域与页面滚动相结合的一种主体滚动布局效果；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

全屏Loading

组件介绍

GraceUI 全屏 Loading 组件可以遮住页面，并在居中位置展示 Loading 动画，您可以在各类加载场景使用它。gui-page 页面组件内置了此组件，可以利用 page 组件的 isLoading 属性控制动画展示|关闭。nvue 端使用 BindingX 实现 Loading 动画。

组件名称

gui-page-loading : /graceUI/组件目录/gui-page-loading

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件方法

样式修改

您可以通过修改皮肤样式来修改 gui-page-loading 组件的遮罩背景及动画圆点样式：
/* 全屏 Loading 背景颜色 */
.gui-page-loading-bg{background-color:rgba(255,255,255,0.88);}
/* 圆点颜色 */
.gui-page-loading-color{background-color:#2B2E3D;}

演示代码

UNI 普通版本

下拉刷新·基于页面组件

组件名称

gui-refresh : /graceUI/组件目录/gui-refresh

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
refreshText	Array	[‘继续下拉刷新’,‘松开手指开始刷新’,‘数据刷新中’,‘数据已刷新’]	刷新过程中展示的文本
refreshBgColor	Array	[‘#FFFFFF’,‘#FFFFFF’,‘#FFFFFF’,‘#63D2BC’]	刷新过程中组件的背景颜色
refreshColor	Array	[‘rgba(69, 90, 100, 0.6)’,‘rgba(69, 90, 100, 0.6)’,‘#63D2BC’,‘#FFFFFF’]	刷新过程中组件的文本颜色
refreshFontSize	String	26rpx	组件文本尺寸

事件绑定

使用 gui-refresh 组件 + 滚动区域（自动铺满屏幕）实现下拉刷新时，需要将滚动区域的手指事件传递给 gui-refresh 组件，touchstart() 参数 : 滚动区域 touchstart 事件的返回数据;touchmove() 参数 : 滚动区域 touchmove 事件的返回数据;touchend() 参数 : 滚动区域 touchend 事件的返回数据;
以上数据使用 gui-page 组件来实现刷新时组件已经自动处理，自定义模式请请参考自定义模式代码；

组件函数

endload : 用于停止组件的加载动画并关闭加载组件；

组件事件

reload : 组件展示加载时触发，可以触发事件时完成刷新业务逻辑；

注意事项

利用 gui-page 组件实现下拉刷新，属性全部添加到 gui-page 组件上；gui-page 组件添加 :refresh=“true” 属性开启下拉刷新；gui-page 组件添加 @reload=“reload” 事件监听、实现下拉刷新数据刷新逻辑；gui-page 组件添加 @scroll=“bodyScroll” 可以监听滚动区域滚动事件及滚动值；

演示代码

UNI 普通版本

基于页面组件的加载更多

组件名称

gui-loadmore : /graceUI/组件目录/gui-loadmore

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
loadMoreText	Array	[’‘,’更多数据加载中’, ‘已加载全部数据’,‘暂无数据’]	加载过程中展示的文本
loadMoreColor	Array	[‘rgba(69, 90, 100, 0.6)’, ‘rgba(69, 90, 100, 0.6)’, ‘rgba(69, 90, 100, 0.8)’, ‘rgba(69, 90, 100, 0.6)’]	加载过程中组件的文本颜色
loadMoreFontSize	String	26rpx	组件文本尺寸
status 2021.02.20 新增	Number	0	初始化加载状态 0 准备加载 1 加载中 2 加载到底 3 为空展示

组件方法

loading() 开启加载动画，用于加载过程；stoploadmore() 停止加载动画，准备下一次加载；nomore() 加载到底，不能进行下一次加载；empty() 第一次加载数据为空，不能进行下一次加载；hide() 关闭组件；

组件事件

@tapme : 组件被点击时触发给父级；

注意事项

利用 gui-page 组件实现加载更多，属性全部添加到 gui-page 组件上;gui-page 组件添加 :loadmore=“true” 属性开启加载更多;gui-page 组件添加 @loadmorefun=“getdata” 事件监听、实现数据加载逻辑;

演示代码

UNI 普通版本

基于页面组件的刷新加载

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

自定义模式刷新加载

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

原生模式的刷新加载

演示介绍

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

细节提示

完整代码

UNI 普通版本

弹层组件

组件介绍

gui-popup 组件可以实现在页面的中间、顶部、底部、左侧、右侧以动画形式展示一个弹层。

组件名称

gui-popup : /graceUI/组件目录/gui-popup

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	String	580rpx	核心区域宽度( 居中、左、右有效 )
bgColor	String	rgba(0, 0, 0, 0.7)	遮罩层背景颜色
position	String	center	核心区域位置，center：居中、top：顶部、 bottom：底部、left：左侧、right：右侧
canCloseByShade	Boolean	true	点击遮罩层是否关闭组件
zIndex	Number	99999	组件 z-index 值
top	Number	0	组件 top 值，单位 px
duration 2021.10.19 新增	Number	280	组件动画时长

组件方法

open : 展示组件；close : 关闭组件；

组件事件

@open : 组件展示时触发；@close : 组件关闭时触发；

演示代码

UNI 普通版本

头部消息框

组件介绍

GraceUI 头部消息框组件可以用于操作过程提示，您可以通过插槽实现各种自定义形式的消息框；

组件名称

gui-top-message : /graceUI/组件目录/gui-top-message

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
duration	Number	2000	消息展示时间，单位毫秒
customNav 2021.04.23 新增	Boolean	false	调用组件的页面是否使用自定义头部导航

演示代码

UNI 普通版本

模态对话框

组件名称

gui-modal : /graceUI/组件目录/gui-modal

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	String	580rpx	组件宽度
bodyStyle	String	background-color:#FFFFFF; border-radius:6rpx;	消息框主体样式
isCloseBtn	Boolean	true	是否展示关闭按钮
closeBtnStyle	String	color:#2B2E3D; font-size:28rpx;	关闭按钮样式
isTitle	Boolean	true	是否展示标题
title	String	’’	标题文本
titleStyle	String	line-height:100rpx; font-size:28rpx; font-weight:700; color:#2B2E3D;	标题样式
canCloseByShade	Boolean	true	点击遮罩层能否关闭组件
zIndex 2021.08.24 新增	Number	99	弹出层 z-index 值

组件方法

open() 打开对话框close() 关闭对话框

组件事件

@open 打开对话框时触发 2021.08.10 新增@close 关闭对话框时触发 2021.08.10 新增

演示代码

UNI 普通版本

操作表组件

组件介绍

gui-action-sheet 组件类似 uni.showActionSheet，uni.showActionSheet 对操作项目有限制，可以使用 gui-action-sheet 组件更灵活实现底部操作列表功能。

组件名称

gui-action-sheet : /graceUI/组件目录/gui-action-sheet

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
width	Number	680	核心菜单区域宽度
height	Number	500	选项列表滚动区域高度
borderRadius	String	10rpx	核心菜单圆角尺寸
zIndex	Number	99	组件 z-index 值
title	String	’’	组件标题
titleColor	String	#2B2E3D	组件标题颜色
items	Array	[]	选择列表数据
listColor	String	#008AFF	选择列表本文颜色
listLineHeight	String	95rpx	选择项目列表行高
listFontSize	String	28rpx	选择项目列表文本大小
cancelBtnName	String	取消	取消按钮文本
cancelBtnColor	String	#rgba(69, 90, 100, 0.6)	取消按钮颜色
isCancelBtn	Boolean	true	是否展示取消按钮
canCloseByShade	Boolean	false	点击遮罩层能否关闭组件

演示代码

UNI 普通版本

右侧菜单组件

组件介绍

固定在页面右下角的动态展开菜单，利用插槽实现菜单布局，可以灵活地实现符合项目需要的布局；

组件名称

gui-right-menus : /graceUI/组件目录/gui-right-menus.vue

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔ [ 无动画 ]

组件属性

属性名称	类型	默认值	作用
styles	String	right:20rpx;bottom:200rpx;z-index:999;width:100rpx;	组件主体样式，可以更根据项目要求灵活设置

组件插槽

menus-more : 功能按钮插槽，默认隐藏，点击主插槽展示； menus-primary : 核心按钮插槽，点击打开功能按钮插槽；说明 : 如果不需要动态展示隐藏功能插槽（按钮默认展示），可以不实现 menus-more ，把点击元素全部放进 menus-primary 插槽，加上点击事件 ( @tap=点击事件) 即可；

演示代码

UNI 普通版本

弹出菜单

组件名称

gui-popup-menu : /graceUI/组件目录/gui-popup-menu

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

平台差异

nvue 使用是需要动态计算菜单按钮的定位值，方法见演示代码；nvue 平台请在页面最后放置弹出层元素或组件；

组件属性

属性名称	类型	默认值	作用
menuWidth	String	258rpx	菜单宽度
background	String	rgba(0,0,0, 0.3)	遮罩层背景色( 非 nvue 平台有效 )
zIndex	Number	99	组件 z-index 值 ( 非 nvue 平台有效 )
isArrow	Boolean	true	是否展示箭头 ( 非 nvue 平台有效 )
arrowDirection	String	right	箭头位置 [ left - 左, center - 居中, right - 右 ] ( 非 nvue 平台有效 )
arrowMargin	String	0 15rpx	箭头间距 ( 非 nvue 平台有效 )

组件方法

open() 展示组件close() 关闭组件setTop(top) 设置组件 top 值，参数 top 值（nvue 平台使用）；setRight(right) 设置组件 right 值，参数 right 值（nvue 平台使用）；

演示代码

UNI 普通版本

表单元素

组件介绍

我们给您提供了基础的表单布局（横向、竖向），底层使用原生的表单元素使逻辑更加清楚、可控；

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

样式说明

演示代码

UNI 普通版本

提交按钮

组件介绍

提交按钮组件专为表单提交打造，组件本身提供了交互动画、成功提示、失败提示等数据提交相关的过程展示。提交按钮依然使用原生按钮为基础，但对原生按钮进行了隐藏，实现了多平台按钮样式统一的目标。

组件名称

gui-submit-button : /graceUI/组件目录/gui-submit-button

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

组件属性

属性名称	类型	默认值	作用
titleClass	String	gui-sbutton-text	按钮标题颜色名称
loaingPointClass	String	gui-sbutton-loading-point	按钮加载圆点样式名称
baseClass	String	gui-sbutton	按钮基础样式名称，用于规划尺寸圆角等基础样式
defaultClass	String	gui-sbutton-default	按钮默认样式
loadingClass	String	gui-sbutton-loading	按钮数据交互时加载样式
successClass	String	gui-sbutton-success	提交成功时按钮样式
failClass	String	gui-sbutton-fail	提交失败是按钮样式

样式说明

以上样式都保存在框架皮肤样式内，皮肤样式内同时还提供了修改按钮样式的演示，请按照要求部署皮肤和修改文件（请仔细观看群文件框架部署视频教程）。

组件插槽

按钮默认展示元素提交成功展示元素提交失败展示元素原生按钮原生（真正起到表单提交作用，但元素会被透明化）

演示代码

UNI 普通版本

表单验证

组件介绍

GraceUI 内置了表单验证工具，经过大量用户的使用和反馈已经非常成熟；注意事项此验证工具于 2021.12.23 大幅度更新，优化验证规则、添加更多验证方法，请下载新版本框架保证代码版本~

使用流程

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

验证规则

类型	功能	规则参数举例
string	字符串长度检查	如 : 5, 100
contain	必须包含指定的字符串	如 : grace
notContain	不能包含指定的字符串	如 : grace
inArray	必须是指定数组的元素	如 : [‘男’,‘女’]
notInArray	不能是指定数组的元素	如 : [1,2,3]
int	整数及长度检查	如 : 1, 8
intBetween	整数区间检查	如：100,999
between	数值区间检查 ( 小数或整数 )	如：-500, 22
doubleBetween	小数区间检查	如：1, 88
doubleLength	小数及小数位数检查	如：2,3
gt	大于某个数值	如：100
gtAndSame	大于等于某个数值	如：100
lt	小于某个数值	如：100
ltAndSame	小于等于某个数值	如：100
same	等于某个值	如：100 或 grace
notSame	不等于某个值	如：100
samewith	等于某个元素	数据键名称
email	邮件地址检查	无需参数
phone	手机号码检查	无需参数
url	url 地址检查	无需参数
zipcode	邮编检查	无需参数
idCard	身份证检查	无需参数
reg	正则表达检查	自定义正则表达式，如 ^

使用说明

演示代码

UNI 普通版本

字数控制

兼容平台

H5	APP	小程序	NVUE
✔	✔	✔	✔

演示代码

UNI 普通版本

清弦子@博客

固件库

核心心法：如何阅读手册中的寄存器表格？

STM32F1系列下的不同产品子系列

频率和秒的知识点

格式化输出符号

C语言常用转义字符

ANSI 终端控制码（彩色文本 + 格式控制）

（1）基础格式控制码

（2）前景 / 背景颜色对照表

（2.1）基础8色（所有终端通用）

（2.2）16 色（绝大多数串口助手支持，推荐使用）

（2.3）256 色（部分高级串口助手支持）

（2.4）24 位真彩色（仅专业终端支持）

（3）控制码格式与示例

存储器映像

STM32F103xx增强型模块框图（后续设置SYSCLK、AHB、APB1、APB2等都需要查看这幅图）

时钟树（后续设置SYSCLK、AHB、APB1、APB2等都需要查看这幅图）

单片机内部电路常见的四种模式

51单片机识别模式方式

双向模式

开漏模式

推挽模式

浮空模式

一、四种方法实现的LED闪灯程序文件分析

1.1 RCC_Configuration(void)

① 宏观目的

② 编写者视角🚀

③ RCC时钟是什么？为什么要从HSI设置为HSE+PLL？为什么需要外设时钟？

ErrorStatus HSEStartUpStatus

RCC_DeInit( )

毕设思路

JavaScript基础

一、JavaScript的内外部

1.1 内部JavaScript

1.2 外部JavaScript

二、JavaScript语法

三、JavaScript变量

3.1 变量声明

3.2 变量的命名规范

3.3 关键字和保留字

四、JavaScript基本数据类型

4.1 Undefined类型

4.2 Null类型

4.3 String类型

4.3.1 字符串长度

4.3.2 获取字符串中的单个字符

4.3.3 连接字符串

4.3.4 查找字符串是否存在

4.4 Number类型

4.4.1 科学计数法

4.4.2 八进制与十六进制数

4.4.3 浮点数

4.4.4 特殊Number值

4.4.5 NaN

4.4.6 关于Infinity 、-Infinity 、NaN三者的讨论

4.5 Boolean类型

五、涉及八进制和十六进制的知识补充

六、JavaScript运算符

七、JavaScript条件语句

八、JavaScript函数

九、文档对象模型

9.1 含义

9.2 在javascript中查找HTML元素有三种方法

9.3 DOM HTML

9.3.1 使用document.write（）方法可以想页面动态输出内容

9.3.2 innerHTML的用法

9.4 DOM CSS

9.5 DOM事件

9.6 DOM节点

9.6.1 添加HTML元素

9.6.2 删除HTML元素

GraceUI5.0手册 (5)

头像剪裁

相关介绍

兼容平台

演示代码

证件上传

图片素材

兼容平台