微信小程序解析富文本html大概有两种方式（我发现的）。
两种方法，各有各的优缺点。
一：使用小程序内置标签rich-text
这个标签解析的富文本会保留你在pc端编辑的样式，也就是说，你在pc端编辑的是什么样子，小程序端显示的也是什么样子。
示例：
Html
xml
复制代码
<view class="container"> <view class="page-body"> <view class="page-section"> <view class="page-section-title">通过HTML String渲染</view> <view class="page-content"> <scroll-view scroll-y>{{htmlSnip}}</scroll-view> <button style="margin: 30rpx 0" type="primary" bindtap="renderHtml">渲染HTML</button> <block wx:if="{{renderedByHtml}}"> <rich-text nodes="{{htmlSnip}}"></rich-text> </block> </view> </view> <view class="page-section"> <view class="page-section-title">通过节点渲染</view> <view class="page-content"> <scroll-view scroll-y>{{nodeSnip}}</scroll-view> <button style="margin: 30rpx 0" type="primary" bindtap="renderNode">渲染Node</button> <block wx:if="{{renderedByNode}}"> <rich-text nodes="{{nodes}}"></rich-text> </block> </view> </view> </view> </view>
Javascript：
css
复制代码
const htmlSnip = `<div> <h1>Title</h1> <p> Life is <i>like</i> a box of <b> chocolates</b>. </p> </div> ` const nodeSnip = `Page({ data: { nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: red;' }, children: [{ type: 'text', text: 'You never know what you're gonna get.' }] }] } }) ` Page({ onShareAppMessage() { return { title: 'rich-text', path: 'page/component/pages/rich-text/rich-text' } }, data: { htmlSnip, nodeSnip, renderedByHtml: false, renderedByNode: false, nodes: [{ name: 'div', attrs: { class: 'div_class', style: 'line-height: 60px; color: #1AAD19;' }, children: [{ type: 'text', text: 'You never know what you're gonna get.' }] }] }, renderHtml() { this.setData({ renderedByHtml: true }) }, renderNode() { this.setData({ renderedByNode: true }) }, enterCode(e) { console.log(e.detail.value) this.setData({ htmlSnip: e.detail.value }) } })
上边是rich-text的基本用法，更多使用方法请参照微信小程序官方文档：
developers.weixin.qq.com/miniprogram…
但是rich-text标签有一个问题就是，其无法解析video标签。
因此我就找了第二个解析富文本的方法。
二：使用wxParse插件解析html
wxParse的优点是可以解析video标签，但是他不会保留原有的样式。
这个相关的文件会在文末提供下载，所以别急，请慢慢看下去。
文件列表：
使用示例：
在html中引入：
ini
复制代码
<import src ="../../../wxParse/wxParse.wxml" />
在javascript中引入：
ini
复制代码
var WxParse = require('../../../wxParse/html2json.js');
在css中引入：
scss
复制代码
@import "./wxParse/wxParse.wxss";
使用方法：
Javascript
ini
复制代码
// pages/about/about.js onLoad: function (options) { const that = this; /*** WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName绑定的数据名(必填) * 2.type可以为html或者md(必填) * 3.data为传入的具体数据(必填) * 4.target为Page对象,一般为this(必填) * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/ var temp = WxParse.wxParse('article', 'html', data, that, 5); },
Wxml:
xml
复制代码
<!--pages/about/about.wxml--> <import src="../../wxParse/wxParse.wxml"/> <view> <!-- 这一块是富文本 显示的内容区 --> <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
以上大概就是微信小程序中两种解析富文本html的方法
第二种方法的引入文件下载请移步原文链接《小程序（二十六）微信小程序解析富文本的几种方式》
有好的建议，请在下方输入你的评论。
欢迎访问个人博客：guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”
