小程序组件介绍-基础内容

其实写了第一篇视图组件后，我就觉得写的什么啊 ，有什么用呢，过了五分钟，我 就想也许这是我自己想偷懒的借口，无论有没有用，先搞出来，混几个浏览次数也是 好的。哈哈

icon（图标）

ps:其实我觉得大家都知道icon是图标的意思；哈哈；

在微信小程序中，关于icon的属性介绍

 这就是微信提供的type对应的图标样式。

我们在项目中，往往需要更多的 icon类型，那么怎么在小程序 中使用像阿里巴巴图标呢，请参看这篇文章：

在小程序使用阿里图标;(方便自己的同时，给别人 博客做了宣传)；

text(文本)

相当于我们在H5中使用的span标签

 

<text>我是文本内容</text>

注意的是<text>只能嵌套<text>

rich-text(富文本)

这个官方文档给出的是这样的。

其中：nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

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

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

出现的效果是：

 

node里面的name值可以是你能想到的html标签；

全局支持class和style属性，不支持id属性。通过id选择器修改样式，是没有任何效果的

progress（进度条）

progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />