微信小順序Markdown、HTML剖析庫（支撐wepy）

2019年8月24日 140次阅读 来源: sbfkcel

Towxml

Towxml 是一個可將HTML、Markdown轉為微信小順序WXML(WeiXin Markup Language)的襯着庫。

用於處理在微信小順序中Markdown、HTML不能直接襯着的題目。

特徵

  • 支撐代碼語法高亮
  • 支撐emoji臉色
  • 支撐上標、下標、下劃線、刪除線、表格、視頻、圖片（險些一切html元素）……
  • 支撐typographer字符替代
  • 多主題動態支撐
  • 極致的中文排版優化
  • 前後端支撐

截圖

以下截圖即demo目次編譯的結果

《微信小順序Markdown、HTML剖析庫（支撐wepy）》

疾速上手

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，功德圓滿~~

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

Demo示例

  1. 將towxml/demo添加為小順序工程
  2. 再克隆towxml到demo目次
  3. 運用小順序開發工具編譯即可

License

MIT

    原文作者：sbfkcel
    原文地址: https://segmentfault.com/a/1190000014554470
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞