一、icon - 图标
1.属性列表

2.eg：

wxml:

<view class='group'>
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"></icon>
  </block>
</view>

<view class='group'>
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"></icon>
  </block>
</view>

<view class='group'>
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"></icon>
  </block>
</view>

js：

Page({

  data: {
    iconSize: [20,30,40,50,60,70],
    iconColor: [
      'red','orange','yellow','green','rgb(0,255,255)','blue','purple'
    ],
    iconType:[
      'success','success_no_circle','info','warn','waiting','cancel','download','search','clear','circle'
    ]
  }
})

二、text - 文本
1.属性列表

2.space有效值

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

3.tips:

decode可以解析的有：&nbsp、&lt、&gt、&amp、&apos、&ensp、 
各个操作系统的空格标准不一致；
<text/>组件内只支持<text/>嵌套;
除了文本节点以外的其他节点都无法长按选中;

4.eg：

.wxml

<view class="text-box" scroll-y="true" scroll-top="{{scrollTop}}">
      <text>{{text}}</text>
</view>
<button disabled="{{!canAdd}}" bindtap="add">add line</button>
<button disabled="{{!canRemove}}" bindtap="remove">remove line</button>

.js

var texts = [
  '2011年1月，微信1.0发布',
  '同年5月，微信2.0语音对讲发布',
  '10月，微信3.0新增摇一摇功能',
  '2012年3月，微信用户突破1亿',
  '4月份，微信4.0朋友圈发布',
  '同年7月，微信4.2发布公众平台',
  '2013年8月，微信5.0发布微信支付',
  '2014年9月，企业号发布',
  '同月，发布微信卡包',
  '2015年1月，微信第一条朋友圈广告',
  '2016年1月，企业微信发布',
  '2017年1月，小程序发布',
  '......'
];

Page({
  data: {
    text: '',
    canAdd: true,
    canRemove: false
  },
  extraLine: [],
  add: function (e) {
    var that = this;
    this.extraLine.push(texts[this.extraLine.length % 12])
    this.setData({
      text: this.extraLine.join('\n'),
      canAdd: this.extraLine.length < 12,
      canRemove: this.extraLine.length > 0
    })
    setTimeout(function () {
      that.setData({
        scrollTop: 99999
      });
    }, 0)
  },
  remove: function (e) {
    var that = this;
    if (this.extraLine.length > 0) {
      this.extraLine.pop()
      this.setData({
        text: this.extraLine.join('\n'),
        canAdd: this.extraLine.length < 12,
        canRemove: this.extraLine.length > 0,
      })
    }
    setTimeout(function () {
      that.setData({
        scrollTop: 99999
      });
    }, 0)
  },
})

三、rich-text - 富文本
1.属性列表

nodes 节点列表/HTML String Array/String

2.node

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

3.元素节点：type = node

name        标签名        必填
attrs        属性        
children    子节点列表， 结构和nodes一致

4.文本节点: type = text

text 文本 String 必填

5.tips:

nodes 不推荐使用 String 类型，性能会有所下降。
 rich-text 组件内屏蔽所有节点的事件。
 attrs 属性不支持 id ，支持 class 。
 name 属性大小写不敏感。
 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
 img 标签仅支持网络图片。
 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效。

6.eg:

.wxml

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

.js

Page({
    data:{
        nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

四、progress - 进度条

1. 属性列表

2.eg：

<view>
  <progress percent='20' show-info='ture'></progress>
  <progress percent='40' stroke-width='12'></progress>
   <icon class="progress-cancel" type="cancel"></icon> 
  <progress percent='60' color='pink'></progress>
  <progress percent='80' active='ture'></progress>
  <progress percent='100' active-mode='backwards' ></progress>
</view>

参考资料:
1.基础组件

2.W3C-小程序开发文档

赏

谢谢您的鼓励

支付宝

微信