uniapp markdown最佳渲染方案

使用r进行解析时,发现很多格式都不能展示

r

带有表格的页面展示如图

带有表格的页面展示如图

带有表格的页面展示如图

towxml

带有表格的页面展示如图

Towxml

uniapp 使用流程

  1. 新建个空目录,git clone https://github.com/sbfkcel/towxml.git
  2. 在下载的文件目录下安装所需依赖 npm install
  3. 构建项目 npm run build
  4. 将修改过的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)
	    },
	}
...
经验分享 程序员 微信小程序 职场和发展