當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

wxParse无法解析strong标签

發布時間：2023/12/20 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 wxParse无法解析strong标签小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天有人向我反映小程序詳情，后臺富文本加粗沒效果，測試了下，果真如此；
讓后查資料? 替換成了Parser 就解決了。小程序代碼也變小了??
?

Parser

微信小程序富文本插件

功能介紹

支持解析<style>標簽中的全局樣式（.和#兩種方式）
示例：
<style> .demo1{text-align:center; } #demo2{color:blue; } </style> <div class="demo1"><label>Hello </label><label id="demo2">World!</label> </div>
?
支持的標簽種類豐富，包括視頻、表格等
在rich-text組件的基礎上增加支持以下標簽:
標簽屬性
video src, controls, height, width
font face, color
style ?
section ?
html ?
body ?
示例：
?
圖片支持大小自適應，點擊圖片可以預覽（預覽時通過左右滑動可以查看所有圖片）
<img width="50px" src="img1.png" /> <br /> <img src="img2.jpg" />
長按a標簽可以復制鏈接（小程序不能直接打開外鏈，可以復制鏈接并通過瀏覽器打開）
<a href="https://github.com">長按復制鏈接</a>
示例：
容錯性強，穩定性高，不需要網絡請求
以下情況都可以正常解析：
 <div style="font-family:"宋體";text-align:center;">Hello</div>  <div> World</label>  <div>!
功能強大，支持無限層級，解析速度快，包大小僅約40KB

使用方法

代碼片段

下載Parser文件夾至小程序目錄

在需要引用的頁面的json文件中添加 {"usingComponents": {"Parser":"../Parser/index"} }

在需要引用的頁面的wxml文件中添加 <Parser html="{{html}}" bindparser="parser" />

在需要引用的頁面的js文件中添加 onLoad:function(){this.setData({html:'your html'}) }, parser:function(e){console.log(e); }

組件屬性：

屬性類型默認值必填說明

html	String/Object/Array	?	是	要顯示的富文本數據，具體格式見下方說明
space	String/Boolean	false	否	是否顯示連續空格，合法輸入值見下方說明
selectable	Boolean	true	否	是否允許長按復制a標簽連接
preview	Boolean	true	否	是否允許預覽圖片

html格式：
string類型：一個html字符串，例如：<div>Hello World!</div>
object類型：一個形如{ nodes:[Array],imgList:[Array] }的結構體，其中nodes數組的格式同rich-text, imgList為其中所有圖片地址的數組（回調函數bindparser的返回值就是這樣的結構體）
array類型：格式要求同rich-text（用此格式傳入預覽圖片時，將不能通過左右滑動查看所有圖片）
使用b, c方法可以節省解析的時間，提高性能
space格式（同rich-text）：
值說明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根據字體設置的空格大小
關于preview
??該屬性為true時，是通過模板的循環解析實現圖片的預覽，這可能導致在排版較為復雜（如左右排布）等時顯示不出正確的效果，此時可以將該屬性設置為{{false}}，插件會直接用rich-text組件渲染，能達到更好的排版效果。

回調函數

名稱功能說明

bindparser

在解析完成時調用（僅當傳入的html為字符串時會調用）

返回一個object, 其中nodes為解析后的節點數組，?imgList為圖片列表，該object可以在下次調用直接作為html屬性的值，節省解析的時間

后端解析

為提高頁面性能，可以在服務器端提前解析好html，該插件同樣可以在node.js中使用（只需要DomHandler.js,?Parser.js,?Tokenizer.js即可）
具有的功能：

刪除script,?head,?html,?body, 注釋等無用的標簽

將style標簽中的樣式解析到各標簽的style中，例如：

const Parser=require('./Parser.js'); var html='<style>.demo{text-align:center}</style><div class="demo">Hello World!</div>'; Parser(html).then(function(e){console.log(e) }) { "nodes": [{ "name": "div", "attrs": {"class": "demo","style": "text-align:center"}, "children": [{ "text": "Hello World!", "type": "text" }] }],"imgList": [] }

在img標簽的style中添加max-width:100%;，實現寬度自適應

將section標簽用div取代

將font標簽用label取代，并將face,?color屬性解析到style中

將a標簽的style中添加text-decoration: underline;color:#0000ff;

對于該節點下含有a,?img（preview為true時）,?video標簽的，continue的值會被設置為true（用于前端顯示）

解析完成將返回一個形如{ nodes:[Array], imgList:[Array] }結構體,其中nodes數組可以直接應用于rich-text組件，整個結構體可以直接作為Parser組件的參數

原理簡介

??該插件結合了WxParse中模板循環的方式和rich-text組件，對于節點下有img,?video,?a標簽的，使用模板循環的方式顯示，否則直接通過rich-text組件顯示，這樣既解決了WxParse中過多的標簽數（rich-text可以節省大量的標簽），層數容易不夠（對于大于20層的直接用rich-text解析，理論上可以顯示無限層級），無法解析表格，一些組件顯示格式不正確（rich-text可以解析出更好的效果）等缺點；也彌補了rich-text圖片無法預覽，無法顯示視頻，無法復制鏈接，部分標簽不支持（在解析過程中進行替換）等缺點，另外該解析腳本還減小了包的大小，提高了解析效率，通過包裝成一個自定義組件，簡單易用且功能強大。

組件GitHub 地址

https://github.com/jin-yufeng/Parser

如果你感覺有收獲，歡迎給我打賞 ———— 以激勵我輸出更多優質內容

總結

以上是生活随笔為你收集整理的wxParse无法解析strong标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。