When developing WeChat applet, we need to call the data of our original website, but the data content of the general website is rich text, that is, html content, which cannot be parsed in the applet, so it is necessary to convert the rich text into the WeChat applet. For the parsed text, a plug-in needs to be used, which is the wxParse WeChat applet rich text component. Now the small program comes with a <rich-text> component that can also parse rich text, but the effect is not very useful. Therefore, we must use the wxParse WeChat applet rich text processing plug-in.
1. Download the wxParse WeChat applet rich text processing plug-in
Download address 1: https://github.com/icindy/wxParse
Download link 2: https://download.csdn.net/download/qq_39339179/13779188
After downloading and decompressing as shown in the figure, copy the file wxparse to your WeChat applet and put it in the root directory of the applet.
2. How to use wxParse WeChat applet rich text processing plug-in
2. 1. Refer to wxParse.wxml in the wxml page file of the small program that needs to process rich text. The reference method is as follows
//路径根据你实际情况修改
<import src="../../../wxParse/wxParse.wxml"/>
2. 2. Quote wxParse.wxss in the wxss file of the small program that needs to process rich text, as follows
//路径根据你实际情况修改
@import "../../../wxParse/wxParse.wxss";
2. 3. Cite wxParse.js in the small program js file that needs to process rich text, the citation method is as follows
//路径根据你的实际情况更改
var WxParse = require('../../../wxParse/wxParse.js');3. Add the following code to the calling api interface in the small program js file that needs to process rich text
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);
/*富文本处理代码结束*/
}
})
},
Code comment:
The body field in var body = res.data.body; refers to the content value of the article obtained in the api, which is the code block that needs to do rich text processing
WxParse.wxParse('body','html',body,that,5);
* 1.body绑定的数据名(必填)
* 2.html可以为html或者md(必填)
* 3.第二body为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
Fourth, the calling tag at the original calling article content is changed to the following calling method
<view>
<template is="wxParse" data="{
{wxParseData:body.nodes}}" />
</view>5. If there are pictures in the content of your article, and the pictures are relative addresses, you need to change the wxParse.wxml code under the wxParse file as follows. Add your background data domain name after 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>