uni-app 富文本解析-小程序 – 不凡笔记 (upwqy.com)

1 引入插件 gaoyia-parse

链接：https://pan.baidu.com/s/1UusfXxHhHcoaKpUVFE2Xqw 提取码：zuqt

2 创建组件 rich-content.vue

<template>
	<view class="content">
		<u-parse :content="content" @preview="preview" @navigate="navigate" style=""/>
	</view>
</template>
<script>
	//视频和文本解析组件
	import uParse from '@/components/gaoyia-parse/parse.vue'
	export default {
		name: 'wang-content',
		components: {
			uParse
		},
		props: {
			content: {}
		},
		created() {},
		methods: {
			preview(src, e) {
				// do something
			},
			navigate(href, e) {
				// do something
			}
		}
	}
</script>

在详情页面 details.vue 中 引入组件

<wangContent :content='content'></wangContent>
import wangContent from '@/components/wang/rich-content.vue';

components: {
    wangContent
}

完整代码如下

<template>
	<view class="details">
		<wangContent :content='content'></wangContent>
	</view>
</template>

<script>
	import wangContent from '@/components/wang/rich-content.vue';
	export default {
		components: {
			wangContent
		},
		onLoad(option) {
			if (typeof option.id !== 'undefined' && option.id) {
				this.gid = option.id
			} else {
				uni.showToast({
					title: '缺少商品id',
					icon: 'none'
				})
				uni.navigateBack({
					delta: 1
				})
				return false
			}
			this.getInfo()
		},
		data() {
			return {
				content:''
			}
		},
		methods: {
			getInfo(){
				var params = {
					goods_id:this.gid
				}
				this.$api.goods_info(params,res=>{
					
					this.content = res.data.intro
				})
			}
		}
	}
</script>

<style>

</style>