富文字解析之微信小程式

2022-09-23 16:42:11 字數 673 閱讀 5332

微信小程式在rich-text元件後開始支援富文字解析,但需要對照一套自定義規則的 josn 資料格式,api 返回的富文字需要前端做資料轉換。

這個主要是用於某些需要 api 直接輸出富文字的地方。比如後端輸出title欄位, 但 title 欄位中有加重提示的幾個文字是需要標紅的。

這種情況下後端如果不返回富文字,前端去在小程式去處理是比較麻煩的,還得定個規則,前端再寫好樣式拼接起來。如果後端直接給你返回富文字,用這個去解析可以直接搞定。

如官網給的例子:

如何才能將 html 轉為微信小程式元件支援的資料格式呢?

html2json是乙個將 html 解析為對應的 json 格式但html2json庫轉換出來的 json 與微信小程式要求不一致,且不支援解析 style,故在此庫的基礎上做的了擴充套件與調整。

使用方法:

import html2json from 'wxapp-rich-text';

// 或者**該倉庫

import html2json from './your/path/index.js';

const html =

'sample

text

'; const json = html2json(html); this.setdata();原始碼見github:

目前只測試了一些簡單的例子,如下圖:

微信小程式 富文字解析

把wxparse放在與page同一級目錄 wxparse裡的emojis包是可要可不要的。1 在wxml中 src wxparse wxparse.wxml class wxparse is wxparse data view 2 在wxss中 import wxparse wxparse.wxss...

微信小程式 rich text富文字

nodes屬性可為array和string型別,但推薦使用array.由於string型別最終也會轉為array型別 nodes分為支援兩種節點,分別為元素節點 type node 預設為元素節點 和文字節點 type text 元素節點 name 標籤名 string 是 支援部分受信任的html...

微信小程式解析富文字的幾種方法

工作中有遇到過在小程式中需要解析後台管理系統設定的富文字內容,一,可以使用wxparse外掛程式解析html 使用方法 但是博住使用後 總是報 vm3004 1 thirdscripterror html.replace is not a function at api request succes...