微信小程序day02_11之基础组件rich-text 富文本

一. rich-text 富文本

富文本的属性如下

其中 space的有效值如下

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

二 .代码示例

1. 字符串形式的引用

在wxml中的代码如下

<rich-text nodes="{{mycontent}}">

</rich-text>

在js中的代码如下
引用了百度首页图片

// pages/richtext/richtext.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mycontent: '<img id="s_lg_img_new" class="s_lg_img_gold_showre" src="//www.baidu.com/img/xinshouye_e6412034ac5864cf40ca6ab99782883b.gif" width="270" height="129" usemap="#mp" title="" cursor="default"> '
  }
})

显示效果如下 :

2. 数组形式的引用

在wxml 中的代码如下

<rich-text nodes="{{mycontentArray}}">

</rich-text>

在js中的代码如下

// pages/richtext/richtext.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mycontentArray : [
       {
        name: "img", //指定html的标签为img 图片
          attrs: {
            class: "s_lg_img_gold_showre",
            src: "//www.baidu.com/img/xinshouye_e6412034ac5864cf40ca6ab99782883b.gif",
            width: "270",
            height: "129"
          }
       }
    ]
  }
})

最终显示的效果如图, 与字符串进行富文本 相同

官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
在官方文档中, 列出了可以使用的html的标签和属性