微信小程序富文本解析组件wxParse(提供码云下载地址，秒下载)_wxparse 下载

---

多读多写多记录，多学多练多思考。----------- Banana.Banuit Gang(香柚帮)

---

在做小程序文章展示模块的时候，遇到了后台管理系统中用ueditor富文本编辑器编辑并发布一片文章之后，在小程序端展示文章详情，而小程序用的是wxml,直接展示并不能解析HTML内容，解决办法有两个：

1. 利用微信小程序的组件标签<rich-text></rich-text>，但是由于只能解析少部分Html标签，像H5的article，section等标签都无法解析，还会遇到图片自适应，和内容左右边距的问题，所以用起来不是特别好。
2. 利用富文本解析组件wxParse，可以很好的解决上边的问题。

码云下载地址：https://gitee.com/likun_li/wxParse.git

文件目录

- wxParse/
  -wxParse.js(必须存在)
  -html2json.js(必须存在)
  -htmlparser.js(必须存在)
  -showdown.js(必须存在)
  -wxDiscode.js(必须存在)
  -wxParse.wxml(必须存在)
  -wxParse.wxss(必须存在)
  -emojis(可选)

使用方法

1. 下载完成之后复制wxParse整个文件夹到小程序项目的pages文件夹下边。
2. 在你的文章详情模块引入wxParse的相关js,wxss，wxml等，我的文章详情模块在pages/artical_details文件夹下

         artical_details.js中引入wxParse.js

// pages/article_details/article_details.js
var WxParse = require('../wxParse/wxParse.js');//引入wxParse.js
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    arr:[],//文章返回数组，包括标题，内容，来源，时间等
    time:''
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.request({
      url: 'http://xxx.com/index.php?g=api&m=artical&a=artical_detail',
      data: {
        artical_id: options.id
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        var time = res.data.artical.post_modified.substring(0, 10)
        /**
          * WxParse.wxParse(bindName , type, data, target,imagePadding)
          * 1.bindName绑定的数据名(必填)
          * 2.type可以为html或者md(必填)
          * 3.data为传入的具体数据(必填)
          * 4.target为Page对象,一般为this(必填)
          * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
          */
        var artical = res.data.artical.post_content;//获取文章内容
        
        WxParse.wxParse('article', 'html', artical , that, 5);//解析
       
        that.setData({
          arr: res.data.artical,
          time: time
        })
 
      }
    })
    console.log(options.id)
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

artical_details.wxss中引入wxParse.wxss

@import "../wxParse/wxParse.wxss";//引入wxParse.wxss
 
.title{
  width: 100%;
  text-align: center;
  font-size: 48rpx;
  font-weight: bold;
}
.source_box{
  display: flex;
  color: #AAA;
  font-size: 30rpx;
  box-sizing: border-box;
  padding: 20rpx 40rpx;
  margin-top: 20rpx;
}

artical_details.wxml中引入wxParse.wxml

<!-- // 引入模板 -->
<import src="../wxParse/wxParse.wxml"/>
 
<view class='details_box'>
  <view class='title'>
    {{arr.post_title}}
  </view>
  <view class='source_box'>
    <text>文章来源 : {{arr.post_source}}</text><text style='margin-left:40rpx;'>{{time}}</text>
  </view>
 
  <!-- //这里data中article为bindName -->
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
 
</view>

接下来就是展示结果

ueditor中的内容，其中包含artical,section 等标签，可以正常解析