作者：水水2502919973 | 来源：互联网 | 2023-08-28 17:29
TowxmlTowxml是一個可將HTML、Markdown轉為微信小順序WXML(WeiXinMarkupLanguage)的襯着庫。用於處理在微信小順序中Markdown、HT
Towxml
Towxml 是一個可將HTML、Markdown轉為微信小順序WXML(WeiXin Markup Language)的襯着庫。
用於處理在微信小順序中Markdown、HTML不能直接襯着的題目。
特徵
- 支撐代碼語法高亮
- 支撐emoji臉色
- 支撐上標、下標、下劃線、刪除線、表格、視頻、圖片（險些一切html元素）……
- 支撐typographer字符替代
- 多主題動態支撐
- 極致的中文排版優化
- 前後端支撐
截圖
以下截圖即demo目次編譯的結果
疾速上手
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. 在小順序頁面文件中引入模版
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('Article title
');
//Markdown轉towxml數據
let data = towxml.toJson('# Article title','markdown');
//htm轉towxml數據
let data = towxml.toJson('# Article title');
Demo示例
- 將
towxml/demo添加為小順序工程 - 再克隆
towxml到demo目次 - 運用小順序開發工具編譯即可
License
MIT
京公网安备 11010802041100号