微信小程序学习（4）

3. 基础内容 （基础组件）

• icon 图标组件
• rich-text 富文本组件
• text 文本组件
• progress 进度条组件

3.1 icon 图标

• type: 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
• size: 大小 单位px, 2.4之后支持 rpx
• color: 字体图标颜色（背景）
• aria-label: 属性元素额外描述

<!-- 图标都带有微信风格 -->
<icon type="success"></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'></icon>
<icon type='clear'></icon>

3.2 text 文本

• selectable: 是否可选中文字，类似于我们弄复制操作，默认值 false，注意，只有text 文本才可以选中

• space: 显示连续空格, 默认值 false (字符串)

  ​ 属性值：

  • ensp 英文空格

  • emsp 中文空格

  • nbsp 根据字体设置的空格大小

• decode: 是否解码， 如 &nbsp;

<view >
  <text selectable="true" space="emsp" decode='true'>&lt; 这是   &nbsp;   一段文本 &gt; </text>
</view>

3.3 rich-text 富文本编辑器

• nodes 将数组或字符串 赋值给 nodes 属性 即可达到编译效果，推荐使用 数组

• nodes 支持两种节点，通过type来区分，分别是元素节点（node）和文本节点（text），默认是元素节点，在富文本区域里显示的HTML节点

  type是node需要指明 :

  name: “<div>” （标签名）

  attrs: {属性}

  children: [子节点]

• nodes 只能编译受信任的HTML节点及属性，不支持 font 标签，全局支持class和style属性，不支持id属性

• space 连续空格，同上 text

<view>
  <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
</view>

Page({
  data: {
    nodes: [{
      type: 'node', // 默认type='node',可以不写
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    },
    {
      type: 'text',
      text: 'Hello World2'
    }]
  },
  tap() {
    console.log('tap')
  }
})

3.4 progress 进度条

• percent: 显示百分比（进度条变色段）
• show-info: 进度条右端显示百分比数字，默认值 false
• stroke-width: 进度条宽度
• activer-color: 进度条已激活（已选择）的颜色
• backgroundColor: 进度条未激活（未选择）的颜色
• active: 动画显示进度条信息，默认值 false
• active-mode： 动画播放类型，属性值：backwards 动画从头播，forwards 从上次结束点接着播
• aria-label: 元素额外描述

<progress percent="{{mypercent}}"  
  stroke-width='12'
  activeColor='red' backgroundColor='blue'
  active-mode='forwards'
  active  show-info />
  <view bindtap='addpercent'>addpercent</view>

Page({
  data: {
    mypercent: 0
  },
  addpercent() {
    console.log(this)
    const that = this
    let s = 0
    const time = setInterval(() => {
      console.log(this === that) // true 合理使用箭头函数
      if (s === 10) {
        clearInterval(time)
      }
      let mypercent = this.data.mypercent + 10;
      this.setData({
        mypercent
      })
      s = s + 1
      return
    }, 1000)
  }
})

这里介绍了基础内容的四个组件，之后下一节，我们回来讲解表单组件