使用Towxml在微信小程序中渲染MarkDown文本

下载Towxml

从GitHub下载Towxml，GitHub - sbfkcel/towxml: 微信小程序HTML、Markdown渲染库，这里面也有详细的使用方法介绍，需要其他复杂需求的可查看里面的详解，这里只展示基本文本渲染

1.克隆到本地

git clone https://github.com/sbfkcel/towxml.git

2.安装构建依赖

npm install 或 yarn

3.按需编辑配置文件towxml/config.js

注释掉不需要的减小体积

4.打包

运行 npm run build 或 yarn run build即可

新构建出来的文件在dist目录下，将dist目录复制到你的小程序项目中并将目录名称改为towxml即可

使用Towxml

在app.js中引入Towxml

// app.js

App({
  
  towxml:require('/towxml/index'),
});

在使用页面的json文件中也要注册

  // pages/text/text.json
 {
     "usingComponents": {
       "towxml": "/towxml/towxml"
     }
   }

 

 在目标页面调用Towxml

// pages/text/text.js
const app = getApp();//实例app

Page({

    /**
     * 页面的初始数据
     * MarkDown文本要用换行符分隔，不然解析出来会堆在一行
     */
    data: {
      text:`# 这是一个一级标题
        \n ## 这是一个二级标题
        \n这是一段普通的文本内容，在 Markdown 中可以很方便地进行文本排版。
        \n- 这是一个无序列表项 1
        \n- 这是一个无序列表项 2
        \n- 这是无序列表项 2 的子项 1
        \n - 这是无序列表项 2 的子项 2
        
        \n1. 这是一个有序列表项 1
        \n2. 这是一个有序列表项 2
        
        \n这是一段包含 **加粗** 、*斜体* 和 ~~删除线~~ 的文本。`,
      article:{}
    },
    show(e){
      const {text} =this.data;
      console.log(text);//检查编译前文本
      let obj = app.towxml(text,'markdown',{
				// theme:'dark',
				events:{
					tap:e => {
						console.log('tap',e);
					},
					change:e => {
						console.log('todo',e);
					}
				}
			});

			this.setData({
				article:obj,
			});
    
      console.log(this.data.article);//检查编译后的文本
    },
   
   
})

在wxml中渲染

<!--pages/test/test.wxml--> 
<view class="box">
  <view class="text">
    {{text}}
  </view>
  <button bind:tap="show">编译</button>
  <view class="text">
    <towxml nodes="{{article}}"/>
  </view>
   
</view>

效果