weChat小程序--富文本插件wxParse的使用

痛定思痛。 2022-05-23 06:36 145阅读 0赞

昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件，但是还是不成功，我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了[wxParse-微信小程序富文本解析组件][wxParse-]。

## 特性 ##

<table style="border-spacing:0px;width:852px;text-align:center;color:rgb(51,51,51);font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun;font-size:14px;background-color:rgb(255,255,255);"> 
 <thead> 
  <tr> 
   <th style="margin:0px;vertical-align:middle;">支持特性</th> 
   <th style="margin:0px;vertical-align:middle;">实验功能</th> 
   <th style="margin:0px;vertical-align:middle;">ToDo</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] HTML的大部分标签解析</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">[x] 小表情emjio</td> 
   <td style="margin:0px;vertical-align:middle;">[x] table标签</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 内联style</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">[x] a标签跳转</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 标签Class</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">[x] 动态添加</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 图片自适应规则</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 图片多图片预览</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 模版层级可扩展性</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 多数据循环方式</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
  <tr> 
   <td style="margin:0px;vertical-align:middle;"> 
    <ul style="list-style:none;"> 
     <li>[x] 内联style</li> 
    </ul></td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
   <td style="margin:0px;vertical-align:middle;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 基本使用方法 ##

*  Copy文件夹`wxParse`   
    ![这里写图片描述][SouthEast]

- wxParse/   -wxParse.js(必须存在)   -html2json.js(必须存在)   -htmlparser.js(必须存在)   -showdown.js(必须存在)   -wxDiscode.js(必须存在)   -wxParse.wxml(必须存在)   -wxParse.wxss(必须存在)   -emojis(可选)

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

*  引入必要文件

//在使用的View中引入WxParse模块
    var WxParse = require('../../wxParse/wxParse.js');

*  1
 *  2

//在使用的Wxss中引入WxParse.css,可以在app.wxss
    @import "/wxParse/wxParse.wxss";

*  1
 *  2

*  数据绑定

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

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11

*  模版引用

// 引入模板 <import src="你的路径/wxParse/wxParse.wxml"/> //这里data中article为bindName <template is="wxParse" data="{ { wxParseData:article.nodes}}"/>

*  1
 *  2
 *  3
 *  4

## 注意点 ##

在上面的基本使用里面在.js文件和.wxml文件里面出现的article这个是两个文件里面是一样的。但是article是js文件里面的一个变量是可以变的，只要保证js文件和wxml文件里面变量名一致即可。

## 实例 ##

### 实例结构 ###

![这里写图片描述][SouthEast 1]   
page页面是测试页面。

### wxml文件 ###

*  1
 *  2
 *  3
 *  4
 *  5

### wxss文件 ###

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

*  1

### js文件 ###

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14

## 效果图 ##

![这里写图片描述][SouthEast 2]

## 总结 ##

这里使用这个插件并不难。但是需要主要data里面的那个变量article(这个名字是可变)在几个位置是一样的。需要看看[小程序-template][-template]。

转自:[https://blog.csdn.net/zhuming3834/article/details/74280038][https_blog.csdn.net_zhuming3834_article_details_74280038]

[wxParse-]: https://github.com/icindy/wxParse
[SouthEast]: /images/20220523/e1639516d1e4484183e1c2ef0ba2dd9c.png
[SouthEast 1]: /images/20220523/31d29d0109c3481a83a28bb3b9636db5.png
[SouthEast 2]: /images/20220523/925681ea4fe040079d6f34bbc72f0ae1.png
[-template]: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html
[https_blog.csdn.net_zhuming3834_article_details_74280038]: https://blog.csdn.net/zhuming3834/article/details/74280038