博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序Markdown、HTML解析库(支持wepy)
阅读量:6415 次
发布时间:2019-06-23

本文共 1981 字,大约阅读时间需要 6 分钟。

Towxml

Towxml 是一个可将HTMLMarkdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。

用于解决在微信小程序中MarkdownHTML不能直接渲染的问题。

特色

  • 支持代码语法高亮
  • 支持emoji表情
  • 支持上标、下标、下划线、删除线、表格、视频、图片(几乎所有html元素)……
  • 支持typographer字符替换
  • 多主题动态支持
  • 极致的中文排版优化
  • 前后端支持

截图

以下截图即demo目录编译的效果

68747470733a2f2f63646e2e7261776769742e636f6d2f7362666b63656c2f746f77786d6c2f65646332356539372f646f63732f64656d6f2e706e67

快速上手

1. 克隆TOWXML到小程序根目录

git clone https://github.com/sbfkcel/towxml.git

2. 在小程序app.js中引入库

//app.jsconst Towxml = require('/towxml/main');     //引入towxml库App({    onLaunch: function () {    },    towxml:new Towxml()                     //创建towxml对象,供小程序页面使用})

3. 在小程序页面文件中引入模版

4. 在小程序对应的js中请求数据

//pages/index.jsconst 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

如果为了追求极致的体验,建议将markdownhtml转换为towxml数据的过程放在服务器上,在小程序中直接请求数据即可。

1. 依赖环境

需要 环境。(已经安装请忽略)

2. 安装towxml

npm install towxml

3. 接口使用

const Towxml = require('towxml');const towxml = new Towxml();//Markdown转WXMLlet wxml = towxml.md2wxml('# Article title');//html转WXMLlet wxml = towxml.html2wxml('

Article title

');//Markdown转towxml数据let data = towxml.toJson('# Article title','markdown');//htm转towxml数据let data = towxml.toJson('# Article title');

Demo示例

  1. towxml/demo添加为小程序工程
  2. 再克隆towxmldemo目录
  3. 使用小程序开发工具编译即可

License

MIT

转载地址:http://kkcra.baihongyu.com/

你可能感兴趣的文章
闪电侠 Netty 小册里的骚操作
查看>>
c# dump 程序崩溃 windbg
查看>>
Docker GitHub 网站中 Readme.md 以技术者的角度翻译
查看>>
移动开发阻止默认事件,1默认长按复制2拖动时页面默认移动
查看>>
todo
查看>>
关于BufferedInputStream和BufferedOutputStream的实现原理的理解
查看>>
啊蛋的杂货铺即将上线
查看>>
GIT相关文档
查看>>
Mybatis用注解方式来操作mysql数据库
查看>>
[Jquery] js获取浏览器滚动条距离顶端的距离
查看>>
使用border做三角形
查看>>
xhEditor 简约而不简单哦
查看>>
Linux3.10.0块IO子系统流程(3)-- SCSI策略例程
查看>>
学生管理系统~~~
查看>>
mysql 使用set names 解决乱码问题的原理
查看>>
Linux配置SVN服务器(subversion+apache)
查看>>
安卓XML布局中,常用单位的区别~
查看>>
属性动画ValueAnimator用法
查看>>
Eclipse中Ctrl+Alt+Down和Ctrl+Alt+Up不起作用
查看>>
汉堡--结对--软件工程
查看>>