介紹

今天為大家帶來的是一個用於在微信小程式中渲染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，新增引用模板的宣告，並使用模板，注意路徑和繫結的資料名

 <import src="path/to/html2wxml-template/html2wxml.wxml" /> <template is="html2wxml" data="{{wxmlData:article}}" />

4、在對應頁面的 wxss 檔案，比如首頁 index.wxss或app.wxss， 引入樣式表和你喜歡的程式碼高亮樣式，注意路徑

@import "path/to/html2wxml-template/html2wxml.wxss";@import "path/to/html2wxml-template/highlight-styles/darcula.wxss";

元件使用示例// 將Page中的content資料作為HTML格式渲染<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 禁用程式碼高亮功能<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 禁用程式碼行號顯示功能<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 程式碼高亮樣式改為tomorrow<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 設定程式碼高亮檢測語言 (最多6個，自行搭建服務不受限制)<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 對HTML資料中的img標籤的相對路徑補全域名<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 禁用載入中動畫<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 將Page中的text資料作為Markdown格式渲染<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>// 直接渲染Page中的已經過解析的obj資料<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>服務端用法

富文字的解析預設是由QwqOffice完成，存在不穩定因素，你可以自行搭建解析服務或將解析元件引入到你的專案中。

1、複製整個 html2wxml-php 資料夾到專案目錄中

2、引入類檔案class.ToWXML.php

include( 'path/to/html2wxml-php/class.ToWXML.php' );

3、例項化html2wxml，進行解析並輸出，示例：

$towxml = new ToWXML(); $json = $towxml->towxml( '<h1>H1標題</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 );可用的程式碼高亮語言