小程序解析后台富文本
首先我们去https://github.com/icindy/wxParse下载wxParse如下图所示
在接受后台传过来的富文本没有解析的时候输出,如下图所示
接下来我们用下载好的wxParse来解析后台传过来的富文本,首先把下载好的wxParse放到小程序文件夹里面,我是放在了pages文件夹里面。
引入必要的文件到需要的解析的文件里面
//在需要使用wxParse来解析富文本的js里引入wxParse.js
var WxParse = require('../wxParse/wxParse.js');
//在需要使用wxParse来解析富文本的wxss里引入wxParse.wxss 小程序CSS不允许出现注释的记得去掉
@import "../wxParse/wxParse.wxss";
接下来就是解析后台传过来的富文本进行转译
.js
var WxParse = require('../wxParse/wxParse.js');
Page({
data: {
index:'<div style="color:#FF0000;">模拟后台传来的数据</div>'
},
onl oad: function (options) {
let that = this
let content = WxParse.wxParse('content', 'html', this.data.index, that, 5);
that.setData({
content: content
})
}
})
.wxml
<import src="../wxParse/wxParse.wxml"/><!-- 引入wxParse.wxml文件 -->
<template is="wxParse" data="{{wxParseData:content.nodes}}" /><!-- 然后才能把转译后的值输出 -->
代码少方便理解,转义后的富文本如上图所示,有什么问题欢迎评论留言,我会及时回复你的。