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

基础内容组件

1. icon图标组件

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

icon图标组件type类型参数

案例：

<view>
  <text>success:</text>
  <icon type="success"></icon>
  <text>success_no_circle:</text>
  <icon type="success_no_circle"></icon>
  <text>info:</text>
  <icon type="info"></icon>
  <text>warn:</text>
  <icon type="warn"></icon>
  <text>waiting:</text>
  <icon type="waiting"></icon>
  <text>cancel:</text>
  <icon type="cancel"></icon>
  <text>download:</text>
  <icon type="download"></icon>
  <text>search:</text>
  <icon type="search"></icon>
  <text>clear:</text>
  <icon type="clear"></icon>
  <text>size/color/success</text>
  <icon size="12" color="red" type="success"></icon>
</view>

2.progress进度条组件

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

案例：

<progress 
  percent="60" 
  show-info="true" 
  border-radius="5" 
  font-size="40px"
  stroke-width="16"></progress>

颜色属性：

<progress
  percent="60"
  activeColor="yellow"
  backgroundColor="#ff5857"></progress>

案例：

动画属性：

案例：

<progress
  percent="60"
  active
  bindactiveend="pro"></progress>

pro(){
    wx.showToast({
      title: '加载完成',
    })
  },

3.text文本组件

基础属性：

属性space 的合法值：


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

decode 可解析的字符实体：

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

  <text selectable>我是文本1</text>
  <text>我是文本2</text>
  <view></view>
  <text space="ensp">我    是    文   本3</text>
  <view></view>
  <text space="emsp">我    是    文   本3</text>
  <view></view>
  <text space="nbsp">我    是    文   本3</text>
  <view></view>
  <text decode>&lt;&gt;&amp;</text>

拓展：富文本编辑器

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

5.rich-text 富文本组件

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

案例：

<ul>
  <li>第一行</li>
  <li>第二行</li>
  <li>第三行</li>
</ul>

渲染结果：

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

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

data: {
    nodes:  ` 
      <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
      </ul>
    `
  },

渲染结果：

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

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

data: {
    nodes:  ` 
      <div>
        姓名：<input type='text'/>
        <span>无序列表</span>
        <ul>
          <li>第一行</li>
          <li>第二行</li>
          <li>第三行</li>
        </ul>
      </div>
    `
  },

渲染结果：

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


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

文本节点：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

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

nodesArray:[{
      type:'node',
      name:'div',
      attrs:{
        class:'demo',
        style:'line-height:60px;color:#ff5857;'
      },
      children:[{
        type:'text',
        text:'Hello World'
      }]
    }]

案例1（无序列表）

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

nodesArray:[{
      type:'node',
      name:'ul',
      attrs:{
        class:'demo',
        style:'line-height:60px;color:#ff5857;'
      },
      children:[{
        type:'node',
        name:'li',
        children:[{
          type:'text',
          text:'Hello World'
        }]
      }]
    }]

渲染结果：

案例2：

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

nodesArray:[{
      type:'node',
      name:'ul',
      attrs:{
        class:'demo',
        style:'color:#ff5857;'
      },
      children:[{
        type:'node',
        name:'li',
        children:[{
          type:'text',
          text:'第一行Hello World'
        }]
      },{
        type:'node',
        name:'li',
        children:[{
          type:'text',
          text:'第二行Hello World'
        }]
      }]
    }]

渲染结果：