绍

今天为大家带来的是一个用于在微信小程序中渲染html和Markdown的富文本组件，而且支持代码高亮，它就是html2wxml！

Github

https://github.com/qwqoffice/html2wxml

三种版本介绍

• 插件版本准备

1、打开小程序管理后台，转到设置 - 第三方服务，点击添加插件

2、搜索 html2wxml ，选中并添加

3、添加成功

4、回到小程序开发环境，编辑 app.json ，添加插件声明，最新版为 1.3.0

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

5、在对应页面的 json 文件，比如首页 index.json，添加使用插件组件的声明

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

• 组件版本准备

1、复制整个 html2wxml-component 文件夹到小程序目录

2、在对应页面的 json 文件，比如首页 index.json，添加使用组件的声明，注意路径

 "usingComponents": {
 	"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(
 	'type'=> 'html',
 	'highlight'=> true,
 	'linenums'=> true,
 	'imghost'=> null,
 	'encode'=> false,
 	'highlight_languages'=> array( 'html', 'js', 'php', 'css' )
 ) );
 echo json_encode( $json, JSON_UNESCAPED_UNICODE );

可用的代码高亮语言

、将富文本html内容转换为纯文本

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

2、限制展示的文本长度

随着时间的推移，浏览器已经实现了多个剪贴板 API，并且在各种旧的和当前的浏览器中写入剪贴板而不触发错误是相当棘手的。在每个支持以某种方式复制到剪贴板的浏览器中，clipboard-polyfill都会尝试尽可能接近异步剪贴板 API。

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

特别提醒：

以前有个类库叫clipboard-js，已经被废弃，迁移到了clipboard-polyfill

安装

npm install clipboard-polyfill

引入

import * as clipboard from "clipboard-polyfill"

使用