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

心已赠人 2022-03-10 09:24 453阅读 0赞

### 文章目录 ###

*   *   *  一. rich-text 富文本
         *  二 .代码示例
         *   *  1. 字符串形式的引用
             *  2. 数组形式的引用

### 一. rich-text 富文本 ###

富文本的属性如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
其中 space的有效值如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
使用富文本的注意事项 :  
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"> '
      }
    })

显示效果如下 :  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

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

最终显示的效果如图, 与字符串进行富文本 相同  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html][https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]  
在官方文档中, 列出了可以使用的html的标签和属性  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/e789e8dadedf42a689919b41f48be692.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/15d02ad7e1544a70a8682feb79ab5228.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/6e60e08e7fc844ffaadca31444bd52e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220310/96dae83b6d204851a3606a1cda1f5ea7.png
[https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20220310/b2efed28b1dc4c4abb6177254c0b5779.png