towxml是一个把html、markdown内容解析成微信小程序可显示的库。
拥有极致的内容排版和高容错的解析。
由于小程序audio标签在部分iOS设备上不能被播放。
在2.1.0版本中，towxml支持了audio标签的解析，播放器允许自定义样式。在iOS上也能完美播放audio了。
towxml能解析绝大部分HTML标签，甚至支持代码高亮及Markdown Todo List。除此之外，还允许为解析出的内容添加事件。支持所有的小程序开发框架，例如：wepy...。
** 项目地址猛戳：**
https://github.com/sbfkcel/towxml
towxml效果截图.png
使用方法：
1. 克隆TOWXML到小程序根目录
git clone https://github.com/sbfkcel/towxml.git
2. 在小程序app.js中引入库
//app.js
const Towxml = require('/towxml/main'); //引入towxml库
App({
onLaunch: function () {
},
towxml:new Towxml() //创建towxml对象，供小程序页面使用
})
3. 在小程序页面文件中引入模版
<!--pages/index.wxml-->
<!--引入towxml模版入口文件，并使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>
4. 在小程序对应的js中请求数据
//pages/index.js
const 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`或`html`文本内容
'markdown', // `markdown`或`html`
_ts // 当前页面的`this`（2.1.0或以上的版本该参数不可省略）
);
//设置文档显示主题，默认'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';
事件绑定
towxml2.1.0支持的事件如下
'bind:touchstart',
'bind:touchmove',
'bind:touchcancel',
'bind:touchend',
'bind:tap',
# 2.1.0或以上的版本不支持以下事件（可自行修改`lib/tagsAndAttrs.js`中的事件解析部分，然后执行`node outTemplate.js`生成新的解析模版）
'bind:longpress',
'bind:longtap',
'bind:transitionend',
'bind:animationstart',
'bind:animationiteration',
'bind:animationend',
'bind:touchforcechange'
Page({
data: {
isloading: true,
article: {}
},
onLoad: function () {
const _ts = this;
//将markdown内容转换为towxml数据，交将当前页面对象传入以创建默认事件对象
let articleData = app.towxml.toJson('<div name="button" id="button1">测试一个可点击的元素</div>', 'html', _ts);
//自定义事件，格式为`event_`+`绑定类型`+`_`+`事件类型`
//例如`bind:touchstart`则为：
this['event_bind_touchstart'] = (event)=>{
console.log(event.target.dataset._el); // 打印出元素信息
};
// 给todoList添加监听事件
this['eventRun_todo_checkboxChange'] = (event)=>{
console.log(event.detail); // todoList checkbox发生change事件
};
//设置文章数据，并清除页面loading
_ts.setData({
article: articleData,
isloading: false
});
}
})
网友评论