31.微信小程序(组件 -- 基础内容组件)

微信小程序(组件 – 基础内容组件)

前言

(1)icon图标组件
(2)progress进度条组件
(3)text文本组件
(4)拓展:富文本编辑器UE和UM
(5)rich-text 富文本组件

基础内容组件
(1)icon图标组件

组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)
31.微信小程序(组件 -- 基础内容组件)_第1张图片
type类型参数
31.微信小程序(组件 -- 基础内容组件)_第2张图片
31.微信小程序(组件 -- 基础内容组件)_第3张图片

(2)progress进度条组件

组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)

基础展示属性
31.微信小程序(组件 -- 基础内容组件)_第4张图片
颜色属性
31.微信小程序(组件 -- 基础内容组件)_第5张图片
动画属性
在这里插入图片描述

(3)text文本组件

基础属性
31.微信小程序(组件 -- 基础内容组件)_第6张图片
属性space 的合法值
31.微信小程序(组件 -- 基础内容组件)_第7张图片
在这里插入图片描述
31.微信小程序(组件 -- 基础内容组件)_第8张图片
在这里插入图片描述
decode 可解析的字符实体
31.微信小程序(组件 -- 基础内容组件)_第9张图片

(4)拓展:富文本编辑器

31.微信小程序(组件 -- 基础内容组件)_第10张图片

富文本编辑器

(4)正式讲解之前,首先要明确一点,所有的后台编辑器在编辑完毕后,点击发布时,都是将编辑器的代码段拼接到前台页面展示。

例如富文本编辑器UE(UEditor)和UM(UeditorMINI),在后台编辑完毕后,发布时,都是将编辑器中的内容转为html然后拼接显示到前台页面。同理,小程序后台利用富文本编辑器发布文章时,需要在小程序页面正常展示。

所以小程序页面需要能够解析html标签

基础内容组件

(5)rich-text 富文本组件

前言:如果想在页面展示html相关语法标签样式,怎么展示?

首先直接写下ul>li试下
31.微信小程序(组件 -- 基础内容组件)_第11张图片

验证后发现,小程序无法正常显示html的ul标签元素,这里就需要用到rich-text富文本组件

案例:

31.微信小程序(组件 -- 基础内容组件)_第12张图片

案例改写:接下来对nodes的html字符串做改动

31.微信小程序(组件 -- 基础内容组件)_第13张图片
分析:验证后发现input解析失败,即富文本组件不支持解析input输入框
原因:富文本组件rich-text只支持受信任的HTML节点及属性
在这里插入图片描述
31.微信小程序(组件 -- 基础内容组件)_第14张图片
nodes属性
现支持两种节点,通过type来区分,分别是元素节点和文本节点,默认是元素节点,在富文本区域里显示的HTML节点 元素节点:type = node
31.微信小程序(组件 -- 基础内容组件)_第15张图片
文本节点:type = text
在这里插入图片描述
受信任的HTML节点及属性
全局支持class和style属性,不支持id属性
受信任HTML节点:a、abbr、address、article、aside、b、bdi、bdo、big、blockquote、br、caption、center、cite、code、col、colgroup、dd、div、dl、dt、em、footer、h1-h6、header、hr、img(属性alt,src,height,width)、li、ol、p、span、table相关、ul

nodes类型为array在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

31.微信小程序(组件 -- 基础内容组件)_第16张图片
31.微信小程序(组件 -- 基础内容组件)_第17张图片

31.微信小程序(组件 -- 基础内容组件)_第18张图片

如有问题或者疑问请留言联系小编!!!!

感谢来访!!!

你可能感兴趣的:(微信小程序,小程序,html)