3.0 如何使用

使用方法

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

<!--index.wxml-->
<view class="container">
  <towxml nodes="{{article}}"/>
</view>

5. 解析内容并使用/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 必选，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 支持以下功能：

• echarts图表，默认禁用，需自行构建以开启此功能
• LaTeX数学公式，默认禁用，需搭建解析服务并自行构建以开启此功能
• yuml图表，默认禁用，需要搭建解析服务并自行构建以开启此功能
• highlight代码高亮，默认开启（默认仅开启bash、javascript、json、python、html、css、php、scss、shell），其它语言高亮支持需自行构建以开启

如何构建，请参考3.0 构建Towxml