解决方法一：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进行展示。
