微信小程序Markdown、HTML解析庫（支持wepy）

時間 2019-11-11

標籤微信程序 markdown html 解析支持 wepy 欄目 Markdown 简体版

原文原文鏈接

Towxml

Towxml 是一個可將HTML、Markdown轉爲微信小程序WXML(WeiXin Markup Language)的渲染庫。javascript

用於解決在微信小程序中Markdown、HTML不能直接渲染的問題。css

特點

支持代碼語法高亮
支持emoji表情
支持上標、下標、下劃線、刪除線、表格、視頻、圖片（幾乎全部html元素）……
支持typographer字符替換
多主題動態支持
極致的中文排版優化
先後端支持

截圖

如下截圖即demo目錄編譯的效果html

快速上手

1. 克隆TOWXML到小程序根目錄java

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

2. 在小程序app.js中引入庫node

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

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

<!--pages/index.wxml-->

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

4. 在小程序對應的js中請求數據github

//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. 引入對應的WXSSnpm

/**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數據的過程放在服務器上，在小程序中直接請求數據便可。後端

1. 依賴環境

須要 Node.js 環境。（已經安裝請忽略）

2. 安裝towxml

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