微信小程序富文本器rich-text、web-view、wxParse、mp-html、towxml对比

微信小程序解析富文本html大概有几种方式，我用过的有这三种rich-text、web-view、wxParse、mp-html，各有各的优缺点，接下来聊一聊。

一、rich-text

二、web-view

三、wxParse

四、mp-html

五、towxml

一、rich-text

rich-text富文本组件是小程序1.4.0版本后推出来的。

 官方给出的例子（本文做了精简）：

1.  
   // index.wxml
2.  
   <view class="container">
3.  
   <rich-text nodes="{{htmlSnip}}"></rich-text>
4.  
   <rich-text nodes="{{nodes}}"></rich-text>
5.  
   </view>
6.  
    
7.  
   // index.js
8.  
   Page({
9.  
   onShareAppMessage() {
10.  
    return {
11.  
    title: 'rich-text',
12.  
    path: 'page/component/pages/rich-text/rich-text'
13.  
    }
14.  
    },
15.  
     
16.  
    data: {
17.  
    htmlSnip: `<div class="div_class">
18.  
    <h1>Title</h1>
19.  
    <p class="p">
20.  
    Life is&nbsp;<i>like</i>&nbsp;a box of
21.  
    <b>&nbsp;chocolates</b>.
22.  
    </p>
23.  
    </div>
24.  
    `,
25.  
    nodes: [{
26.  
    name: 'div',
27.  
    attrs: {
28.  
    class: 'div_class',
29.  
    style: 'line-height: 60px; color: #1AAD19;'
30.  
    },
31.  
    children: [{
32.  
    type: 'text',
33.  
    text: 'You never know what you\'re gonna get.'
34.  
    }]
35.  
    }]
36.  
    },
37.  
    })

效果如下：

缺点：
1、只能解析html内容，需要做兼容处理

二、web-view

web-view是小程序1.6.4版本推出来的新组件。

优点：
1、可以直接显示网页内容，而且可以做 a 链接跳转。

缺点：

1、其实两个很多微信都低于1.6.4版本，不能使用，需要用前面介绍的两种方法做兼容处理。 

三、wxParse

wxParse是拥有7.7k stars已停止维护了的库。如何使用之前有写过相关介绍《微信小程序-后台使用富文本编辑器返回数据，小程序编译富文本编辑器返回的数据》

优点：

1、可以解析 html/markdown 两种脚本，功能很强大，

2、可以解析audio

缺点：

1、在解析富文本过程中，多次调用小程序的setData()方法，对性能有一定影响

2、可以解析audio，但是不能保持他原有的样式

3、表格编译样式不能保持原有样式

四、mp-html

mp-html是拥有2.5k stars的库。查看更多介绍。

引入方式

1、npm

1.  
   // 本方法仅适用于微信、QQ 小程序
2.  
    
3.  
   // 在小程序项目根目录下通过 npm 安装组件包
4.  
   // 开发者工具中勾选 使用 npm 模块（若没有此选项则不需要）并点击 工具 - 构建 npm
5.  
   // 在需要使用页面的 json 文件中添加
6.  
    
7.  
   {
8.  
   "usingComponents": {
9.  
   "mp-html": "mp-html"
10.  
    }
11.  
    }
12.  
     

2、源码引入

1.  
   // 本方法适用于所有平台
2.  
    
3.  
   // 将 源码 中对应平台的代码包（dist/platform）拷贝到 components 目录下，更名为 mp-html
4.  
   // 在需要使用页面的 json 文件中添加
5.  
    
6.  
   {
7.  
   "usingComponents": {
8.  
   "mp-html": "/components/mp-html/index"
9.  
   }
10.  
    }

使用

1.  
   // index.wxml
2.  
   <mp-html content="{{html}}" />
3.  
    
4.  
   // index.js
5.  
   Page({
6.  
   data: {
7.  
   html: '<div>Hello World!</div>'
8.  
   }
9.  
   })

优点：

1、能够支持多种 html 格式，具有强大的稳定性

2、支持多种框架使用

3、长内容可以分次分页渲染

缺点：

1、遇到某些特殊字符（=，&等）会中断解析，需要特殊处理

五、towxml

towxml是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

使用

1、放在小程序根目录下

1.  
   // 1.将构建出来的towxml并解压至小程序项目根目录下，即（小程序/towxml）
2.  
    
3.  
   // 2. 引入库/app.js
4.  
    
5.  
   //app.js
6.  
   App({
7.  
   // 引入`towxml3.0`解析方法
8.  
   towxml:require('/towxml/index')
9.  
   })
10.  
     
11.  
    // 3. 在页面配置文件中引入towxml组件 /pages/index/index.json
12.  
     
13.  
    // index.json
14.  
    {
15.  
    "usingComponents": {
16.  
    "towxml":"/towxml/towxml"
17.  
    }
18.  
    }
19.  
     
20.  
    // 4. 在页面中插入组件/pages/index/index.wxml
21.  
     
22.  
    // index.wxml
23.  
    <view class="container">
24.  
    <towxml nodes="{{article}}"/>
25.  
    </view>
26.  
     
27.  
    // 5. 解析内容并使用/pages/index/index.js
28.  
     
29.  
    //获取应用实例
30.  
    const app = getApp();
31.  
    Page({
32.  
    data: {
33.  
    isLoading: true, // 判断是否尚在加载中
34.  
    article: {} // 内容数据
35.  
    },
36.  
    onLoad: function () {
37.  
    let result = app.towxml(`# Markdown`,'markdown',{
38.  
    base:'https://xxx.com', // 相对资源的base路径
39.  
    theme:'dark', // 主题，默认`light`
40.  
    events:{ // 为元素绑定的事件方法
41.  
    tap:(e)=>{
42.  
    console.log('tap',e);
43.  
    }
44.  
    }
45.  
    });
46.  
     
47.  
    // 更新解析数据
48.  
    this.setData({
49.  
    article:result,
50.  
    isLoading: false
51.  
    });
52.  
     
53.  
    }
54.  
    })

 2、放在components中

1.  
   // 1.将生成好的 towxml 放进components
2.  
    
3.  
   // 2.修改 components\towxml\decode.json 的路径（绝对路径都改为相对路径）
4.  
    
5.  
   {
6.  
   "component": true,
7.  
   "usingComponents": {
8.  
   "decode": "./decode",
9.  
   "audio-player": "./audio-player/audio-player",
10.  
    "table": "./table/table",
11.  
    "todogroup": "./todogroup/todogroup",
12.  
    "img": "./img/img"
13.  
    }
14.  
    }
15.  
     
16.  
    // 3.将在配置时引用到 towxml app.js
17.  
     
18.  
    //app.js
19.  
     
20.  
    App({
21.  
    // 引入`towxml3.0`解析方法
22.  
    towxml: require('/components/towxml/index'),
23.  
    // ...
24.  
    }
25.  
     
26.  
    // 4.所有引用到的页面/pages/aa/bb/xxx.json 亦或是全局配置的 app.json
27.  
     
28.  
    {
29.  
    // ...
30.  
    "usingComponents": {
31.  
    "towxml": "/components/towxml/towxml"
32.  
    }
33.  
    }
34.  
     
35.  
    使用同放在根目录下的第4、5步骤

注意：towxml的模板关联的数据参数，一定不能写在对象里。如果写在对象里（如下），在测试的时候没有任何问题，但是在真机测试的时候会导致数据加载及界面布局错乱！

1.  
   data:{
2.  
          htmlObj:{
3.  
                 content:{}   //content将用来存储towxml数据
4.  
               }
5.  
   }
6.  
    
7.  
   <import src="/towxml/entry.wxml"/>   
8.  
   <template is="entry" data="{{...htmlObj.content}}"/> 

优点：

1、可以解析一些废弃或者过新的标签

2、对于界面的排版优化比较美观

缺点：

1、部分解析出来的代码片段没有换行

2、在解析代码序号的时候生成ul和li标签了，但在样式上没有做好处理

上面4种方法可以在微信小程序中解析html富文本，大家可以根据自己的情况选择适合的方法。

参考文件：

rich-text、web-view、wxParse、mp-html、towxml

微信小程序mp-html富文本解析的坑

微信小程序富文本解析插件-towxml（扩展富文本图片预览功能）

小程序富文本解析的「伪需求」，从wxParse到towxml的坑

有不妥的地方，欢迎大家指出。

这篇好文章是转载于：学新通技术网