Towxml 是一个让小程序能够解析 Markdown、HTML 的解析库。可能使小程序完满解析 Markdown 内容。
依据用户的反馈和小程序提供的 API 对 Towxml 进行了实现的重写。陆续间断地经验了近半年,终于迎来了一个新的大版本。
新版本较之前解析速度 更快 ,体积也 更小 ,并且反对 有限层级 的内容。
同时也依据局部用户的反馈减少了一些新性能。对微信小程序的 Markdown 及 Html 内容解析反对更加欠缺。
我的项目地址:https://github.com/sbfkcel/towxml
次要减少的有:
- 反对 echarts 图表(3.0+)✨
- 反对 LaTex 数学公式(3.0+)✨
- 反对 yuml 流程图(3.0+)✨
- 反对按需构建(3.0+)✨
Demo 截图
如何应用?
Towxml 3.0 应用有以下几个步骤。
首先,须要构建 Towxml
-
克隆我的项目到本地
git clone https://github.com/sbfkcel/towxml.git
-
装置构建依赖
npm install
或yarn
-
编辑配置文件
towxml/config.js
- 依据自行须要,仅保留你须要的性能即可(配置中有具体正文)
- 运行
npm run build
或yarn run build
即可
新构建进去的文件会保留在你桌面上的
towxml
目录,须要将此目录复制到你的小程序我的项目中去
开始应用
将构建进去的 towxml
并解压至小程序我的项目根目录下,即(小程序 /towxml
)
引入库/app.js
//app.js
App({
// 引入 `towxml3.0` 解析办法
towxml:require('/towxml/index')
})
在页面配置文件中引入 towxml 组件 /pages/index/index.json
{
"usingComponents": {"towxml":"/towxml/towxml"}
}
在页面中插入组件/pages/index/index.wxml
<!--index.wxml-->
<view class="container">
<towxml nodes="{{article}}"/>
</view>
解析内容并应用/pages/index/index.js
// 获取利用实例
const app = getApp();
Page({
data: {
isLoading: true, // 判断是否尚在加载中
article: {} // 内容数据},
onLoad: function () {
let result = app.towxml(`# Markdown`,'markdown',{
base:'https://xxx.com', // 绝对资源的 base 门路
theme:'dark', // 主题,默认 `light`
events:{ // 为元素绑定的事件办法
tap:(e)=>{console.log('tap',e);
}
}
});
// 更新解析数据
this.setData({
article:result,
isLoading: false
});
}
})
API
app.towxml(str,type,options)
有三个参数
str
< 必选 > string,html 或 markdown 字符串type
< 必选 > string,须要解析的内容类型html
或markdown
options
< 可选 > object,可选参数,能够该选项设置主题
、绑定事件
、设置 base
等
FAQ
1. 为什么抉择 yuml 作为流程图?
yuml 绝对比 uml 来说有灵便的图形定制形式,且解析速度更快。
2. echarts 所有图表都反对吗?
思考到库体积的问题,Towxml3.0 默认集成的 echarts 仅反对 柱状图
、 折线图
、 饼图
,如需其它图表可 自行定制。
3. 为什么须要构建,不能间接应用吗?
也能够间接应用,不过可能会存在一些问题,或有一些无用的文件。所以倡议还是自行构建出本人想要的版本库。