多读多写多记录，多学多练多思考。----------- Banana.Banuit Gang(香柚帮)
在做小程序文章展示模块的时候，遇到了后台管理系统中用ueditor富文本编辑器编辑并发布一片文章之后，在小程序端展示文章详情，而小程序用的是wxml,直接展示并不能解析HTML内容，解决办法有两个：
利用微信小程序的组件标签<rich-text></rich-text>，但是由于只能解析少部分Html标签，像H5的article，section等标签都无法解析，还会遇到图片自适应，和内容左右边距的问题，所以用起来不是特别好。利用富文本解析组件wxParse，可以很好的解决上边的问题。码云下载地址：https://gitee.com/likun_li/wxParse.git
文件目录
- wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)使用方法
下载完成之后复制wxParse整个文件夹到小程序项目的pages文件夹下边。在你的文章详情模块引入wxParse的相关js,wxss，wxml等，我的文章详情模块在pages/artical_details文件夹下artical_details.js中引入wxParse.js
// pages/article_details/article_details.jsvar WxParse = require('../wxParse/wxParse.js');//引入wxParse.jsPage({ /** * 页面的初始数据 */ 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 等标签，可以正常解析