「wxParser」小程序插件：想在小程序中快速部署富文本？這個插件讓你一步搞定

上期，咱們在《「微信同聲傳譯」小程序插件：快速實現語音轉文字、文本翻譯、語音合成等能力》一文中介紹了「微信同聲傳譯」小程序插件的意義、做用以及應用。而在此以前，咱們還介紹過「騰訊地圖」、「騰訊視頻」、「醫院 LBS 位置服務」插件，有興趣瞭解的讀者能夠點擊「微信極客WeGeek」公衆號底部菜單「極客乾貨 - 小程序插件」瞭解。

今天咱們爲你們推薦的是一款富文本渲染插件「wxParser」，目前 wxParser 支持對通常的富文本內容包括標題、字體大小、對齊和列表等進行解析。同時也支持表格、代碼塊、圖片和音視頻等複雜富文本內容的解析。

「wxParser」插件能作什麼？

「wxParser」小程序插件由知曉雲團隊知曉雲發佈。通過對微信小程序富文本渲染引擎 wxParser 進行一層封裝，解決了使用起來太過麻煩的問題。

使用「wxParser」插件並配合富文本編輯器，能夠很方便地開發內容展現類小程序，使用知曉雲富文本編輯器效果更佳。例如「知曉課堂」小程序中的微信小程序開發課程即是使用「wxParser」插件配合知曉雲內容庫完成的。

以對在知曉雲編寫的富文本內容進行解析爲例，進入到知曉雲控制檯後，點擊左側內容菜單項，進入內容庫管理面板，新建內容，便可看見富文本編輯器。編輯的內容（左）即通過「wxParser」解析後的樣式（右）以下：

對圖片和引用的解析

對標題、加粗、斜體、下劃線和刪除線的解析

對字體大小、列表、表格和代碼塊的解析

固然，並不是必定要使用知曉雲的內容庫才能使用「wxParser」，例如你可使用百度的 UEditor 富文本編輯器編寫你的內容，而後將生成的 HTML 配置到「wxParser」便可。

如何接入「wxParser」插件？

在小程序中使用「wxParser」，你須要在項目中引入「wxParser」的 JS 庫，同時，須要在相應的 WXML、WXSS 和 JS 文件中引入「wxParser」的模板、樣式文件和編寫初始化代碼，少了任何一步，程序都不能正常工做。

而在使用「wxParser」小程序插件後，再也不須要引入「wxParser」JS 庫了，你能夠像使用普通組件同樣使用「wxParser」，只須要對組件的屬性進行配置便可，省去了引入多個庫文件的操做。

1. 申請使用插件。在「小程序管理後臺 - 設置 - 第三方服務 - 插件管理」中查找插件名稱「wxParser」（appid: wx9d4d4ffa781ff3ac），並申請使用。

2. 引入插件代碼。version 表示目前插件版本爲 0.2.1，provider 爲該插件的 AppID，而 wxparserPlugin 爲自定義的插件名稱。

"plugins": {
  "wxparserPlugin": {
    "version": "0.2.1",
    "provider": "wx9d4d4ffa781ff3ac"
  }
}

3. 在須要使用到該插件的小程序頁面的 JSON 配置文件中，作以下配置：

{
  "usingComponents": {
    "wxparser": "plugin://wxparserPlugin/wxparser"
  }}

4. 設置你的富文本內容，定義爲 richText：

Page({
  data: {
    richText: '<h1>Hello world!</h1>'
  }
})

而後在須要展現富文本內容的地方，使用「wxParser」組件，爲 rich-text 屬性賦值上你的富文本內容便可。

<wxparser rich-text="{{richText}}" />

同時，插件也提供了 bind:tapImg 和 bind:tapImg 兩個監聽事件用於點擊圖片和連接時的自定義處理，詳細使用可參考插件的文檔。

若是你想了解更多「wxParser」插件詳情，歡迎訪問開發者社區插件版塊相應頁面（建議電腦訪問）：

🔗 https://developers.weixin.qq....

手機端用戶也能夠掃碼訪問 👇

瞭解更多小程序開發相關內容，歡迎微信掃描下方二維碼關注 「微信極客WeGeek」公衆號，共築微信生態。