乐趣区

关于javascript:Towxml-30让微信小程序支持LaTex数学公式及yuml流程图

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 installyarn
  • 编辑配置文件towxml/config.js

    • 依据自行须要,仅保留你须要的性能即可(配置中有具体正文)
  • 运行 npm run buildyarn 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,须要解析的内容类型 htmlmarkdown
  • options < 可选 > object,可选参数,能够该选项设置 主题 绑定事件 设置 base

FAQ

1. 为什么抉择 yuml 作为流程图?
yuml 绝对比 uml 来说有灵便的图形定制形式,且解析速度更快。

2. echarts 所有图表都反对吗?
思考到库体积的问题,Towxml3.0 默认集成的 echarts 仅反对 柱状图 折线图 饼图,如需其它图表可 自行定制。

3. 为什么须要构建,不能间接应用吗?
也能够间接应用,不过可能会存在一些问题,或有一些无用的文件。所以倡议还是自行构建出本人想要的版本库。

退出移动版