小程序解析html之富文本插件wxParse

2022-08-11 11:18:59

　　近期，开发小程序时，遇到后台给我返回了一串html代码，需要我这边来解析，头疼了好久，网上找资料找了变天，终于找到wxParse，然而看到的都是针对于页面中有单个html或者固定数据的，我现在的问题是，后台给我返回许多条数据，每一条数据中都有一串html代码需要解析。

　　说到这儿，就先来说说wxParse的基本用法吧。

　　首先引入必要的文件。

　　（1）、在需要用到wxParse的js文件中引入wxParse.js文件、　

let wxParse = require("../../wxParse/wxParse.js");

　　（2）、在.wxss文件中引入wxParse.wxss文件。

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

假如现在有这样一个例子，const article = '抢7元券后，入耳式耳机只要5.6元！！安卓手机都通用的~'

　　那么在相应的js文件中就可以这样写

wxParse.wxParse('article', 'html', atricle, this,0)

　　（3）、还没完，还得在相应的.wxml文件中引入wxParse.wxml模板文件。用法如下：

<import src="../../wxParse/wxParse.wxml"></import>

// 在需要用到富文本解析的地方使用如下,此处data中的article为绑定的数据名
<template is="wxParse" data="{{wxParseData:article.nodes}}"></template>

　　此处盗用一张图。

　　现在，回到博文开头说的问题，如何解析多条html代码，这时候可能需要用到wxParse插件中的另一个文件，即html2json.js文件。

　　将上面的第一步换成如下：

let wxParse = require("../../wxParse/html2json.js");

　　例如现在有这样一组数据：

　　　　　let goods_list = [
            {
                "reward_price": 0.35,
        　　　　　"self_reward_price": 0.52,
        　　　　　"dto_desc": "我来推荐",
        　　　　　"mall_des": "<p>进店铺领<font color=\"red\">5</font>元，无门槛</p>"
            }, {
                "reward_price": 0.35,
        　　　　　"self_reward_price": 0.52,
        　　　　　"dto_desc": "我来推荐",
        　　　　　"mall_des": "<p>进店铺领<font color=\"red\">5</font>元，无门槛</p>"
            }, {
                "reward_price": 0.35,
        　　　　　"self_reward_price": 0.52,
        　　　　　"dto_desc": "我来推荐",
        　　　　　"mall_des": "<p>进店铺领<font color=\"red\">5</font>元，无门槛</p>"
            }
        ]

　　这里我的做法是，先初始化一个空数组arr,用来存放后面需要解析的富文本。具体做法是：

let arr = []
let curPage = this.data.pageNum - 1     // pageNum表示当前页码，从1开始。每次获取完数据不要忘了将pageNum + 1
goods_list.forEach(function (item, index) {
   arr[i] = wxParse.html2json(item.mall_des, 'returnData')
})

this.setData({
   ['mallDesList[' + curPage + ']']: malldes_list,
　　['productList[' + curPage + ']']: goods_list,
　　pageNum: this.data.pageNum + 1     
})

　　现在上面的第3条就可以这样来写：

// 列表页也涉及到分页，使用的二维数组。所以需要使用wx:for嵌套，在需要用到富文本解析的地方用上template模板。
<block wx:for="{{productList}}" wx:for-item="arrItem" wx:for-index="arrIndex" wx:key="arrIndex">
    <block wx:for="{{arrItem}}" wx:for-item="item" wx:for-index="index" wx:key="item.goods_id">
        <template is="wxParse" data="{{wxParseData:mallDesList[arrIndex][index].nodes}}"></template>
    </block>
</block>

　　啰嗦了半天，搞定了。

　　最后，发下我的wxParse包含了那些文件：

　　附上官网：https://github.com/icindy/wxParse

码农公寓

相关文章