分享一個(gè)小程序Markdown和HTML解析庫(kù)，支持Wepy。

項(xiàng)目github地址

Towxml

Towxml 是一個(gè)可將HTML、Markdown轉(zhuǎn)為微信小程序WXML(WeiXin Markup Language)的渲染庫(kù)。

用于解決在微信小程序中Markdown、HTML不能直接渲染的問(wèn)題。

特色

• 支持代碼語(yǔ)法高亮
• 支持emoji表情:wink:
• 支持上標(biāo)、下標(biāo)、下劃線、刪除線、表格、視頻、圖片（幾乎所有html元素）……
• 支持typographer字符替換
• 多主題動(dòng)態(tài)支持
• 極致的中文排版優(yōu)化
• 前后端支持

截圖

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

快速上手

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

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

2. 在小程序app.js中引入庫(kù)

//app.js
const Towxml = require('/towxml/main');     //引入towxml庫(kù)
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //創(chuàng)建towxml對(duì)象，供小程序頁(yè)面使用
})

3. 在小程序頁(yè)面文件中引入模版

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

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

4. 在小程序?qū)?yīng)的js中請(qǐng)求數(shù)據(jù)

//pages/index.js

const app = getApp();
Page({
    data: {
        //article將用來(lái)存儲(chǔ)towxml數(shù)據(jù)
        article:{}
    },
    onLoad: function () {
        const _ts = this;

        //請(qǐng)求markdown文件，并轉(zhuǎn)換為內(nèi)容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //將markdown內(nèi)容轉(zhuǎn)換為towxml數(shù)據(jù)
                let data = app.towxml.toJson(res.data,'markdown');

                //設(shè)置文檔顯示主題，默認(rèn)'light'
                data.theme = 'dark';

                //設(shè)置數(shù)據(jù)
                _ts.setData({
                    article: data
                });
            }
        });
    }
})

5. 引入對(duì)應(yīng)的WXSS

/**pages/index.wxss**/

/**基礎(chǔ)風(fēng)格樣式**/
@import '/towxml/style/main.wxss';


/**如果頁(yè)面有動(dòng)態(tài)主題切換，則需要將使用到的樣式全部引入**/

/**主題配色（淺色樣式）**/
@import '/towxml/style/theme/light.wxss';

/**主題配色（深色樣式）**/
@import '/towxml/style/theme/dark.wxss';

OK，大功告成~~

API

如果為了追求極致的體驗(yàn)，建議將markdown、html轉(zhuǎn)換為towxml數(shù)據(jù)的過(guò)程放在服務(wù)器上，在小程序中直接請(qǐng)求數(shù)據(jù)即可。

1. 依賴環(huán)境

需要 Node.js 環(huán)境。（已經(jīng)安裝請(qǐng)忽略）

2. 安裝towxml

npm install towxml

3. 接口使用

const Towxml = require('towxml');
const towxml = new Towxml();

//Markdown轉(zhuǎn)WXML
let wxml = towxml.md2wxml('# Article title');

//html轉(zhuǎn)WXML
let wxml = towxml.html2wxml('<h1>Article title</h1>');

//Markdown轉(zhuǎn)towxml數(shù)據(jù)
let data = towxml.toJson('# Article title','markdown');

//htm轉(zhuǎn)towxml數(shù)據(jù)
let data = towxml.toJson('# Article title');

Demo示例

1. 將towxml/demo添加為小程序工程
2. 再克隆towxml到demo目錄
3. 使用小程序開(kāi)發(fā)工具編譯即可

License

MIT