微信小程序富文本解析两种方式

微信小程序富文本解析两种方式

---

前言 微信小程序富文本解析两种方式

一、微信小程序自有标签（rich-text）

(1)在使用页面 index.wxml 如下（示例）

(1)在使用页面 index.wxml 如下（示例）：

//noticexq.content='<p>详情...</p>'
 <rich-text nodes="{{noticexq.content}}"></rich-text>

(2)在使用页面 index.js 如下

//封装的请求方法
 api.noticexq(e).then((res)=>{
	let that = this;
	//res.result.content='<p>详情...</p>' 给img添加样式
	res.result.content=res.result.content.replace(/<img/gi, "<img style='width: 100%;height:auto;margin-top:20px;margin-bottom:20px;'  mode='widthFix'");
	this.setData({noticexq:res.result})     
})

二、插件wxParse

wxParse git地址: https://github.com/icindy/wxParse.

(1)下载并放到项目根目录

(2)在使用页面 index.wxml 如下

//articles=绑定的数据名
 <template is="wxParse" data="{{wxParseData:articles.nodes}}" />
       

(2)在使用页面 index.js 如下

//1.articles绑定数据名(必填)，2.html是html或者md(必填) 3.res.result.content为传入的具体数据(必填) 4.that一般是this 5.5为当图片自适应是左右的单一padding(默认为0,可选)
 WxParse.wxParse('articles', 'html',res.result.content, that, 5); 

有什麽写的不好的地方，请大佬多多指教