markdown最佳渲染方案

　　尝试了rich-text、uparse、v-html等渲染方案，总感觉差点意思，没有达到自己真正想要的效果，今天终于找到一个完美的解决方案，如果还有什么欠缺就自行优化咯。

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

官方文档

markdown最佳渲染方案/image-20211014174114953.png)

markdown最佳渲染方案/image-20211014174125557.png)

从官网上介绍来看，支持的功能还是相对比较全的。

uniapp使用流程

新建个空目录，git clone https://github.com/sbfkcel/towxml.git
在下载的文件目录下安装所需依赖 npm install
构建项目 npm run build

修改dist文件夹下decode.json为下，此处配置各个元素采用的解析方式，后面可以根据配置的路径对不满意的功能进行优化

{
	"component": true,
	"usingComponents": {
		"decode": "../towxml/decode",
		"audio-player": "../towxml/audio-player/audio-player",
		"latex": "../towxml/latex/latex",
		"table": "../towxml/table/table",
		"todogroup": "../towxml/todogroup/todogroup",
		"yuml": "../towxml/yuml/yuml",
		"img": "../towxml/img/img"
	}
}

将修改过的dist文件夹复制到uniapp工程的static目录下，并修改名字为towxml

markdown最佳渲染方案/image-20211014174505817.png)

组件中使用

<template>
	<view>
		<towxml :nodes="postContent"/>
	</view>
</template>
<script>
	import towxml from '@/static/towxml/towxml'
	
	export default {
		components: {
			towxml
		},
		data() {
			return {
  			  	towxmlFunc:require('@/static/towxml/index.js'),
				postContent:'',
			};
		},
		onLoad(options) {
		    this.postContent = '要展示的内容'
		    this.postContent = this.towxmlFunc(this.postContent,'markdown')
	    },
	}
</script>

效果图

markdown最佳渲染方案/image-20211014174808491.png)

功能优化

完成上述配置后，页面展示都没问题，不过有一个体验不好的地方在图片。上述组件中图片点击并不能放大，导致用起来会比较蹩脚。

接下来就对图片点击功能进行优化，其实也很简单，就是采用微信原生API对功能进行增强。具体优化如下：

找到img.wxml文件，这个文件中就是一个标签，在这个标签中增加单击事件bindtap="clickImg"，在对应的js文件中条件函数如下

// 增加图片点击事件
clickImg() {
    wx.previewImage({
        //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        urls: [this.data.attrs.src], 
        current: '', // 当前显示图片的http链接，默认是第一个
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
    })
},

至此，功能就已经完成。

...

00:00

uniapp(微信小程序) markdown最佳渲染方案