E企盈营销工具技术服务商 热线:4006-838-530

微信小程序富文本解析,wxparse示例详解

E企盈直播平台营销卖货系统

因为小程序目前是没有自带富文本解析的功能,所以借助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>小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序富文本解析,wxparse示例详解
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏