Towxml概述
towxml3.0 支持以下功能：
● echarts圖表，默認(rèn)禁用，需自行構(gòu)建以開啟此功能
● LaTeX數(shù)學(xué)公式，默認(rèn)禁用，需搭建解析服務(wù)并自行構(gòu)建以開啟此功能
● yuml圖表，默認(rèn)禁用，需要搭建解析服務(wù)并自行構(gòu)建以開啟此功能
● highlight代碼高亮，默認(rèn)開啟（默認(rèn)僅開啟bash、javascript、json、python、html、css、php、scss、shell），其它語言高亮支持需自行構(gòu)建以開啟
安裝下載 Towxml
- 先使用命令克隆到本地中（使用git進行安裝）
git clone https://github.com/sbfkcel/towxml.git
- 對克隆的下的文件進行依賴安裝和npm重構(gòu)
npm install # 安裝依賴
npm run build # npm 重構(gòu)
構(gòu)建完成后，會在當(dāng)前的目錄中生成一個dist目錄（按照提示找到對應(yīng)的文件夾），然后將其拷貝到微信小程序項目中（根下），重命名為towxml即可。
在小程序中使用 towxml
- 引入towxml庫到 App.js中
// app.js
App({
towxml: require('./towxml/index'),
onLaunch() {
},
})
- 在具體頁面的配置文件中引入towxml組件
注意：這里的組件路徑根據(jù)自己的頁面去找相對路徑。
{
"usingComponents": {
"towxml": "../../towxml/towxml"
}
}
- 在wxml頁面中使用towxml組件
<view class="content-info">
<towxml nodes="{{article}}"/>
</view>
- 在具體頁面的js中對需要進行markdown轉(zhuǎn)換wxml的業(yè)務(wù)進行處理解析
下面是官方給出的例子：
//獲取應(yīng)用實例
const app = getApp();
Page({
data: {
isLoading: true, // 判斷是否尚在加載中
article: {} // 內(nèi)容數(shù)據(jù)
},
onLoad: function () {
let result = app.towxml(`# Markdown`,'markdown',{
base:'https://xxx.com', // 相對資源的base路徑
theme:'dark', // 主題，默認(rèn)`light`
events:{ // 為元素綁定的事件方法
tap:(e)=>{
console.log('tap',e);
}
}
});
// 更新解析數(shù)據(jù)
this.setData({
article:result,
isLoading: false
});
}
})
其實就是調(diào)用app.towxml(str,type,options)函數(shù)：
const app = getApp(); // 應(yīng)用實例
Page({
// ....
onLoad:function(){
// 這是一個偽代碼
let 解析的結(jié)果 = app.towxml('想要被解析的數(shù)據(jù)','markdown',[options])
}
})
其中的options選項都是可選的，可以一個都不加，選項說明如下：
app.towxml(str,type,options)有三個參數(shù)
● str 必選，html或markdown字符串
● type 必選，需要解析的內(nèi)容類型html或markdown
● options [object] 可選，可以該選項設(shè)置主題、綁定事件、設(shè)置base等
○ base [string] 可選，用于指定靜態(tài)相對資源的base路徑。例如：https://xx.com/static/
○ theme [string] 可選，默認(rèn):light，用于指定主題’light’或’dark’，或其它自定義
○ events [object] 可選，用于為元素綁定事件。key為事件名稱，value則必須為一個函數(shù)。例如:{tap:e=>{console.log(e)}}
5. 頁面顯示效果文章來源：http://www.zghlxwxcb.cn/news/detail-859222.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-859222.html
到了這里，關(guān)于towxml的使用，在微信小程序中快速將markdown格式渲染為wxml文本的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
