wxParser 插件更新，讓你在小程序中更快速更完美部署富文本

做者：知曉雲 - 小程序開發快人一步

wxParser 小程序插件時隔一年終於更新了。此次更新主要針對在 gitthub 上同窗們提出的 issue 進行一些特性的更新，更新後的 wxParser 將支持更多可配置項，讓富文本更完美地在小程序端顯示。

新特性：

• image-lazy-load 屬性，支持給全部圖片設置懶加載；
• image-preview 屬性設置圖片是否支持點擊放大，默認 true，點擊放大；
• bindImgLoad 事件，監聽小程序 image 標籤的 bindload ，即圖片加載完成的事件；
• 組件生命週期的 ready, attached, detached 的監聽事件，通 bind:ready,bind:attached, bind:detached 進行監聽；
• 支持外掛 class，能夠在 wxss 文件給富文本內容添加自定義樣式。

插件能作什麼？

「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.3.0，provider 爲該插件的 AppID，而 wxparserPlugin 爲自定義的插件名稱。

"plugins": {
  "wxparserPlugin": {
    "version": "0.3.0",
    "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}}" />

你是否正好有內容展現類的小程序，亦或準備開發一個？查看開發文檔，當即體驗「wxParser」小程序插件。

掃描下方二維碼，體驗文章所說起的「知曉課堂」小程序。並帶你遨遊在小程序開發的知識海洋中。