微信小程序富文本解析器

微信小(xiao)程序在rich-text組件后(hou)開始(shi)支持(chi)富文本(ben)解析，但需(xu)要對照(zhao)一套(tao)自(zi)定義(yi)規則(ze)的 JOSN 數(shu)據格式，API 返回(hui)的富文本(ben)需(xu)要前端做數(shu)據轉換。

這個主要是用于某些需(xu)要 API 直(zhi)接輸出富文(wen)本的(de)(de)地方。比如后端輸出title字(zi)段(duan), 但 title 字(zi)段(duan)中有加重(zhong)提(ti)示的(de)(de)幾個文(wen)字(zi)是需(xu)要標紅的(de)(de)。

這種情(qing)況下后(hou)端(duan)(duan)如果(guo)不返回(hui)富文(wen)本，前端(duan)(duan)去(qu)在小程序去(qu)處理是(shi)比較麻(ma)煩的(de)，還得定(ding)(ding)個(ge)(ge)規則(ze)，前端(duan)(duan)再寫好樣(yang)式拼接起來。如果(guo)后(hou)端(duan)(duan)直接給(gei)你返回(hui)富文(wen)本，用這個(ge)(ge)去(qu)解析可以直接搞定(ding)(ding)。

如官網給(gei)的例子：

=

如(ru)何才能將 HTML 轉為微(wei)信小程序組件支(zhi)持的(de)數據格式呢？

html2json 是一個將 HTML 解(jie)析為對應的(de) json 格式但 html2json 庫(ku)轉換出來的(de) JSON 與(yu)微(wei)信小程(cheng)序要求不(bu)一致，且不(bu)支(zhi)持解(jie)析 style，故在(zai)此庫(ku)的(de)基礎上(shang)做的(de)了擴展(zhan)與(yu)調整。

使(shi)用方法：

import html2json from 'wxapp-rich-text';
// 或者下載該倉庫
import html2json from './your/path/index.js';

const html =
  '<div id="this-id" class="this-class">sample<br/>text<h2 style="color: red;font-size:48rpx;">sample text</h2></div>';

const json = html2json(html);

this.setData({
    nodes: json,
});

目(mu)前只測試(shi)了一(yi)些簡(jian)單的例子(zi)，如下圖：