紹

今天為大家?guī)?lái)的是一個(gè)用于在微信小程序中渲染html和Markdown的富文本組件，而且支持代碼高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三種版本介紹

• 插件版本準(zhǔn)備

1、打開(kāi)小程序管理后臺(tái)，轉(zhuǎn)到設(shè)置 - 第三方服務(wù)，點(diǎn)擊添加插件

2、搜索 html2wxml ，選中并添加

3、添加成功

4、回到小程序開(kāi)發(fā)環(huán)境，編輯 app.json ，添加插件聲明，最新版為 1.3.0

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

5、在對(duì)應(yīng)頁(yè)面的 json 文件，比如首頁(yè) index.json，添加使用插件組件的聲明

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

• 組件版本準(zhǔn)備

1、復(fù)制整個(gè) html2wxml-component 文件夾到小程序目錄

2、在對(duì)應(yīng)頁(yè)面的 json 文件，比如首頁(yè) index.json，添加使用組件的聲明，注意路徑

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

• 模板版本準(zhǔn)備

1、復(fù)制整個(gè) html2wxml-template 文件夾到小程序目錄

2、在對(duì)應(yīng)頁(yè)面的 js 文件，比如首頁(yè) index.js，添加引用聲明，并使用html2wxml方法進(jìn)行數(shù)據(jù)綁定，注意路徑，參數(shù)分別為綁定的數(shù)據(jù)名、已解析的富文本數(shù)據(jù)、當(dāng)前頁(yè)面對(duì)象和容器與屏幕邊緣的單邊的距離

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

3、在對(duì)應(yīng)頁(yè)面的 wxml 文件，比如首頁(yè) index.wxml，添加引用模板的聲明，并使用模板，注意路徑和綁定的數(shù)據(jù)名

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

4、在對(duì)應(yīng)頁(yè)面的 wxss 文件，比如首頁(yè) index.wxss或app.wxss， 引入樣式表和你喜歡的代碼高亮樣式，注意路徑

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

組件使用

• 示例

// 將Page中的content數(shù)據(jù)作為HTML格式渲染
<htmltowxml text="{{content}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代碼高亮功能
<htmltowxml text="{{content}}" highlight="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用代碼行號(hào)顯示功能
<htmltowxml text="{{content}}" linenums="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 代碼高亮樣式改為tomorrow
<htmltowxml text="{{content}}" highlightStyle="tomorrow" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 設(shè)置代碼高亮檢測(cè)語(yǔ)言 (最多6個(gè)，自行搭建服務(wù)不受限制)
<htmltowxml text="{{content}}" highlightLanguages="{{['html','js','php','css','cpp','ruby']}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 對(duì)HTML數(shù)據(jù)中的img標(biāo)簽的相對(duì)路徑補(bǔ)全域名
<htmltowxml text="{{content}}" imghost="https://www.qwqoffice.com" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 禁用加載中動(dòng)畫
<htmltowxml text="{{content}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 將Page中的text數(shù)據(jù)作為Markdown格式渲染
<htmltowxml text="{{text}}" type="md" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

// 直接渲染Page中的已經(jīng)過(guò)解析的obj數(shù)據(jù)
<htmltowxml json="{{obj}}" bindWxmlTagATap="wxmlTagATap" ></htmltowxml>

• 服務(wù)端用法

富文本的解析默認(rèn)是由QwqOffice完成，存在不穩(wěn)定因素，你可以自行搭建解析服務(wù)或?qū)⒔馕鼋M件引入到你的項(xiàng)目中。

1、復(fù)制整個(gè) html2wxml-php 文件夾到項(xiàng)目目錄中

2、引入類文件class.ToWXML.php

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

3、實(shí)例化html2wxml，進(jìn)行解析并輸出，示例：

 $towxml=new ToWXML();
 $json=$towxml->towxml( '<h1>H1標(biāo)題</h1>', array(
 	'type'=> 'html',
 	'highlight'=> true,
 	'linenums'=> true,
 	'imghost'=> null,
 	'encode'=> false,
 	'highlight_languages'=> array( 'html', 'js', 'php', 'css' )
 ) );
 echo json_encode( $json, JSON_UNESCAPED_UNICODE );

可用的代碼高亮語(yǔ)言

、將富文本html內(nèi)容轉(zhuǎn)換為純文本

formatrichtext=(richtext, len=0)=> {
    let content=richtext.replace(/<.+?>/g, '');    
    content=content.replace(/ /ig, ''); /* 去除  */    
    content=content.replace(/\s/ig, ''); /* 去除空格 */
    return content;
}

2、限制展示的文本長(zhǎng)度

隨著時(shí)間的推移，瀏覽器已經(jīng)實(shí)現(xiàn)了多個(gè)剪貼板 API，并且在各種舊的和當(dāng)前的瀏覽器中寫入剪貼板而不觸發(fā)錯(cuò)誤是相當(dāng)棘手的。在每個(gè)支持以某種方式復(fù)制到剪貼板的瀏覽器中，clipboard-polyfill都會(huì)嘗試盡可能接近異步剪貼板 API。

github地址：https://github.com/lgarron/clipboard-polyfill

特別提醒：

以前有個(gè)類庫(kù)叫clipboard-js，已經(jīng)被廢棄，遷移到了clipboard-polyfill

安裝

npm install clipboard-polyfill

引入

import * as clipboard from "clipboard-polyfill"

使用