第三方插件 —— Towxml

对`微信小程序`开发过程中的问题和解决方法进行总结。随时补充并更新中......
## 第三方插件

### Towxml
> **Towxml** 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。[开发文档](url)

#### 快速上手
**1. 克隆Towxml到小程序根目录**
```bash
git clone https://github.com/sbfkcel/towxml.git
```
**2. 在小程序`app.js`中引入库**
```javascript
//app.js
const Towxml = require('/towxml/main'); //引入towxml库
App({
onLaunch: function () {
},
towxml:new Towxml() //创建towxml对象，供小程序页面使用
})
```
**3. 在小程序页面文件中引入模版**
```html

```
**4. 在小程序对应的js中请求数据**
```javascript
//pages/index.js

const app = getApp();
Page({
data: {
//article将用来存储解析mardown后生成的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`格式
);

//前台初始化小程序数据（2.1.2新增，如果小程序中无相对资源需要添加`base`根地址，也无`audio`内容可无需初始化）
data = app.towxml.initData(data,{
base:'https://xxx.com/', // 需要解析的内容中相对路径的资源`base`地址
app:_ts // 传入小程序页面的`this`对象，以用于音频播放器初始化
});

//设置文档显示主题，默认'light'
data.theme = 'dark';

//设置数据
_ts.setData({
article: data
});
}
});
}
})
```
**5. 引入对应的WXSS**
```css
/**pages/index.wxss**/

/**基础风格样式**/
@import '/towxml/style/main.wxss';

/**如果页面有动态主题切换，则需要将使用到的样式全部引入**/

/**主题配色（浅色样式）**/
@import '/towxml/style/theme/light.wxss';

/**主题配色（深色样式）**/
@import '/towxml/style/theme/dark.wxss';
```
#### 事件绑定

`towxml`支持以下事件绑定，可自行根据需要为内容添加绑定事件。（不支持`bindtap`等事件简写方法）

```bash
'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'
```

```javascript
Page({
data: {
isloading: true,
article: {}
},
onLoad: function () {
const _ts = this;

//将markdown内容转换为towxml数据，交将当前页面对象传入以创建默认事件对象
let articleData = app.towxml.toJson('

', 'html');

//前台初始化小程序数据（2.1.2新增，如果小程序中无相对资源需要添加`base`根地址，也无`audio`内容可无需初始化）
articleData = app.towxml.initData(data,{
base:'https://xxx.com/', // 需要解析的内容中相对路径的资源`base`地址
app:_ts // 传入小程序页面的`this`对象，以用于音频播放器初始化
});

//自定义事件，格式为`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
});
}
})

```
### （二）原生开发
### （三）mpvue开发