资料

微信小程序使用wxParse解析html

github:wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

使用过程

1.下载组件
点击进入github，下载wxParse组件

image.png

解压，小程序中需要的文件是wxParse文件夹

image.png

2.小程序中的使用
（1）将wxParse文件夹拷贝到小程序项目中，wxParse文件夹和page文件夹同级

image.png

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

（2）在使用组件的文件中引入wxParse【我的页面是parse页面】，要注意引入路径的正确书写

/* pages/parse/parse.wxss */
@import "/wxParse/wxParse.wxss";

// pages/parse/parse.js
var WxParse = require('../../wxParse/wxParse.js');

（3）在parse.js中的运用（主要内容）

WxParse.wxParse(bindName , type, data, target,imagePadding)

// pages/parse/parse.js
var WxParse = require('../../wxParse/wxParse.js');

Page({
  data: {
  },
 /* 生命周期函数--监听页面加载 */
  onLoad: function () {
    var Ahtml= '<div>我是HTML代码</div>';
    WxParse.wxParse('article', 'html', Ahtml, that, 5);
  }
})

（4）在parse.wxml页面中的应用

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

image.png

image.png

主要是因为这个组件，它转换的主体是字符串，如果你读取的数据为null值，则会报错

//使用wxparse组件的时候，可能会出现这个报错信息
Cannot read property 'replace' of null;at api request success callback function
TypeError: Cannot read property 'replace' of null