uni-app富文本渲染方案rich-text、uparse、v-html簡單解析

uniapp語法：rich-text

1、rich-text是uni-app的內置組件，提供了高性能的富文本渲染模式。
2、API參考https://uniapp.dcloud.io/component/rich-text
3、rich-text的優勢是全端支持、高性能。有個缺陷是只能整體設點擊事件，無法對富文本中的圖片、超鏈接單獨設點擊事件。（這個缺陷有點嚴重，因為這個缺陷，一般不建議使用，除非你的富文本內容是單純提供給用戶瀏覽的）
4、h5和nvue支持圖片、超鏈接單獨點擊。
5、app-nvue只能使用rich-text。

vue語法：v-html

1、在uni-app中，h5端和app-vue的v3編譯器下可以使用v-html
2、小程序不支持此語法

萬能的業內大佬：uparse

1、全端支持，除了nvue

總結

1、rich-text有很大弊端（不支持富文本內點擊事件），若富文本里有可點擊事件，則不推薦使用
2、v-html在小程序中不支持。若項目不包含小程序，則推薦使用v-html。（記得使用v3編譯器,2.7.5版本+的HBuildX已默認使用v3編譯，無需自定義設置）
3、uparse全端支持，但不支持nvue。若項目包含app,小程序，則推薦使用uparse。然后在nvue頁面另行使用rich-text即可。

uparse使用方法

• 進入插件市場，導入此插件： https://ext.dcloud.net.cn/plugin?id=364 （也可使用其他版本）
• 導入成功后可以看到components下多了此組件
  
• 基本用法

<template>
  <view>
    <u-parse :content="article" @preview="preview" @navigate="navigate" noData="正在加載中..." />  //使用組件
  </view>
</template>


import uParse from '@/components/gaoyia-parse/parse.vue'  //引入組件

export default {
  components: {
    uParse  //注冊組件
  },
  data () {
    return {
        article: '<p>html代碼，具體參見https://github.com/gaoyia/parse/tree/1.0.7/parse-demo中的demo</p>'
    }
  },
  methods: {
    preview(src, e) {  //事件：點擊富文本里的圖片
      // do something
    },
    navigate(href, e) {  //事件：點擊富文本里的鏈接
      // do something
    }
  }
}


//在APP.vue中引入，否則樣式不能生效
<style>
@import url("/components/gaoyia-parse/parse.css");
</style>





若不想單頁面引入組件，也可全局注冊組件：在main.js中
import uParse from '@/components/gaoyia-parse/parse.vue'
Vue.component('u-parse',uParse)
在其它頁面即可<u-parse :content="info" @preview="preview" @navigate="navigate" noData="正在加載中..." />調用了