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

　　近期，開發小程序時，遇到後臺給我返回了一串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 = '<span align="center">搶<font color="red">7</font>元券後，入耳式耳機只要<font color="red">5.6</font>元！！安卓手機都通用的~</span>'

　　那麼在相應的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 malldes_list = []
let curPage = this.data.pageNum - 1     // pageNum表示當前頁碼，從1開始。每次獲取完數據不要忘了將pageNum + 1
goods_list.forEach(function (item, index) {
   malldes_list[index] = 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