微信小程序解析HTML和MARKDOWN

Posted 2023-04-14

参考技术A

Towxml 是一个可将 html 、 markdown 转换为 WXML (WeiXin Markup Language)的渲染库。

由于微信小程序不能直接渲染 HTML ，因此富文本编辑器生成的 HTML 内容无法直接在小程序中展示。

可能是出于安全因素考虑，即使 WXML 文本在小程序中也是以字符串方式进行渲染。

所以……

然后……

于是， Towxml 就因此降临了。

https://github.com/sbfkcel/towxml

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

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

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

4. 在小程序对应的js中请求数据

5. 引入对应的WXSS

OK，大功告成~~

如果为了追求极致的体验，建议将 markdown 、 html 转换为 towxml 数据的过程放在服务器上，在小程序中直接请求数据即可。

1. 依赖环境

需要 Node.js 环境。（已经安装请忽略）

2. 安装 towxml

3. 接口使用

MIT

uniapp markdown最佳渲染方案

使用rich-text、uparse、v-html进行解析时，发现很多格式都不能展示

rich-text

带有表格的页面展示如图

uparse

带有表格的页面展示如图

v-html

带有表格的页面展示如图

 

towxml

带有表格的页面展示如图

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

Towxml

官方文档

uniapp 使用流程

1. 新建个空目录，git clone https://github.com/sbfkcel/towxml.git
2. 在下载的文件目录下安装所需依赖 npm install
3. 构建项目 npm run build
4. 修改dist文件夹下decode.json为下截图，图一
5. 将修改过的dist文件夹复制到uniapp工程的static目录下，并修改名字为towxml，图二

 图一

 图二

该文件有300多KB，可以根据自己的需求删留来腾空间。 接下来就可以在组件中引入使用

<template>
	<view>
		<towxml :nodes="productInfoItemContent"/>
	</view>
</template>
<script>
	import towxml from '@/static/towxml/towxml'
	
	export default {
		components: {
			towxml
		},
		data() {
			return {
  			  	towxmlFunc:require('@/static/towxml/index.js'),
				productInfoItemContent:'',
			};
		},
		onLoad(options) {
		    let str =  uni.getStorageSync('itemDetail ')
		    this.itemDetail = JSON.parse(str)
		    this.productInfoItemContent = this.towxmlFunc(this.productInfoItemContent,'markdown')
	    },
	}
...