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

}

}

效果圖：

總結

以上是生活随笔為你收集整理的uni怎么使用原生html标签,uni-app如何完美解析富文本内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。