微信小程序富文本处理/wxParse微信小程序富文本处理插件使用方法

在开发微信小程序时需要调用我们原有网站的数据，但是一般网站的数据内容都是富文本，也就是html内容，在小程序中无法解析，所以就要把富文本转换成微信小程序能解析的文本，需要使用到一个插件就是wxParse微信小程序富文本组件。现在小程序里面自带了一个<rich-text>组件也能解析富文本，但是效果并不是很好用。所以就要采用wxParse微信小程序富文本处理插件。

微信小程序富文本处理

一、下载wxParse微信小程序富文本处理插件

下载地址1：https://github.com/icindy/wxParse

下载地址2：https://download.csdn.net/download/qq_39339179/13779188

下载解压后如图所示，把文件wxparse复制到你的微信小程序中，放在小程序的根目录就可以

微信小程序富文本处理/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，引用方法如下

扫描二维码关注公众号，回复： 13089434 查看本文章

//路径根据你的实际情况更改
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>

微信小程序富文本处理/wxParse微信小程序富文本处理插件使用方法

猜你喜欢