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

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

首先：下載插件：https://ext.dcloud.net.cn/plugin?id=183

第二步：寫代碼 demo示例

注意：官方提供的示例代碼有點小問題，請用我下面的代碼。

 

<template>
  <div>
    <u-parse :content="article" @preview="preview" @navigate="navigate" />
  </div>
</template>
 
<script>
import uParse from '../../components/u-parse/u-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/u-parse/u-parse.css");  //注意：官方提供的示例代碼有問題
</style>

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

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

        <view class="article-meta">
            <text class="article-meta-text article-author">{{banner.source}}</text>
            <text class="article-meta-text article-text">發表於</text>
            <text class="article-meta-text article-time">{{banner.datetime}}</text>
        </view>
        <view class="article-content">
            <div>
                <u-parse :content="article" @preview="preview" @navigate="navigate" />
            </div>
        </view>
        <view class="comment-wrap"></view>
    </view>
</template>


<script>
    import uParse from '../../components/u-parse/u-parse.vue';

    const FAIL_CONTENT = '<p>獲取信息失敗1</p>';
    export default {
        components: {
            uParse
        },
        data() {
            return {

                banner: {},
                article: ''
            }
        },
        onShareAppMessage() {
            return {
                title: this.banner.title,
                path: '/pages/detail/detail?query=' + JSON.stringify(this.banner)
            }
        },
        onLoad(event) {
            // 目前在某些平臺參數會被主動 decode，暫時這樣處理。
            try {

                this.banner = JSON.parse(decodeURIComponent(event.query));
                console.log("詳情頁面");
                 
            } catch (error) {
                    console.log("異常來！");
                this.banner = JSON.parse(event.query);
            
            }
         
            uni.setNavigationBarTitle({
                title: '找一找教程網zyiz.net'
            });
             
            this.getDetail();
        },
        methods: {
            getDetail() {

                var zyizurl = getApp().globalData.zyiz_domain + '/api/article/article.ashx?actName=detail&id=';

                uni.request({
                    url: zyizurl + this.banner.newsid,
                    success: (result) => {
                        console.log("詳情結果：");
                        console.log(result);
                        let content = FAIL_CONTENT
                        if (result.statusCode == 200) {
                            content = result.data.data.content
                        }
                        this.article = content;

                    }
                });
            },
            preview(src, e) {
                // do something
            },
            navigate(href, e) {
                // do something
            }
        }
    }
</script>

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

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

    /* #endif */


    .banner {
        margin: 10upx;
        text-align: center;

    }

    .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>

 

 

第三步：查看效果：

一、微信小程序的效

二、百度小程序的效果：

 

很是完美的解決了問題。

文章根據：http://www.zyiz.net/tech/detail-104163.html 改編。