微信小程序支持Markdown教程

Towxml 介绍

Towxml 官网 https://github.com/sbfkcel/towxml

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

特色

Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。

支持echarts图表（3.0+）✨
支持LaTex数学公式（3.0+）✨
支持yuml流程图（3.0+）✨
支持按需构建（3.0+）✨
支持代码语法高亮、代码块行号显示
支持emoji表情😉
支持上标、下标、下划线、删除线、表格、视频、图片（几乎绝大部分html元素）……
支持typographer字符替换
支持多主题切换
支持Markdown TodoList
支持事件绑定（这样允许自行扩展功能哟，例如：点击页面中的某个元素，更新当前页面内容等…）
极致的中文排版优化
支持前后解析数据

使用教程

1、克隆项目到本地

git clone https://github.com/sbfkcel/towxml.git
复制代码

将红框的文件夹复制到你的根目录，并改名称为towxml

改名称为towxml

2、引入库到 /app.js

// app.js
App({
  // 引入`towxml3.0`解析方法
  towxml:require('/towxml/index'),
})

3、在具体页面的配置文件中引入twoxml组件

{
  "usingComponents": {
    "towxml":"/towxml/towxml"
  }
}

4、在页面中插入组件

<view class="content-info">
  <towxml nodes="{{article}}"/>
</view>

5、在js中解析内容

在js中封装一个数据请求，也可以直接写在App.js中

App({
  // 引入`towxml3.0`解析方法
  towxml:require('/towxml/index'),
    //声明一个数据请求方法
  getText: (url, callback) => {
    wx.request({
      url: url,
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: (res) => {
        if (typeof callback === 'function') {
          callback(res);
        };
      }
    });
  }
  })

然后在具体页面的js文件中处理解析内容
方式一：通过数据请求的方式

const app = getApp();
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
   article:{}
  },
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    app.getText('https://www.vvadd.com/wxml_demo/demo.txt?v=2',res => {
      let obj = app.towxml(res.data,'markdown',{
        theme:'light', //主题 dark 黑色，light白色，不填默认是light
        base:"www.xxx.com",
        events:{      //为元素绑定的事件方法
          tap:e => {
            console.log('tap',e);
          },
          change:e => {
            console.log('todo',e);
          }
        }
      });
      //更新解析数据
      this.setData({
        article:obj,
      });
    });
  },
})

方式二：不使用数据请求

// pages/content-detail/content-detail.js
const app = getApp();
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
   article:{}
  },
​
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //markdown数据源
      let content= "<h1>h1h1h1h1h1h1</h1><h2>h2h2h2h2</h2><h3>123456</h3>"
    let result = app.towxml(content,'markdown',{
       base:'www.xxx.com',             // 相对资源的base路径
       theme:'light',                   // 主题，默认`light`
      events:{                    // 为元素绑定的事件方法
           tap:(e)=>{
               console.log('h4',e);
           }
       }
   });
   // 更新解析数据
   this.setData({
      article:result
   });
  },
})

这里我是请求一个网址https://www.vvadd.com/wxml_demo/demo.txt?v=2
网址内容是一些MarkDown文本

6、显示效果