Towxml3.0使用教程

wxParse和towxml都是微信小程序中HTML和Markdown的解析组件。刚开始在项目中使用了wxParse，但是发现解析markdown的时候存在不少的问题，后来了解到towxml3.0的发布，发现towxml3.0不仅功能强大，对markdown的支持也更友好，于是将wxParse替换成了towxml

构建Towxml

1.克隆项目到本地

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

2.安装构建依赖

npm install 或 yarn

3.编辑配置文件towxml/config.js

根据自行要求，仅保留你需要的功能即可（配置中有详细注释）

运行 npm run build 或 yarn run build

新构建出来的文件会保存在你的桌面上towxml目录，将此目录复制到你的小程序项目中（需要复制到小程序顶级目录，与pages同级）

使用

1. 将构建出来的towxml并解压至小程序项目根目录下，即（小程序/towxml）

2. 在`app.js`中引入库

//app.js
App({
    // 引入`towxml3.0`解析方法
    towxml:require('/towxml/index')
})

3. 在页面配置文件中引入towxml组件 /pages/index/index.json

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

4. 在页面中插入组件/pages/index/index.wxml

<towxml nodes="{{content}}"/>

5. 解析内容并使用/pages/index/index.js

const app = getApp();
Page({
    data: {
        isLoading: true,                    // 判断是否尚在加载中
        content: {}                        // 内容数据
    },
    onLoad: function () {
        let result = app.towxml(`需要解析的内容`,'markdown',{
            base:'https://xxx.com',// 相对资源的base路径，可以省略
            theme:'dark',// 主题，默认`light`，可以省略
            events:{// 为元素绑定的事件方法，可以省略
                tap:(e)=>{
                    console.log('tap',e);
                }
            }
        });
        // 更新解析数据
        this.setData({
            content:result,
            isLoading: false
        });
    }
})

6.app.towxml(str,type,options)有三个参数

str 必选，html或markdown字符串
type 必选，需要解析的内容类型html或markdown
options [object] 可选，可以该选项设置主题、绑定事件、设置base等
base [string] 可选，用于指定静态相对资源的base路径。例如：https://xx.com/static/
theme [string] 可选，默认:light，用于指定主题'light'或'dark'，或其它自定义
events [object] 可选，用于为元素绑定事件。key为事件名称，value则必须为一个函数。例如:{tap:e=>{console.log(e)}}

说明

towxml3.0还支持很多功能，由于许多功能没有用到，所以本文不做详细说明

一切随风