微信小程序富文本解析（完整demo：商品详情）

示例效果图：

                                          

一、说明

           在小程序项目开发中，会遇到富文本编辑的内容，后台返回到小程序端无法解析，这时就需要一个插件来处理。

           微信小程序没有提供webview等html解析，原展示类文本没有办法图文并茂的原生展示，wxParse主要目的就是弥补富文本解析空缺的问题。

           可以这样理解：wxParse是专门解析后台给我们返回的html数据格式的数据的。

           插件下载地址：wxParse

二、使用方法

1、下载wxParse文件，将wxParse文件夹复制到自己的小程序项目中（放在与page同一级目录）

             

2、在项目文件中使用

（1）在wxml文件中引入wxParse.wxml模板，复制以下模板组件放到你要显示的富文本内容区

<!--index.wxml-->
<import src="../../wxParse/wxParse.wxml" />

<!-- 复制并插入你要显示的富文本内容区 -->
<view class="container">
  <view class='uinn'>
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
  </view>
</view>

  示例：

  

（2）在当前页的js中引入wxParse.js，并使用wxParse中的方法。注意：将后台返回的富文本编辑器内容的这个字段调出，然后赋值给data中定义的article，再将其传入wxParse的方法中

//index.js 
const WxParse = require('../../wxParse/wxParse.js');

  /* WxParse.wxParse(bindName , type, data, target,imagePadding)
   1.bindName绑定的数据名(必填)
   2.type可以为html或者md(必填)
   3.data为传入的具体数据(必填)
   4.target为Page对象,一般为this(必填)
   5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选) */

WxParse.wxParse('article', 'html', that.data.article, that, 5);

  示例：

  

（3）最后在wxss页引入wxParse.wxss

/* WxParse.wxss */
@import "/wxParse/wxParse.wxss";

  示例：

  

 

3、效果如下

                

 

按以上步骤即可实现，如果文章对你有帮助，可以点个赞