因为小程序目前是没有自带富文本解析的功能,所以借助wxparse插件进行富文本的解析,其实还是很常用的,至少到目前为止,做过的小程序设计到项目详情的时候,都用到了wxparse进行富文本解析.
关于为什么wxparse解析后的bindName可以直接使用,是因为在wxparse解析的文件中,会将解析后的bindName存储在data中,可以通过this.data.bindName拿到解析后的文本内容
一.初步用法
- 在github上下载wxparse文件包到本地
- 在app.wxss中引入全局富文本解析样式(以免在用到的地方再次引入样式)
- 在js文件中定义wxparse ,同时在js文件中进行需要解析的内容的解析操作
const WxParse = require('../../../wxParse/wxParse.js'); // 富文本解析 const rich = res.data.articleContent WxParse.wxParse('rich', 'html', rich, me, 0); - 在页面的使用,引入富文本解析模板,然后使用该模板
<import src="../../../wxParse/wxParse.wxml" /><!-- 使用时直接传入在js中解析后的名,可以不使用setData方法进行存储--><template is="wxParse" data="{{wxParseData:rich.nodes}}"/>二.当需要解析的内容在微信小程序模板中的时候
(当模板中的内容有事件的时候,事件的js需要写在所用到该模板的页面的js中)
- 前期的内容解析同初步使用
- 因为模板中的数据使用都是通过外部传入,所以,此时,将解析后的名字直接传入模板
<template is="competition-message" data="{{backGround}}"></template>3.在模板中引入富文本解析的模板,然后在接受传入数据的地方进行富文本解析
<import src="../wxParse/wxParse.wxml" /><template name="competition-message"><template is="wxParse" data="{{wxParseData:backGround.nodes}}" /></template>三.当需要解析的内容在模板中,同时需要循环输出的时候
这里有两种方式,1是使用wxparse解析的多数据解析功能(因为使用多数据解析的时候,会全部解析,导致每一个循环都是相同的内容,这…后来不想解决,就选择换一种方式了),但是在本次的实例中选择了另外一种处理方法
实际需求:用户回复评论的展示
实际开发:使用微信小程序模板,循环输出用户评论
实际返回数据类型:如图(返回的所有评论为一个数组,数组的每一个元素为每一个用户的相关信息,数组)
实际解决办法:
- 遍历请求回来的列表,取出每一个对想的content属性,将每一个content属性进行wxparse解析
- 将已经解析的content属性直接赋值,覆盖原本的content属性
res.list.forEach(function (item) { let content= item.content; WxParse.wxParse('content', 'html', content, me); item.content = me.data.content; })3.在模板使用的地方
<template name="competition-circle"> <block wx:for="{{articleList}}" wx:key="{{index}}" wx:if="{{allArticle}}"><template is="wxParse" data="{{wxParseData:item.content.nodes}}" /> </block></template>
