首页 > 建站教程 > 小程序、公众号 >  小程序解析html——wxParse使用详解正文

小程序解析html——wxParse使用详解

由于小程序提供的RichText处理html dom过于简单,可能会出现一些样式和原文不一致的问题。所以,有时候就要特殊处理,显示富文本。而wxParse就是一个不错的选择。下面就来说说如何使用wxParse:

1、下载wxParse,wxParse官方下载地址:https://github.com/icindy/wxParse

2、将wxParse文件夹放到项目中,网上很多地方都说要和pages同级,其实同不同级都行,只要引用时,地址不要弄错了就成,下面是模板网的一个项目目录截图:

wxParse

    从目录中可以看出,它共包含:wxParse.js、wxParse.wxml、wxParse.wxss、html2json.js、htmlparser.js、showdown.js、wxDiscode.js几个文件。

3、如果你需要用到wxParse.wxss里面的样式就在你的wxss文件中引用他,否则可以不引用:
@import '../../wxParse/wxParse.js'
    注意:路径的正确、import导入的样式必须放在样式表中最前面,否则无效。

4、在需要解析html内容的页面对应的js文件里引入wxParse
var WxParse = require('../../wxParse/wxParse.js');
import WxParse from '../../wxParse/wxParse.js';
5、 解析富文本
语法格式:
WxParse.wxParse(bindName , type, data, target,imagePadding)
/* 1.bindName绑定的数据名(必填),在wxml中调用的时候会用到 bindName.nodes
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/
WxParse.wxParse('content', 'html', _html, this, 10);
6、在需要解析html内容的页面对应的wxml文件里引入wxParse
<import src="../../wxParse/wxParse.wxml"/>
7、在wxml文件中引用你解析出来的数据(这里的content就是上面提到的 bindName)
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>