Towxml 3.0让微信小程序支持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 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. 为什么需要构建,不能直接使用吗?
也可以直接使用,不过可能会存在一些问题,或有一些无用的文件。所以建议还是自行构建出自己想要的版本库。
Towxml 3.0让微信小程序支持LaTex数学公式及yuml流程图相关推荐
- yuml 保存为图片_Towxml 3.0 让微信小程序支持 LaTex 数学公式及 yuml 流程图
Towxml 3.0 让微信小程序支持 LaTex 数学公式及 yuml 流程图 Towxml 是一个让小程序可以解析 Markdown,html 的解析库. 能够使小程序完美解析 Markdown ...
- 设置微信小程序支持npm(解决微信小程序npm构建时提示“没有找到可以构建的NPM包,请确认需要参与构建的npm都在miniprogramroot目录内,或配置project...”错误)的方法
提示:通过微信开发者工具创建小程序工程后,默认是不开启npm的,需要修改小程序npm配置参数,否则将会提示"没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 minipro ...
- PHP —— 用 ThinkPHP5.0 实现微信小程序登陆
PHP -- 用 ThinkPHP5.0 实现微信小程序登陆 <工欲善其事,必先利其器> 大家好,之前学习了 原生 PHP 和框架,今天我们运用框架 TP5.0 来实现一下微信小程序的用户 ...
- plsql developer无监听程序_微信小程序支持分享到朋友圈啦!技术解读跟我来
千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验. 首先,我们看一下官方文档的描述,解读一下小程序分享 ...
- php与ipa接口登录验证失败,thinkPHP5.0开发微信小程序登录接口signature验证失败
我用TP5开发微信小程序登录接口的时候,在校验签名signature那遇到了个坑,一直校验失败,找了很久才发现 原因是:tp的input方法会自动转移html字符,比如'"'转成了 & ...
- android微信小程序支持横屏,微信最新内测版本:小程序支持横屏使用!
原标题:微信最新内测版本:小程序支持横屏使用! 打开百度搜索小程序横屏,你会看到满屏的网友提问是否能横屏?怎么操作能横屏? 当然不能. 不过,在8月30日,微信微信团队对外发布了iOS微信最新众测版本 ...
- android微信小程序支持横屏,微信小程序关于横屏存在的一些问题
微信小程序关于横屏存在的一些问题 最近新的项目中涉及到小程序通过webview跳转h5时切换横竖屏的需求,在项目正式开工的时候我提前进行了踩坑,关于小程序在前不久添加的横屏属性,只需要在app.jso ...
- 微信小程序客服消息(带流程图)
微信小程序客服消息 功能介绍 调用客服消息接口发送客服消息 填写消息推送配置 网页版客服工具与移动端小程序客服工具 使用说明(后台接入消息服务) 一.在页面使用客服消息 二.后台接入消息服务 三.接收 ...
- 简洁UI好玩的文字转换emoji表情微信小程序支持句子词语转换_源码
介绍: 支持自定义文字输入,支持随机切换,支持句子转换: 用emoji来做暗语啥的是不是很刺激,反正至于怎么玩就看各位的脑洞了~~ 这款小程序安装方法简单,无需服务器域名与合法域名!! 直接使用微信开 ...
最新文章
- 红外防水摄像机相关配件选购小窍门
- 研究生报考苏州大学计算机科学与技术,【图片】18年苏州大学计算机872考研经验分享【苏州大学研究生吧】_百度贴吧...
- SQL语言学习(五)流程控制函数学习
- Java黑皮书课后题第4章:*4.23(金融应用:酬金)编写一个程序,读取下面信息,然后输出一个酬金声明
- Jmeter 通过json Extracted 来获取 指定的值的id
- 《软件项目管理(第二版)》期末考试试题总结/复习资料
- 12) 十分钟学会android--APP通信传递消息之简单数据传输
- html提交列表编号自动生成目录,解析 Html 自动生成目录 TOC 的相关代码
- 全议程公布丨八大理由让你畅游2021数据技术嘉年华
- JavaScript萌新基础
- 数据分析师熬夜整理:最全「零售业」数据指标和使用技巧
- 如何避免程序员的大脑超载?
- 有关Silverlight3.0在浏览器外运行的问题
- css修改layui的下拉框样式 js_layui的安装以及简单操作
- XML语言学习2---方立勋教程DTD
- 拼多多爆款选择要分析哪些数据?如何采集这些爆款到拼多多?
- VUE post请求下载文件
- 文献html阅读器,强烈推荐文献阅读器CAJviewer——大学生阅读文献、论文必备工具!!!...
- QQ交谈小图标代码html,仿qq聊天工具设计源码及说明
- java int过长_java - 为什么长,不是int否则限制时间超过 - SO中文参考 - www.soinside.com...
热门文章
- 为什么mysql删除不了数据库_关于无法删除数据库 'xxx',因为该数据库当前正在使用...
- GeoPandas入门 | 04-空间连接
- 【车道线识别】基于matlab hough变换道路检测直线检测【含Matlab源码 2074期】
- n9 android,Meego变安卓,诺基亚 N9 (2020) 5G概念手机亮相
- 妈妈辈们都在用的短视频社区长啥样
- 天遥G10五模全智能鼠标强化软件 V14.12V02正式版
- 如何选购汽车线束检测仪,需要考虑哪些因素
- windows操作系统未启用登录失败处理功能引发的威胁
- CIO最关心的5 大技术
- 微信公众平台与百度轻应用使用对比