dede網(wǎng)站qq類源碼百度快照下載
towxml的使用，在微信小程序中快速將markdown格式渲染為wxml文本
- Towxml概述
- 安裝下載 Towxml
- 在小程序中使用 towxml
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進(jìn)行安裝）
git clone https://github.com/sbfkcel/towxml.git
- 對克隆的下的文件進(jìn)行依賴安裝和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中對需要進(jìn)行markdown轉(zhuǎn)換wxml的業(yè)務(wù)進(jìn)行處理解析
下面是官方給出的例子：
//獲取應(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. 頁面顯示效果
