（二）小程序组件应用

小程序文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

（1）rich-text

富文本编辑，可以用于解析 html，在我看来 相当于 vue 中的 v-html 

wxml：相当于html

<button bindtap="changeText">改变内容</button>
<rich-text space="{{ space }}" nodes="{{ nodes }}"></rich-text>

bindtap 相当于vue中的 @click 绑定点击事件的函数 点击后执行changeText 方法

rich-text 复制了两个动态变量属性

赋值动态变量语法 "{{}}"

js：

Page({
  data: {
    space: 'nbsp',
    nodes: `<div class="div_class">
      <h1>Title</h1>
      <p class="p">
        Life is&nbsp;<i>like</i>&nbsp;a box of
        <b>&nbsp;chocolates</b>.
      </p>
    </div>`
  },
  //事件处理函数
  changeText () {
    this.setData({
      nodes: 
      `<div class="import">
          <span>i love you</span>
      </div>`
    })
  }
})

data中保存组件中的所需要数据，可以看出 nodes是html 片段

当点击按钮的时候，changeText函数改变 html 片段 通过 this.setData 方法来改变，这个于react 改变之类似

原先：

改变后：

 

rich-text 渲染图片：

Page({
  data: {
    node: `<div class="import">
    <img src="http://images.djtest.cn/jz/clean/seckill/6e10cd18b955fca5fa6bcf5a8b5b768f.jpeg" />
  </div>`,
    space: 'nbsp',
    nodes: `<div class="div_class">
      <h1>Title</h1>
      <p class="p">
        Life is&nbsp;<i>like</i>&nbsp;a box of
        <b>&nbsp;chocolates</b>.
      </p>
    </div>`
  },
  //事件处理函数
  changeText () {
    this.setData({
      nodes: this.data.node
    })
  }
})

 有时候图片加载不出来，看一下 network，发没发请求，不要一味的看代码，怎么没报错 图片还出不来？有时候请求有延迟引起的

 

总结：rich-text 的 nodes 属性可以解析 html 片段

（二）view 组件与 button 结合 添加点击效果

hover-class 属性

<view hover-class="transition">
      <button class="mini-btn" type="primary" size="mini">按钮</button>
    </view>

.transition {
  opacity: 0.8;
  transform: scale(1, 0.95);
}

点击按钮的时候，有个transition动画 后又恢复