資訊專欄INFORMATION COLUMN
摘要：小程序富文本解析目前小程序使用比較多的富文本方案一個是小程序自帶的組件，一個是。使用方法文殊林舍山房由麗江鉑爾曼度假酒店余明金老師設計，是麗江古城的網紅民宿，年被評為全國家最美民宿，以及年最值得睡的張床。
小程序富文本解析
目前小程序使用比較多的富文本方案一個是小程序自帶的rich-text組件，一個是wxPrase。
wxPrase原理是把原有的html標簽全部解析成小程序的組件，這樣無論事件可控以及擴展性都是比較好的，但是對于行內渲染和多重渲染方面表現不是很好。
微信自帶的rich-text組件剛好補足了wxPrase行內渲染和多重渲染方面表現方面的缺點，但是對于一些自定義的標簽支持度不高并且會屏蔽元素所有事件，雖然支持直接解析html字符串，但是性能沒有直接綁定json串好。
官網給的rich-text演示demo:
Page({
data: {
nodes: [{
name: "div",
attrs: {
class: "div_class",
style: "line-height: 60px; color: red;"
},
children: [{
type: "text",
text: "Hello World!"
}]
}]
},
tap() {
console.log("tap")
}
})
rich-text-parser是一個能將html字符串轉成rich-text組件可以解析的json格式，并且可以自定義擴展標簽，并且支持修改rich-text組件內部html樣式（包括img標簽）。
使用方法：
npm i rich-text-parser -S --production
import parser from "rich-text-parser"
Page({
data: {
html: `文殊林舍、山房由麗江鉑爾曼度假酒店余明金老師設計，是麗江古城的網紅民宿，2017年被評為全國100家“最美民宿”，以及2017年最值得睡的“365張床”。
兩家店均位于古城北門坡半山處，背倚青山，可俯瞰古城全景。
文殊·林舍2間房、文殊·山房6間房，共8間房。有可看麗江古城全景的景觀房，有落滿陽光的大床房，有花園院景的復式房...
房間按照五星級標準配套，科勒衛浴、鵝絨被、品牌乳膠床墊、高端洗漱用品等，提供免費洗衣機、烘干機、自助廚房等配套服務。
每個房間距離適中，為所有入住房客營造更私密舒適的空間體驗感！另房東可以提供一對一的管家服務，接受所有房客吃喝玩樂咨詢以及打折的各種便利活動！
麗江文殊設計師網紅民宿大床房
麗江文殊設計師網紅民宿大床房
麗江文殊設計師網紅雙床房
麗江文殊設計師網紅大床房（可觀古城全景）
麗江文殊設計師網紅大床房（可觀古城全景）
麗江文殊設計師網紅復式星空房（可觀古城全景）
麗江文殊設計師網紅民宿別墅東院
餐廳
公共區域
公共區域
公共區域-露臺
麗江文殊設計師網紅民宿湯池別墅西院
麗江文殊設計師網紅民宿別墅東院
門店信息：
·wifi已覆蓋、24小時熱水、吹風機、一次性用品
·電熱毯、壁爐、一對一管家服務等
商家聯系電話：
·地址：云南省麗江市古城區北門坡玄天巷26號
·電話：15099128722
`,
html2: []
},
onLoad () {
const {html} = this.data
// 定義需要解析的特殊標簽，value不填默認是div
parser.definedCustomTag({figure: "div", figcaption: ""})
const nodes = parser.getRichTextJson(html)
console.log(nodes)
this.setData({
html2: nodes.children
})
}
})
源碼參見rich-text-parser
效果圖以及數據結構：
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114267.html
摘要：小程序富文本解析目前小程序使用比較多的富文本方案一個是小程序自帶的組件，一個是。使用方法文殊林舍山房由麗江鉑爾曼度假酒店余明金老師設計，是麗江古城的網紅民宿，年被評為全國家最美民宿，以及年最值得睡的張床。 小程序富文本解析 目前小程序使用比較多的富文本方案一個是小程序自帶的rich-text組件，一個是wxPrase。 wxPrase原理是把原有的html標簽全部解析成小程序的組件，這...
摘要：微信小程序富文本解析器微信小程序在組件后開始支持富文本解析，但需要對照一套自定義規則的數據格式，返回的富文本需要前端做數據轉換。 微信小程序富文本解析器 微信小程序在rich-text組件后開始支持富文本解析，但需要對照一套自定義規則的 JOSN 數據格式，API 返回的富文本需要前端做數據轉換。 這個主要是用于某些需要 API 直接輸出富文本的地方。比如后端輸出title字段, 但 ...
摘要：可以實現在小程序下渲染內容，支持圖片表格在內的大部分特性。運行效果其他項目地址小程序推薦百科知識詞典 wemark可以實現在小程序下渲染Markdown內容，支持圖片、表格在內的大部分Markdown特性。 特性 以小程序自定義組件形式提供，可直接引入使用 支持大部分markdown標記的解析、渲染 支持代碼表格、代碼高亮、HTML視頻等特性 支持使用原生rich-text進行渲染 ...
摘要：小程序心理學辭典應用開發的心得前言最近學習小程序，用了五天工作之余從開始，到一個簡單的完成，有點心得，記錄下來。數據庫方面，小程序最近推出云開發的服務，這東西類似，這些后端云服務，而且這些第三方的服務對微信支持的也不錯。 小程序-心理學辭典應用開發的心得 前言 最近學習小程序，用了五天工作之余從0開始，到一個簡單的App完成，有點心得，記錄下來。 想法 最近在學習算法動態規劃那部分，有...
摘要：大家好，我是平頭哥聯盟的首席填坑官蘇南，今天要給大家分享的是最近公司做的一個小程序項目，過程中的一些好的總結和遇到的坑，希望能給其他攻城獅帶來些許便利，更希望能做完之后老板給你加薪今天是中秋節的第一天，假日的清晨莫名的醒的特別早，不知道為什 showImg(https://segmentfault.com/img/bVbhAYf?w=1278&h=722); 大家好，我是@IT·平...
閱讀 3114·2023-04-25 15:44
閱讀 1887·2019-08-30 13:11
閱讀 2846·2019-08-30 11:11
閱讀 3065·2019-08-29 17:21
閱讀 1316·2019-08-29 15:38
閱讀 958·2019-08-29 12:49
閱讀 1806·2019-08-28 18:19
閱讀 3232·2019-08-26 14:01
