介紹
今天為大家帶來的是一個用於在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！
Github
https://github.com/qwqoffice/html2wxml
三種版本介紹
- 插件版本準備
1、打開小程序管理後臺，轉到設置 - 第三方服務，點擊添加插件
2、搜索 html2wxml ，選中並添加
3、添加成功
4、回到小程序開發環境，編輯 app.json ，添加插件聲明，最新版為 1.3.0
<code>"plugins": {
\t"htmltowxml": {
\t\t"version": "1.3.0",
\t\t"provider": "wxa51b9c855ae38f3c"
\t}
}/<code>5、在對應頁面的 json 文件，比如首頁 index.json，添加使用插件組件的聲明
<code> "usingComponents": {
\t"htmltowxml": "plugin://htmltowxml/view"
}/<code>- 組件版本準備
1、複製整個 html2wxml-component 文件夾到小程序目錄
2、在對應頁面的 json 文件，比如首頁 index.json，添加使用組件的聲明，注意路徑
<code> "usingComponents": {
\t"htmltowxml": "path/to/html2wxml-component/html2wxml"
} /<code>- 模板版本準備
1、複製整個 html2wxml-template 文件夾到小程序目錄
2、在對應頁面的 js 文件，比如首頁 index.js，添加引用聲明，並使用html2wxml方法進行數據綁定，注意路徑，參數分別為綁定的數據名、已解析的富文本數據、當前頁面對象和容器與屏幕邊緣的單邊的距離
<code> var html2wxml = require('path/to/html2wxml-template/html2wxml.js');
html2wxml.html2wxml('article', res.data, this, 5);/<code>3、在對應頁面的 wxml 文件，比如首頁 index.wxml，添加引用模板的聲明，並使用模板，注意路徑和綁定的數據名
<code> <import>
<template>/<code>
4、在對應頁面的 wxss 文件，比如首頁 index.wxss或app.wxss， 引入樣式表和你喜歡的代碼高亮樣式，注意路徑
<code>@import "path/to/html2wxml-template/html2wxml.wxss";
@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";/<code>
組件使用
- 示例
<code>// 將Page中的content數據作為HTML格式渲染
<htmltowxml>
// 禁用代碼高亮功能
<htmltowxml>
// 禁用代碼行號顯示功能
<htmltowxml>
// 代碼高亮樣式改為tomorrow
<htmltowxml>
// 設置代碼高亮檢測語言 (最多6個，自行搭建服務不受限制)
<htmltowxml>
// 對HTML數據中的img標籤的相對路徑補全域名
<htmltowxml>
// 禁用加載中動畫
<htmltowxml>
// 將Page中的text數據作為Markdown格式渲染
<htmltowxml>
// 直接渲染Page中的已經過解析的obj數據
<htmltowxml>/<code>
- 服務端用法
富文本的解析默認是由QwqOffice完成，存在不穩定因素，你可以自行搭建解析服務或將解析組件引入到你的項目中。
1、複製整個 html2wxml-php 文件夾到項目目錄中
2、引入類文件class.ToWXML.php
<code> include( 'path/to/html2wxml-php/class.ToWXML.php' );/<code>
3、實例化html2wxml，進行解析並輸出，示例：
<code> $towxml = new ToWXML();
$json = $towxml->towxml( 'H1標題
', array(
\t'type' => 'html',
\t'highlight' => true,
\t'linenums' => true,
\t'imghost' => null,
\t'encode' => false,
\t'highlight_languages' => array( 'html', 'js', 'php', 'css' )
) );
echo json_encode( $json, JSON_UNESCAPED_UNICODE );/<code>
可用的代碼高亮語言
閱讀更多 最美分享Coder 的文章
