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

一. rich-text 富文本

富文本的属性如下

二 .代码示例

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"
          }
       }
    ]
  }
})

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