uni-app文章詳情-富文本展示 優雅展示代碼塊

在uni-app開發中，開發一個資訊詳情頁面，詳情裡包含圖檔和代碼塊。這時候用簡單的rich-text控件已經不夠用了。用官方demo裡的html-parser.js也無法很好的展示代碼區域。這個時候就要使用官方提供的插件來解決。

官方的這個插件有很多問題。需要使用第3方修複的版本：

https://ext.dcloud.net.cn/plugin?id=1279 首先：下載下傳插件 ： 第二步：寫代碼 demo示例

<template>
  <div>
    <u-parse :content="content" @navigate="navigate"></u-parse>
  </div>
</template>
 
<script>import uParse from "@/components/feng-parse/parse.vue";  //注意：官方提供的示例代碼有問題
 
export default {
  components: {
    uParse
  },
  data () {
    return {
      article: '<div>我是HTML代碼</div>'
    }
  },
  methods: {
    preview(src, e) {
      // do something
    },
    navigate(href, e) {
      // do something
    }
  }
}
</script>
 
<style>
@import url("../../components/feng-parse/parse.css");  //注意：官方提供的示例代碼有問題
</style>           

我這邊具體的業務代碼如下：（可以忽略）

<template>
    <view>
        <view class="banner">
            {{article_detail.title}}
        </view>

        <view class="article-meta">
            <text class="article-meta-text article-author">作者：{{article_detail.fields.author}}</text>
        </view>
        <view class="article-content">

            <div>
                <u-parse :content="article_detail.content" @preview="preview" @navigate="navigate" />
            </div>
            <view class="parse-con">
                <u-parse :content="article_detail.content" @navigate="navigate"></u-parse>
            </view>

            <view v-if="article_detail.fields.source" class="article-source">
                文章來自：{{article_detail.fields.source}}
            </view>
        </view>
        <view class="comment-wrap"></view>
    </view>
</template>


<script>
    import uParse from "@/components/feng-parse/parse.vue"

    const FAIL_CONTENT = '<p>資料加載中</p>';
    export default {
        components: {
            uParse
        },
        data() {
            return {

                article_detail: {},
                id: 0
            }
        },
        onShareAppMessage() {
            return {
                title: this.article_detail.title,
                path: '/pages/detail/detail?query=' + this.id
            }
        },
        onLoad: function(event) {
            // 目前在某些平台參數會被主動 decode，暫時這樣處理。
            try {
                console.log('入參：' + event.query);

                this.id = event.query;
            } catch (error) {
                console.log('異常來了');

            }


            this.getDetail();
        },
        onShow: function() {
            console.log('onShow裡：');
            console.log('id=' + this.id);

            // #ifdef  MP-BAIDU 
            var zyizurl = getApp().globalData.zyiz_domain + '/api/Zyiz/Detail/' + this.id;
            uni.request({
                url: zyizurl,
                success: (result) => {

                    if (result.statusCode == 200) {
                        console.log("詳情結果2：");
                        console.log(result);
                        var article_d = result.data.data;
                        var keyw = article_d.tags + ',' + article_d.category_name + ',' + getApp().globalData.keywords;
                        if (article_d.seo_keywords) {
                            keyw = article_d.tags + ',' + article_d.category_name + ',' + article_d.seo_keywords;
                        }
                        var zhaiyao = getApp().globalData.description;
                        if (article_d.zhaiyao) {
                            zhaiyao = article_d.zhaiyao;
                        }
                        var img_url = 'http://www.zyiz.net/templates/main_zyiz/images/logo.png';
                        if (article_d.img_url) {
                            img_url = article_d.img_url;
                        }
                        var title = article_d.title + '-' + article_d.category_name;
                        swan.setPageInfo({
                            title: title,
                            keywords: keyw,
                            description: zhaiyao,
                            articleTitle: title,
                            releaseDate: article_d.add_time,
                            image: img_url,
                            video: ''
                        });


                    }

                }
            });


            // #endif

        },
        methods: {
            getDetail() {

                var zyizurl = getApp().globalData.zyiz_domain + '/api/Zyiz/Detail/' + this.id;
                uni.request({
                    url: zyizurl,
                    success: (result) => {

                        if (result.statusCode == 200) {
                            console.log("詳情結果：");
                            console.log(result);

                            this.article_detail = result.data.data;



                        }

                    }
                });

            },
            navigate(e) {
                console.log(e)
            }

        }


    }
     
</script>

<style>
    @import url("../../components/feng-parse/parse.css");

    /* #ifndef APP-PLUS */
    page {
        min-height: 100%;
    }

    /* #endif */
    .baidu-arcontent {
        width: 98%;

    }

    .baidu-arcontent img,
    .baidu-arcontent image {
        max-width: 95% !important;
        mode: aspectFit;
    }

    .article-source {
        padding: 10upx;
        color: #AAAAAA;
    }

    .banner {
        margin: 10upx;
        text-align: center;
        font-size: 40upx;
        font-weight: bold;

    }

    .article-content image {
        width: 96%;

    }


    .banner-img {
        flex: 1;
    }

    .title-area {
        position: absolute;
        left: 30upx;
        right: 30upx;
        bottom: 30upx;
        z-index: 11;
    }

    .title-text {
        font-size: 32upx;
        font-weight: 400;
        line-height: 42upx;
        lines: 2;
        color: #ffffff;
        overflow: hidden;
    }

    .article-meta {
        padding: 20upx 30upx;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .article-meta-text {
        color: gray;
    }

    .article-text {
        font-size: 26upx;
        line-height: 50upx;
        margin: 0 20upx;
    }

    .article-author {
        font-size: 30upx;
    }

    .article-time {
        font-size: 30upx;
    }

    .article-content {
        font-size: 30upx;
        padding: 0 30upx;
        margin-bottom: 30upx;
        overflow: hidden;
    }
</style>           

第三步：檢視效果：

1、微信小程式的效

2、百度小程式的效果：

非常完美的解決了問題。