使用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')
	    },
	}
...

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐