如何在微信公众号和微信小程序端展示富文本内容
一、背景长久以来，我都有移动端展示的需求。曾经尝试过：
① js判定移动端和PC端，然后使用两套代码
② 响应式布局
但是，无论是从工作量还是，改造难度对于我这个新手村玩家都是不太友好的。
于是乎就在近期，我终于重新拾起了微信公众号和微信小程序，以期能解决我在移动端上的一些业务需求。
二、富文本的数据展示2.1、目前存在的情况
① 我在PC端已经写好了这部分东西
② 微信公众号需加入适量的改造更好的搭配移动端
③ 微信小程序部分，我希望能够直接使用PC端的这部分数据
2.2、处理方案
① 微信公众号部分，做几个比较好的模板，然后把我的内容复制进去同时加以完善
② 小程序端还是正常的https请求，然后把PC的富文本内容渲染到微信小程序中
2.3、遇到问题
2.3.1、如何在小程序端展示富文本内容？
我们知道在PC端我们可以使用v-html来进把富文本产生的内容直接展示到网页中。
那么小程序的语法中这个操作应该怎么实现呢？
三、关于rich-text3.1、官网说明
我们在查阅微信小程序文档资料时可以发现有这样一个组件：rich-text
它的相关说明时这样的：
http://www.qianxianly.com/data/attachment/forum/20221204/1670119114436_0.jpg
3.2、使用方法
<p><pre> <code>
<rich-text nodes="{{articleInfo.content}}"></rich-text>
</code></pre></p>
Java
3.3、为什么我不使用rich-text
综合使用下来，我发现有以下我不太能接受的几点：
① 比较呆板的展示内容，一些细化的Html无法展示
② 移除了所有节点的事件（eg：之前定义的图片事件不能使用）
③ 不能友好的适配屏幕，大屏显得空洞，小屏显示不完整
四、wxParse登场4.1、关于wxParse
wxParse是目前很多小程序开发中处理显示富文本Html的一个解决方案，使用起来比较简单，门槛低且能有效解决问题。
下面就介绍一下其完整的整合步骤：
4.2、下载wxParse
我们可以打开： 找到wxParse的项目源码，直接下载压缩包。
4.3、提取有效文件
http://www.qianxianly.com/data/attachment/forum/20221204/1670119114436_1.jpg
解压源代码后，在wxParse文件夹下，可以看到有如下内容：
4.4、引入到小程序项目中
tips:这个根据个人实际情况而定，我这边是当做一个util来处理的。
4.5、在功能页面配置并使用
① 在app.wxss中引入wxParse样式
② 在功能页的js中引入wxParse.js并绑定数据
<p><pre> <code>
if (res.data.status == 200) {
// 保存文章数据
that.setData({
...
});
// 渲染html
WxParse.wxParse('article', 'html', res.data.data.content, that,5);
} else {
http://www.qianxianly.com/data/attachment/forum/20221204/1670119114436_2.jpg
Toast.fail(res.data.message);
}
</code></pre></p>
Java
③ 在功能页面引入wxParse页面并放置渲染组件
<p><pre> <code>
<view class="xa-article-content">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
</code></pre></p>
五、效果展示
不仅能适配屏幕，而且对一些图表的展示也十分友好，图片也是加上点击放大了的...
六、后记
另外公众号和小程序正在逐步完善中，欢迎提前关注入场！
页:
[1]