微信小程序（组件--基础内容组件）

【前言】
（1）icon图标组件
（2）progress进度条组件
（3）text文本组件
（4）拓展：富文本编辑器UE和UM
（5）rich-text 富文本组件

一、icon图标组件

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

属性	类型	默认值	是否必填	作用
type	string		是	icon的类型
size	number/string	23	否	icon的大小
color	string		否	icon的颜色

icon图标组件type类型参数

属性	类型
success	成功图标，带圆环
success_no_circle	成功图标，不带圆环
info	信息类图标
warn	警告类图标
waiting	等待图标
cancel	取消/关闭图标
download	下载图标
search	搜索图标
clear	清除内容图标

<view>icon图标组件</view>
<view>
  <icon type="success" size="60" color="skyblue"></icon>
  <icon type="success_no_circle"></icon>
  <icon type="info"></icon>
  <icon type="warn"></icon>
  <icon type="waiting"></icon>
  <icon type="cancel"></icon>
  <icon type="download"></icon>
  <icon type="search" color="purple"></icon>
  <icon type="clear"></icon>
</view>

二、progress进度条组件

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

基础展示属性

属性	类型	默认值	是否必填	作用
percent	number	无	否	百分比0~100
show-info	boolean	false	否	在进度条右侧显示百分比
border-radius	number/string	0	否	圆角大小
font-size	number/string	16	否	右侧百分比字体大小
stroke-width	number/string	0	否	进度条线的宽度

颜色属性

属性	类型	默认值	是否必填	作用
activeColor	string	#09BB07	否	已选择的进度条的颜色
backgroundColor	string	#EBEBEB	否	已选择的进度条的颜色

动画属性

属性	类型	默认值	是否必填	作用
active	boolean	false	否	进度条从左往右的动画
bindactiveend	function	无	否	动画完成事件

<view>progress进度条组件</view>
<view>
  <progress percent="80" 
  show-info="true"
  border-radius="8"
  font-size="20"
  stroke-width="40"
  activeColor="#e1565b" 
  backgroundColor="#cccccc"
  active="false"></progress>
</view>

三、text文本组件

基础属性

属性	类型	默认值	是否必填	作用
selectable	boolean	false	否	文本是否可选
space	string	无	否	显示连续空格
decode	boolean	false	否	是否解码（可以解析的有& nbsp; & ensp; & emsp; & lt; & gt; & amp; ）

属性space 的合法值

值	作用
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

selectable	boolean	false	否	文本是否可选

添加该属性后，文本可以全选或者选择性复制。
注意：主要添加该属性，不管是设置为true还是false，都会生效，具体如下所示

decode 可解析的字符实体

显示结果	描述	实体名称
	空格，根据字体设置的空格大小	& nbsp;
	空格，中文字符空格大小	& emsp;
	空格，中文字符空格一半大小	& ensp;
<	小于号	& lt;
>	大于号	& gt;
&	和号	& amp;

注意：
①space是针对文本中的空格符号
②decode是针对文本中存在的字符实体。

四、拓展：富文本编辑器

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

• 例如富文本编辑器UE（UEditor）和UM（UeditorMINI），在后台编辑完毕后，发布时，都是将编辑器中的内容转为html然后拼接显示到前台页面。同理，小程序后台利用富文本编辑器发布文章时，需要在小程序页面正常展示。
• 所以小程序页面需要能够解析html标签

五、rich-text 富文本组件

案例：如果想在页面展示html相关语法标签样式，怎么展示？
首先直接写下ul>li试下

<view>rich-text 富文本组件</view>
<ul>
  <li>展示信息1</li>
  <li>展示信息2</li>
  <li>展示信息3</li>
</ul>

渲染结果：

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

<rich-text nodes="{{nodes}}"></rich-text>

  data: {
    nodes:`
      <div>
        <span>请说出你最喜欢最喜欢的明星？</span>
        <ul>
          <li>赵丽颖</li>
          <li>冯绍峰</li>
        </ul>
      </div>
    `
  },

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

<rich-text nodes="{{nodes}}"></rich-text>

  data: {
    nodes:`
      <div>
      姓名：<input type="text" />
        <span>请说出你最喜欢最喜欢的明星？</span>
        <ul>
          <li>赵丽颖</li>
          <li>冯绍峰</li>
        </ul>
      </div>
    `
  },

分析：验证后发现input解析失败，即富文本组件不支持解析input输入框
原因：富文本组件rich-text只支持受信任的HTML节点及属性

属性	类型	默认值	是否必填	作用
nodes	array/string	[]	否	节点列表/HTML String
space	string		否	显示连续空格

nodes类型为array时
解析结果①：

<rich-text nodes="{{nodesArray}}"></rich-text>

nodesArray:[{
        type:'node',
        name:'div',
        attrs:{
          class: 'DemoArea',
          style: 'line-height:60rpx;color:red;'
        },
        children:[{
          type: 'text',
          text: 'Hello World!'
        }]
      }]

解析结果②：

<rich-text nodes="{{nodesArray2}}"></rich-text>

	  nodesArray2:[{
        type:'node',
        name:'ul',
        attrs:{
          class:'DemoArea',
          style:'line-height:60px; color:red;'
        },
        children:[{
          type:'node',
          name:'li',
          children:[{
            type:'text',
            text:'Hello World'
          }]
        }]
      }]

解析结果③：

<rich-text nodes="{{nodesArray3}}"></rich-text>

    nodesArray3: [{
      type: 'node',
      name: 'ul',
      attrs: {
        class: 'DemoArea',
        style: 'color:red;'
      },
      children: [{
        type: 'node',
        name: 'li',
        children: [{
          type: 'text',
          text: '第一行Hello World'
        }]
      },
      {
        type:'node',
        name:'li',
        children: [{
          type:'text',
          text:'第二行Hello World'
        }]
      }]
    }]

属性space的合法值

值	作用
ensp	中文字符空格一半大小& ensp;
emsp	中文字符空格大小& emsp;
nbsp	根据字体设置的空格大小& nbsp;

nodes属性
现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点 元素节点：type = node

属性	类型	默认值	是否必填	备注
name	标签名	string	是	支持部分受信任的 HTML 节点
attrs	属性	object	否	支持部分受信任的属性，遵循 Pascal 命名法（大驼峰）
children	子节点列表	array	否	结构和 nodes 一致

文本节点：type = text

属性	类型	默认值	是否必填	备注
text	文本	string	是	支持entities

受信任的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