微信小程序解析后台返的富文本内容的方法以及优缺点

使用wxParse插件

优点：这种方式可以解析 html/markdown 两种脚本，功能很强大。

缺点：在解析富文本过程中，多次调用小程序的setData()方法，对性能有一定影响。

1.首先下载wxParse插件

我的github中的下载地址：https://github.com/swx980/wxParse.git

打开git终端（Git Bash Here），输入命令：git clone 上面的地址

使用git命令的前提是电脑上已经安装过git了哦

2.下载后把文件复制到自己的项目中

3.JS：在需要的js文件中引入（注意路径要写对哦）

// pages/zhangdetail/zhangdetail.js
const app = getApp();
const WxParse = require('../../wxParse/wxParse.js');
var api = require('../../utils/api.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWen();
  },
  getWen(){
    var that=this;
    var data = {
      actoken: api.封装的对外接口,
      service: '接口',
    };
    api.request(data, function (res) {
      console.log(res);
      WxParse.wxParse('detail', 'html', res.data.list.desc, that, 0);
    })
  },
})

4.WXML：

<!--pages/zhangdetail/zhangdetail.wxml-->
<import src="../../wxParse/wxParse.wxml" />
<view class='content'>
  <view class='text'>
    <template is="wxParse" data="{{wxParseData:detail.nodes}}"/>
  </view>
</view>

5.WXSS：根据自己的需求可在app.wxss中引入wxParse.wxss

/**app.wxss**/
@import './wxParse//wxParse.wxss';

使用小程序自带的富文本组件 rich-text

介绍：rich-text富文本组件是小程序1.4.0版本后推出来的，可以通过js脚本把html解析成一定格式的nodes

缺点：只能解析html内容；需要做兼容处理；不能给richtext设置css；图片不能很好的展示宽度

参数说明：

属性	类型	默认值	必填	说明
nodes	array/string		否	节点列表/HTML String
space	string		否	显示连续空格

1.WXML:

<rich-text nodes="{{id}}"></rich-text>

2.JS:

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    id:''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const that = this;
    let swx='
有人觉得你不够好，仅仅由于他不合适你。
好不好，是一件相对而言的工作。
你身上一定有优点，问题是，有谁会发现，有谁会赏识，有谁真的需求。
所以啊，相爱说到底，便是适宜不适宜的问题。能读懂你的人，才真正的合适你。最好的爱人，是能够包容你，赏识你和懂你。
'
    that.setData({ 
        id:swx
     })
   }
 })

3.效果图

使用小程序自带的web-view组件

介绍：web-view 是小程序1.6.4版本推出来的新组件

优点：功能很强大，可以直接显示网页内容，而且可以做 a 链接跳转。

缺点：有很多微信都低于1.6.4版本，不能使用，需要用前面介绍的两种方法做兼容处理。