微信小程序 使用rich-text

今天比较得空，就写下使用微信小程序的富文本，先来个传送门

rich-text 小程序

然后来试试一段简单的代码：

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

Page({
  data: {
    myrich: ""
  },
  onShow: function () {
    console.log("开始尝试");
    const that = this; 
    var myrich = '<view class="colorred">hello,world</view>';
    that.setData({myrich:myrich});
  }
})

当然，是运行失败的，我就不给出图片了。这是因为view不被支持，所以我们要改用一个div来做实验

重新更换代码：

Page({
  data: {
    myrich: ""
  },
  onShow: function () {
    console.log("开始尝试");
    const that = this; 
    var myrich = '<div class="colorred">hello,world</div>';
    that.setData({myrich:myrich});
  }
})

当然，class是在wxss里面定义好了的，

效果图如下：

其实也就这样，毕竟很多时候我们都是要从后台接受富文本的数据，然后显示在小程序里面，而用小程序做富文本编译的，又是比较少的，所以就很多情况是直接将str放进到页面的，

当然！文档还是要看的