-
Notifications
You must be signed in to change notification settings - Fork 323
3.0 如何使用
Fried rice edited this page Jan 13, 2020
·
11 revisions
1. 将towxml项目下载并解压至小程序项目根目录下,即(小程序/towxml
)
2. 引入库/app.js
//app.js
App({
// 引入`towxml3.0`解析方法
towxml:require('/towxml/parse')
})
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
});
}
})
app.towxml(str,type,options)
有三个参数
-
str
<必选> string,html或markdown字符串 -
type
<必选> string,需要解析的内容类型html
或markdown
-
options
<可选> object,可选参数,可以该选项设置主题
、绑定事件
、设置base
等
考虑到并不是所有人都需要用到,默认只开启部分功能,可自行构建以开启对应功能。
towxml3.0 支持以下功能:
- echarts图表,默认禁用,需自行构建以开启此功能
- LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能
- yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能
- highlight代码高亮,默认开启(默认仅开启
bash
、javascript
、json
、python
、html
、css
、php
、scss
、shell
),其它语言高亮支持需自行构建以开启
如何构建,请参考3.0 构建Towxml
echarts图表支持