一、html2wxml 插件版

https://gitee.com/qwqoffice/html2wxml

申请使用注意事项

插件版本解析服务是由 QwqOffice 完成，存在不稳定因素，如对稳定性有很高的要求，请自行搭建解析服务，或在自家服务器上直接完成解析。对于有关插件版本不能使用/不能解析的提问，不作任何回答。

在这里插入图片描述

效果

在这里插入图片描述
参考
小程序富文本解析 https://github.com/icindy/wxParse

PHP移植版highlight.js https://github.com/scrivo/highlight.php

PHP编写的Markdown解析器 https://github.com/erusev/parsedown

演示

扫码打开演示小程序

在这里插入图片描述

小程序端用法

三种版本演示

三种版本演示所用的小程序源码均在demo目录中

(1) 插件版本准备

打开小程序管理后台，转到设置 - 第三方服务，点击添加插件
搜索 html2wxml ，选中并添加
添加成功
回到小程序开发环境，编辑 app.json ，添加插件声明，最新版为 1.4.0

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

在这里插入图片描述

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

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

在这里插入图片描述
基本配置就已经完成剩下的就是如何在页面上渲染使用了

因为是写好的页面数据比较多，我也是给大家标注了一下，就是声明一个空的数据去接收你的富文本字段而已

最后一步在页面上渲染使用就行
在这里插入图片描述

(2) 组件版本准备

复制整个 html2wxml-component 文件夹到小程序目录
在对应页面的 json 文件，比如首页 index.json，添加使用组件的声明，注意路径

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

(3) 模板版本准备

复制整个 html2wxml-template 文件夹到小程序目录
在对应页面的 js 文件，比如首页 index.js，添加引用声明，并使用html2wxml方法进行数据绑定，注意路径，参数分别为绑定的数据名、已解析的富文本数据、当前页面对象和容器与屏幕边缘的单边的距离

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

在对应页面的 wxml 文件，比如首页 index.wxml，添加引用模板的声明，并使用模板，注意路径和绑定的数据名

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

在对应页面的 wxss 文件，比如首页 index.wxss或app.wxss，引入样式表和你喜欢的代码高亮样式，注意路径

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

(4) 组件使用方法（仅适用于插件版本和组件版本）

属性名	类型	默认值	说明
text	String	null	要渲染的HTML或Markdown文本
json	Object	{}	已经过解析的JSON数据
type	String	html	要渲染的文本类型，可用值`html`,`markdown`,`md`
highlight	Boolean	true	是否对`pre`内文本进行代码高亮
highlightStyle	String	darcula	`pre`代码高亮样式，可用值`default`,`darcula`,`dracula`,`tomorrow`
highlightLanguages	Array	[‘html’, ‘js’, ‘css’, ‘php’]	`pre`代码高亮检测语言。
linenums	Boolean	true	是否为`pre`添加行号显示
padding	Number	5	`html2wxml`组件与屏幕边缘的单边距离，用于图片自适应
imghost	String	null	对`img`标签中`src`属性可能的相对路径进行域名补全
showLoading	Boolean	true	是否显示加载中动画
bindWxmlTagATap	Handler		点击`a`标签的回调

示例

// 将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>

服务端用法

具体用法请参考：https://github.com/qwqoffice/html2wxml
富文本的解析默认是由QwqOffice完成，存在不稳定因素，你可以自行搭建解析服务或将解析组件引入到你的项目中。

复制整个 html2wxml-php 文件夹到项目目录中
引入类文件class.ToWXML.php

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

实例化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 );

参数介绍

参数名	类型	默认值	说明
text	String		要渲染的HTML或Markdown文本
args	Array	[]	附加参数

args 参数介绍

参数名	类型	默认值	说明
type	String	html	要渲染的文本类型，可用值`html`,`markdown`,`md`
highlight	Boolean	true	是否对`pre`内文本进行代码高亮
highlight_languages	Array	[‘html’, ‘js’, ‘css’, ‘php’]	`pre`代码高亮检测语言。查看可用语言
linenums	Boolean	true	是否为`pre`添加行号显示
imghost	String	null	对`img`标签中`src`属性可能的相对路径进行域名补全
encode	Boolean	true	是否对结果进行JSON编码

二、Towxml

https://gitcode.net/mirrors/sbfkcel/towxml

https://github.com/sbfkcel/towxml

Towxml 是一个可将HTML、markdown转换为WXML(WeiXin Markup Language)的渲染库。
由于微信小程序不能直接渲染HTML，因此富文本编辑器生成的HTML内容无法直接在小程序中展示。
可能是出于安全因素考虑，即使WXML文本在小程序中也是以字符串方式进行渲染。
所以……
然后……
于是，Towxml 就因此降临了。

特色

支持代码语法高亮
使用简单
多主题动态支持
极致的中文排版优化

快速上手

git clone https://github.com/sbfkcel/towxml.git

在小程序app.js中引入库

//app.js
const Towxml = require('/towxml/main');     //引入towxml库
App({onLaunch: function () {},towxml:new Towxml()                     //创建towxml对象，供小程序页面使用
})

在小程序页面文件中引入模版

<!--pages/index.wxml--><!--引入towxml模版入口文件，并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>

在小程序对应的js中请求数据

//pages/index.jsconst app = getApp();
Page({data: {//article将用来存储towxml数据article:{}},onLoad: function () {const _ts = this;//请求markdown文件，并转换为内容wx.request({url: 'http://xxx/doc.md',header: {'content-type': 'application/x-www-form-urlencoded'},success: (res) => {//将markdown内容转换为towxml数据let data = app.towxml.toJson(res.data,'markdown');//设置文档显示主题，默认'light'data.theme = 'dark';//设置数据_ts.setData({article: data});}});}
})

引入对应的WXSS

/**pages/index.wxss**//**基础风格样式**/
@import '/towxml/style/main.wxss';/**如果页面有动态主题切换，则需要将使用到的样式全部引入**//**主题配色（浅色样式）**/
@import '/towxml/style/theme/light.wxss';/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';

OK，大功告成~~

API

如果为了追求极致的体验，建议将markdown、html转换为towxml数据的过程放在服务器上，在小程序中直接请求数据即可。

依赖环境

需要 Node.js 环境。（已经安装请忽略）

安装 towxml

npm install towxml

接口使用

const Towxml = require('towxml');
const towxml = new Towxml();//Markdown转WXML
let wxml = towxml.md2wxml('# Article title');//html转WXML
let wxml = towxml.html2wxml('<h1>Article title</h1>');//Markdown转towxml数据
let data = towxml.toJson('# Article title','markdown');//htm转towxml数据
let data = towxml.toJson('# Article title');