在开发微信小程序时需要调用我们原有网站的数据,但是一般网站的数据内容都是富文本,也就是html内容,在小程序中无法解析,所以就要把富文本转换成微信小程序能解析的文本,需要使用到一个插件就是wxParse微信小程序富文本组件。现在小程序里面自带了一个<rich-text>组件也能解析富文本,但是效果并不是很好用。所以就要采用wxParse微信小程序富文本处理插件。
一、下载wxParse微信小程序富文本处理插件
下载地址1:https://github.com/icindy/wxParse
下载地址2:https://download.csdn.net/download/qq_39339179/13779188
下载解压后如图所示,把文件wxparse复制到你的微信小程序中,放在小程序的根目录就可以
二、wxParse微信小程序富文本处理插件使用方法
2、1.在需要处理富文本的小程序 wxml 页面文件中引用 wxParse.wxml,引用方法如下
//路径根据你实际情况修改
<import src="../../../wxParse/wxParse.wxml"/>
2、2.在需要处理富文本的小程序 wxss文件中引用 wxParse.wxss,引用方法如下
//路径根据你实际情况修改
@import "../../../wxParse/wxParse.wxss";
2、3.在需要处理富文本的小程序 js文件中引用 wxParse.js,引用方法如下
//路径根据你的实际情况更改
var WxParse = require('../../../wxParse/wxParse.js');
三、在需要处理富文本的小程序 js文件中的调用api接口处添加如下代码
onLoad: function (options) {
console.log(options.id)
var that=this
wx.request({
/*api接口*/
url:'https://www.xxxx.com/api/product-arctrle.php?id='+ options.id,
success:function(res){
console.log(res.data)
that.setData({
lmlist:res.data
})
/*富文本处理代码开始*/
var body = res.data.body;
WxParse.wxParse('body','html',body,that,5);
/*富文本处理代码结束*/
}
})
},
代码注释:
var body = res.data.body; 中的body字段是指的在api中获取的文章内容值,也就是需要做富文本处理的代码块
WxParse.wxParse('body','html',body,that,5);
* 1.body绑定的数据名(必填)
* 2.html可以为html或者md(必填)
* 3.第二body为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
四、在原本调用文章内容处的调用标签改为如下调用方式
<view>
<template is="wxParse" data="{{wxParseData:body.nodes}}" />
</view>
五,如何你的文章内容中有图片,图片又是相对地址的话,就需要更改 wxParse 文件下的wxParse.wxml 代码如下 在src后添加你的后台数据域名
<template name="wxParseImg">
<image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="https://www.xxxx.com{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;"
/>
</template>