介紹

今天為大家帶來的是一個用於在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三種版本介紹

• 插件版本準備

1、打開小程序管理後台，轉到設置 - 第三方服務，點擊添加插件

2、搜索 html2wxml ，選中並添加

3、添加成功

4、回到小程序開發環境，編輯 app.json ，添加插件聲明，最新版為 1.3.0

"plugins": {
 \t"htmltowxml": {
 \t\t"version": "1.3.0",
 \t\t"provider": "wxa51b9c855ae38f3c"
 \t}
 }

5、在對應頁面的 json 文件，比如首頁 index.json，添加使用插件組件的聲明

 "usingComponents": {
 \t"htmltowxml": "plugin://htmltowxml/view"
 }

• 組件版本準備

1、複製整個 html2wxml-component 文件夾到小程序目錄

2、在對應頁面的 json 文件，比如首頁 index.json，添加使用組件的聲明，注意路徑

 "usingComponents": {
 \t"htmltowxml": "path/to/html2wxml-component/html2wxml"
 } 

• 模板版本準備

1、複製整個 html2wxml-template 文件夾到小程序目錄

2、在對應頁面的 js 文件，比如首頁 index.js，添加引用聲明，並使用html2wxml方法進行數據綁定，注意路徑，參數分別為綁定的數據名、已解析的富文本數據、當前頁面對象和容器與螢幕邊緣的單邊的距離

 var html2wxml = require('path/to/html2wxml-template/html2wxml.js');
 html2wxml.html2wxml('article', res.data, this, 5);

3、在對應頁面的 wxml 文件，比如首頁 index.wxml，添加引用模板的聲明，並使用模板，注意路徑和綁定的數據名