towxml讓微信小程序支持html內容及代碼高亮顯示

towxml是一個把html、markdown內容解析成微信小程序可顯示的庫。 擁有極致的內容排版和高容錯的解析。

因爲小程序audio標籤在部分iOS設備上不能被播放。 在2.1.0版本中，towxml支持了audio標籤的解析，播放器容許自定義樣式。在iOS上也能完美播放audio了。

towxml能解析絕大部分HTML標籤，甚至支持代碼高亮及Markdown Todo List。除此以外，還容許爲解析出的內容添加事件。支持全部的小程序開發框架，例如：wepy...。

** 項目地址猛戳：** github.com/sbfkcel/tow…

使用方法：

1. 克隆TOWXML到小程序根目錄

git clone https://github.com/sbfkcel/towxml.git
複製代碼

2. 在小程序app.js中引入庫

//app.js
const Towxml = require('/towxml/main');     //引入towxml庫
App({
    onLaunch: function () {
    },
    towxml:new Towxml()                     //建立towxml對象，供小程序頁面使用
})
複製代碼

3. 在小程序頁面文件中引入模版

<!--pages/index.wxml-->

<!--引入towxml模版入口文件，並使用模版-->
<import src="/towxml/entry.wxml"/>
<template is="entry" data="{{...article}}"/>
複製代碼

4. 在小程序對應的js中請求數據

//pages/index.js

const app = getApp();
Page({
    data: {
        //article將用來存儲towxml數據
        article:{}
    },
    onLoad: function () {
        const _ts = this;

        //請求markdown文件，並轉換爲內容
        wx.request({
            url: 'http://xxx/doc.md',
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            success: (res) => {
                //將markdown內容轉換爲towxml數據
                let data = app.towxml.toJson(
                        res.data,               // `markdown`或`html`文本內容
                        'markdown',             // `markdown`或`html`
                        _ts                     // 當前頁面的`this`（2.1.0或以上的版本該參數不可省略）
                    );

                //設置文檔顯示主題，默認'light'
                data.theme = 'dark';

                //設置數據
                _ts.setData({
                    article: data
                });
            }
        });
    }
})
複製代碼

5. 引入對應的WXSS

/**pages/index.wxss**/

/**基礎風格樣式**/
@import '/towxml/style/main.wxss';


/**若是頁面有動態主題切換，則須要將使用到的樣式所有引入**/

/**主題配色（淺色樣式）**/
@import '/towxml/style/theme/light.wxss';

/**主題配色（深色樣式）**/
@import '/towxml/style/theme/dark.wxss';
複製代碼

事件綁定

towxml2.1.0支持的事件以下

'bind:touchstart',
'bind:touchmove',
'bind:touchcancel',
'bind:touchend',
'bind:tap',

# 2.1.0或以上的版本不支持如下事件（可自行修改`lib/tagsAndAttrs.js`中的事件解析部分，而後執行`node outTemplate.js`生成新的解析模版）
'bind:longpress',
'bind:longtap',
'bind:transitionend',
'bind:animationstart',
'bind:animationiteration',
'bind:animationend',
'bind:touchforcechange'
複製代碼

Page({
  data: {
    isloading: true,
    article: {}
  },
  onLoad: function () {
    const _ts = this;

    //將markdown內容轉換爲towxml數據，交將當前頁面對象傳入以建立默認事件對象
    let articleData = app.towxml.toJson('<div name="button" id="button1">測試一個可點擊的元素</div>', 'html', _ts);

    //自定義事件，格式爲`event_`+`綁定類型`+`_`+`事件類型`
    //例如`bind:touchstart`則爲：
    this['event_bind_touchstart'] = (event)=>{
        console.log(event.target.dataset._el);     // 打印出元素信息
    };

    // 給todoList添加監聽事件
    this['eventRun_todo_checkboxChange'] = (event)=>{
        console.log(event.detail);                 // todoList checkbox發生change事件
    };

    //設置文章數據，並清除頁面loading
    _ts.setData({
        article: articleData,
        isloading: false
    });
  }
})
複製代碼