富文本解析-微信小程序 rich-text 組件

renweihub 發(fā)布于2019-08-23 11:31 / 3541人閱讀

摘要：微信小程序富文本解析器微信小程序在組件后開始支持富文本解析，但需要對照一套自定義規(guī)則的數(shù)據(jù)格式，返回的富文本需要前端做數(shù)據(jù)轉(zhuǎn)換。

微信小程序富文本解析器

微信小程序在rich-text組件后開始支持富文本解析，但需要對照一套自定義規(guī)則的 JOSN 數(shù)據(jù)格式，API 返回的富文本需要前端做數(shù)據(jù)轉(zhuǎn)換。

這個主要是用于某些需要 API 直接輸出富文本的地方。比如后端輸出title字段, 但 title 字段中有加重提示的幾個文字是需要標(biāo)紅的。

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

如官網(wǎng)給的例子：

如何才能將 HTML 轉(zhuǎn)為微信小程序組件支持的數(shù)據(jù)格式呢？

html2json 是一個將 HTML 解析為對應(yīng)的 json 格式但 html2json 庫轉(zhuǎn)換出來的 JSON 與微信小程序要求不一致，且不支持解析 style，故在此庫的基礎(chǔ)上做的了擴(kuò)展與調(diào)整。

使用方法：

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

const html =
  "sample
textsample text";

const json = html2json(html);

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

源碼見Github: https://github.com/treadpit/w...

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

云服務(wù)器 GPU云服務(wù)器微信小程序組件微信小程序支付微信小程序部署微信小程序搭建

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97065.html

相關(guān)文章

小程序rich-text對富文本支持方案

摘要：小程序富文本解析目前小程序使用比較多的富文本方案一個是小程序自帶的組件，一個是。使用方法文殊林舍山房由麗江鉑爾曼度假酒店余明金老師設(shè)計(jì)，是麗江古城的網(wǎng)紅民宿，年被評為全國家最美民宿，以及年最值得睡的張床。小程序富文本解析目前小程序使用比較多的富文本方案一個是小程序自帶的rich-text組件，一個是wxPrase。 wxPrase原理是把原有的html標(biāo)簽全部解析成小程序的組件，這...

William_Sang 2019-08-29 17:21 評論0 收藏0
小程序rich-text對富文本支持方案

摘要：小程序富文本解析目前小程序使用比較多的富文本方案一個是小程序自帶的組件，一個是。使用方法文殊林舍山房由麗江鉑爾曼度假酒店余明金老師設(shè)計(jì)，是麗江古城的網(wǎng)紅民宿，年被評為全國家最美民宿，以及年最值得睡的張床。小程序富文本解析目前小程序使用比較多的富文本方案一個是小程序自帶的rich-text組件，一個是wxPrase。 wxPrase原理是把原有的html標(biāo)簽全部解析成小程序的組件，這...

keelii 2019-08-26 13:25 評論0 收藏0
微信小程序富文本解析wxParse Alpha0.1-支持HTML及markdown解析

摘要：本項(xiàng)目由微信小程序開發(fā)論壇會員開發(fā)原文地址垂直微信小程序開發(fā)交流社區(qū)加載慢，等等微信小程序富文本解析自定義組件，支持及解析可能是第一個微信小程序富文本解析組件代碼庫地址示例版使用地址現(xiàn)狀版本號目前還不太適合直接使用目前項(xiàng)目不本項(xiàng)目由微信小程序開發(fā)論壇-WeAppDev http://weappdev.com/ 會員開發(fā) 原文地址: http://weappdev.com/t/wxp...

daydream 2019-08-01 15:51 評論0 收藏0
wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析

摘要：信息版本號歷史版本號具體代碼請查看倉庫分支地址解決問題微信小程序富文本解析組件詳述因?yàn)槲⑿判〕绦驔]有提供等解析，原展示類文本沒有辦法圖文并茂的原生展示，主要目的就是彌補(bǔ)富文本解析空缺的組件，歡迎使用反饋開發(fā)信息微信小程序開發(fā)論壇垂直微信小程 wxParse信息版本號0.1 歷史版本號0.2 具體代碼請查看倉庫分支V1 github地址: https://github.com/ici...

cucumber 2019-08-29 11:32 評論0 收藏0
wxParse version0.2-更好的微信小程序富文本HTML及Markdown解析

摘要：信息版本號歷史版本號具體代碼請查看倉庫分支地址解決問題微信小程序富文本解析組件詳述因?yàn)槲⑿判〕绦驔]有提供等解析，原展示類文本沒有辦法圖文并茂的原生展示，主要目的就是彌補(bǔ)富文本解析空缺的組件，歡迎使用反饋開發(fā)信息微信小程序開發(fā)論壇垂直微信小程 wxParse信息版本號0.1 歷史版本號0.2 具體代碼請查看倉庫分支V1 github地址: https://github.com/ici...

zhonghanwen 2019-08-01 15:58 評論0 收藏0