微信小程序解析HTML和MARKDOWN

Towxml

Towxml 是一个可将HTML、markdown转换为WXML(WeiXin Markup Language)的渲染库。

由于微信小程序不能直接渲染HTML，因此富文本编辑器生成的HTML内容无法直接在小程序中展示。

可能是出于安全因素考虑，即使WXML文本在小程序中也是以字符串方式进行渲染。

所以……

然后……

于是，Towxml 就因此降临了。

Towxml 下载

https://github.com/sbfkcel/towxml

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

1. 克隆TOWXML到小程序根目录

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

2. 在小程序app.js中引入库

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

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

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

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

//pages/index.js
const 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
                });
            }
        });
    }
})

5. 引入对应的WXSS

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

OK，大功告成~~

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

3. 接口使用

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');

转自：https://www.jianshu.com/p/c4e819e110cb