微信小程序富文本解析实现ueditor后台数据显示到小程序

一、使用小程序自带的富文本组件 <rich-text></rich-text>

<view>
<rich-text nodes="{{content}}"></rich-text> 
</view>

如果出现图片显示不正常，无法直接对富文本content里的img标签进行操作，那给img加个class，在app.wxss或page.wxss中指定样式。
将富文本转化为json数据类型。

      //首先通过将数据转化为json字符串
                                                                                                                    
var jsonDa = JSON.stringify(res.data.rows[0].content).replace(/<img/gi, "<img class='richImg'style='width:auto!important;height:auto!important;max-height:100%;width:100%;'");
  var newResData = JSON.parse(jsonDa);
  //得到的数据含有img标签的都有richImg类
 // console.log(newResData);

二、wxParse解决html与wxml的不匹配问题，实现富文本图片和视频显示的各项优化

它目前最好的可以转化HTML到小程序识别的插件
1.在github中下载 下载地址 https://github.com/icindy/wxParse/tree/master/wxParse
2.下载后复制到自己的小程序项目中

image.png
3.设置全局样式
/app.wxss/
@import "./wxParse/wxParse.wxss";

4.在需要调用插件的页面中引入js

image.png

var WxParse = require('../../wxParse/wxParse.js

5.使用 WxParse.wxParse方法

image.png 解析.png

   WxParse.wxParse('article', 'html', res.data.rows[0].content, this);

这样就可以使得ueditor在微信小程序上较好的发挥了。