uni-app如何完美解析富文本内容

1. 第一步：下载JS插件
2. 第二步：在详情页里配置 info.vue是小编的详情页
3. 在代码出添加插件的路径 var graceRichText = require("…/…/components/richText.js");
4. 在info的js里引入插件后，就写js代码了

var graceRichText = require("../../components/richText.js");
export default {
    components: {
        uParse
    },
    data() {
        return {
            demoHtml : 
        }
    },
    onLoad() {
        uni.request({
            url: 接口,
            success:(res) =>{
                 console.log(res);
                this.demoHtml = graceRichText.format(添加json数据里的富文本路径);
            }
        });
    },
    methods: {
    }
}

5. 写完JS代码就开始写html的代码了，也很简单

<template>
    <view>
        <view class="grace-rich-text">
            <rich-text type="text" :nodes="demoHtml"></rich-text>
        </view>
    </view>
</template>

html代码也写完了，赶紧运行看看吧。也可以在richText.js文件里修改css属性，小编在这里就不演示了，有兴趣的大神可以修改试试

6. 所有代码

<template>
    <view>
        <view class="grace-rich-text">
            <rich-text type="text" :nodes="demoHtml"></rich-text>
        </view>
    </view>
</template>
<script>
var graceRichText = require("../../components/richText.js");
export default {
    components: {
        uParse
    },
    data() {
        return {
            demoHtml : 
        }
    },
    onLoad() {
        uni.request({
            url: 接口,
            success:(res) =>{
                this.demoHtml = graceRichText.format(添加json数据里的富文本路径);
            }
        });
    },
    methods: {
    }
}
</script>
<style>
</style>