uni-app 富文本解析-小程序

原文：http://www.upwqy.com/manual/info/105.html

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>