持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第20天，点击查看活动详情
微信小程序解析富文本html大概有两种方式（我发现的）。
两种方法，各有各的优缺点。
一：使用小程序内置标签rich-text
这个标签解析的富文本会保留你在pc端编辑的样式，也就是说，你在pc端编辑的是什么样子，小程序端显示的也是什么样子。
示例：
Html
<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：
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中引入：
<import src ="../../../wxParse/wxParse.wxml" />
复制代码在javascript中引入：
var WxParse = require('../../../wxParse/html2json.js');
复制代码在css中引入：
@import "./wxParse/wxParse.wxss";
复制代码使用方法：
Javascript
// 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:
<!--pages/about/about.wxml-->
<import src="../../wxParse/wxParse.wxml"/>
<view>
<!-- 这一块是富文本 显示的内容区 -->
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
复制代码以上大概就是微信小程序中两种解析富文本html的方法
第二种方法的引入文件下载请移步原文链接《小程序（二十六）微信小程序解析富文本的几种方式》
有好的建议，请在下方输入你的评论。
欢迎访问个人博客：guanchao.site
欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”