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
中引入库
const Towxml = require('/towxml/main');
App({
onLaunch: function () {
},
towxml:new Towxml()
})
3. 在小程序页面文件中引入模版
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>
4. 在小程序对应的js中请求数据
const app = getApp();
Page({
data: {
article:{}
},
onLoad: function () {
const _ts = this;
wx.request({
url: 'http://xxx/doc.md',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: (res) => {
let data = app.towxml.toJson(res.data,'markdown');
data.theme = 'dark';
_ts.setData({
article: data
});
}
});
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
5. 引入对应的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();
let wxml = towxml.md2wxml('# Article title');
let wxml = towxml.html2wxml('<h1>Article title</h1>');
let data = towxml.toJson('# Article title','markdown');
let data = towxml.toJson('# Article title');
Demo示例
- 将
towxml/demo
添加为小程序工程 - 再克隆
towxml
到demo
目录 - 使用小程序开发工具编译即可
License
MIT