小程序制作笔记-使用wxParse解析html

前面有提到通过 wxParse 来解析后台传来的包含html标签的数据，今天来补充记录分享下。

首先就是下载Wxparse文件，下载地址和相关说明文档见：https://github.com/icindy/wxParse

将文件解压后，找到里面的wxParse文件夹，将它放到自己的小程序文件夹，可以放在pages文件夹外面。

然后第二步，就是引用

在你想要使用wxParse解析html数据的页面里，插入相应引用代码，首先来给js添加。在page({的上方，插入

var WxParse = require('你的路径/wxParse/wxParse.js');

然后比如你从后台得到一个数组article,然后需要解析的是里面的content数据，在你通过wx. request读取到后台数据后在success:function的{}里面，插入

var that=this;
var content= res.data.article[0].content;//这里使用0是因为content只有1个数组数据，0是取第一个
WxParse.wxParse('content', 'html', content, that, 5);
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

js部分就好了；然后是wxml内容，在需要的位置插入

<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中content为上面js中对应需要解析的数据
<template is="wxParse" data="{{wxParseData:content.nodes}}"/>

再下面就是在wxss引用wxParse的样式

@import "你的路径/wxParse/wxParse.wxss";

这样，你再重新编译刷新下小程序，你就会发现，html数据被转化成小程序对应的数据给显示出来了。

当然，小程序本身自己也有解析富文本的组件,代码如下

<view wx:for="{{article}}" wx:key="{{item.id}}">
  <rich-text nodes="{{item.content}}"></rich-text>
</view>

目前个人感觉应该wxParse好用点，当然个人喜欢，官方rich-text组件的介绍地址如下，需要的自行研究吧：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html