微信小程序中显示HTML内容四种解决方案

解决方法一：Towxml

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

Towxml项目地址： github.com/sbfkcel/tow…

Towxml使用方法：

1、克隆项目到本地

git clone https://github.com/sbfkcel/towxml.git

放置根目录如下图：

2、引入库 /app.js

//app.js
App({

    // 引入`towxml3.0`解析方法

    towxml:require('/towxml/index')

})

3. 在页面配置文件中引入towxml组件 /pages/index/index.json

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

4. 在页面中插入组件/pages/index/index.wxml

<!--index.wxml-->
<view class="container">
  <towxml nodes="{{article}}"/>
</view>

5. 解析内容并使用/pages/index/index.js

//获取应用实例

const app = getApp();

Page({
    data: {
        isLoading: true, // 判断是否尚在加载中
        article: {} // 内容数据
    },
    onLoad: function () {
        let result = app.towxml(`# Markdown`,'markdown',{
            base:'https://xxx.com', // 相对资源的base路径
            theme:'dark', // 主题，默认`light`
            events:{ // 为元素绑定的事件方法
                tap:(e)=>{
                    console.log('tap',e);
                }
            }
        });
        // 更新解析数据
        this.setData({
            article:result,
            isLoading: false
        });
    }
})

效果：

优点：

1、标签相对于wxParse要齐全

2、可以实现一些基本交互

3、可以进行二次开发

4、towxml有一套自己的ui

缺点：

1、有一些交互需要定制化开发，如图片放大

2、定制化样式需要重写ui

解决方法二：wxParse

项目地址： github.com/icindy/wxPa…

使用方法：

1、克隆项目到本地

git clone https://github.com/icindy/wxParse.git

放置根目录如下图：

2、引入必要文件

//在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');

3、数据绑定

var article = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

4、模版引用

// 引入模板
<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

5、样式优化

// 表格样式优化
.wxParse-table { display: table }
.wxParse-tr { display: table-row }
.wxParse-thead { display: table-header-group }
.wxParse-tbody { display: table-row-group }
.wxParse-tfoot { display: table-footer-group }
.wxParse-col { display: table-column }
.wxParse-colgroup { display: table-column-group }
.wxParse-td, .wxParse-th { display: table-cell }
.wxParse-caption { display: table-caption }

// a连接样式优化
.wxParse-a{
    display: inline;
}

效果：

优点：

1、可以图片放大

2、可以进行二次开发

缺点：

1、显示的html内容有时候会样式错乱

2、停止维护2年了有一些样式需要重写

解决方法三：rich-text

小程序富文本标签Bug & Tip

1、tip：nodes不推荐使用String类型，性能会有所下降。

2、tip：rich-text 组件内屏蔽所有节点的事件。

3、tip：attrs属性不支持id，支持class。

4、tip：name属性大小写不敏感。

5、tip：如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。

6、tip：img标签仅支持网络图片。

7、tip：如果在自定义组件中使用 rich-text 组件，那么仅自定义组件wxss样式对 rich-text 中的 class 生效。

解决方法四：web-view

承载网页的容器。会自动铺满整个小程序页面，个人类型小程序暂不支持使用。

总结：

如果做文章详情展示个人推荐使用wxParse自己在开发一些定制交互。没有交互需求的HTML内容推荐使用rich-text进行展示。