前言

今天星期五啦，终于腾出时间来干自己喜欢的事情了，昨天没有续上，今天接着补上，现在是开始阶段我讲的东西都很简单，所以今天的组件也是很简单的两个组件，<icon>组件和<rich-text>组件。

便捷的<icon>

<icon>组件是小程序提供给我们表示图标的，在一个项目中图标是常出现的东西，在HTML中我们要表示一个图标，是很麻烦的，我们要去找图，还要写css样式以达到我们的需求。但是在小程序中就便捷了很多，<icon>提供了一个type属性，只需要提供有效值就可以在页面上显示一个与有效值对应的图标，（有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear） 并且大小也不需要我们多操心，<icon>有一个默认的大小23px，一般情况下默认大小是够用的，如果需要修改，那也很简单，只需要给 size 属性一个你想要的大小就行了，噢，对了，还有颜色嘛，这可是很重要的，一个适合的颜色，能够让界面好看很多。这点小程序早想到了，color属性就是帮我们改变icon的颜色的。这些文档比我说的明白，说了这么多,如何使用呢？？？咱们来看代码

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" />
  </block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}">     <!--体现颜色-->
    <icon type="success" size="40" color="{{item}}" />
  </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'
    ]
  }
})

截图

<rich-text>组件

这个组件的作用就是帮我们在页面上展示一些HTML的节点，主要是两种类型的节点，一是文本节点，二是元素节点，默认的是是元素节点，但是也可以通过type属性来选择，type = "node"是元素节点，text 是文本节点，文本节点其实没什么好说的，详情见文档 。<rich-text>有一个很重要的属性是nodes 这个属性官方推荐使用array类型，通过这个nodes属性我们可以给它一个数组，这个数组里面有三个属性，分别是name,attrs,children。分别是HTML节点的名称，是个数组，可以放这个节点相关属性，children是它的子节点。引一段官方的代码

wxml代码

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

js代码

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

截图

结束

文档搬运工！打扰了，各位