在uni-app中有 rich-text 标签是自带解析富文本内容的，但是不是很完美，怎么说呢？比如富文本的代码块、图片宽度等都是无法控制的，那么现在就利用插件来解析，这个解析插件小编是利用图片、html语句以及代码块。

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的代码了，也很简单

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

6.所有代码

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: {

}

}

效果图：