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、小程序不支持此语法
3、补充说明（24.06.19）：HbuilderX最新4.xx版本中，text标签不支持v-html，但是官方不少组件源码中的text却用了v-html（如uni-notice-bar，这部分组件已因此出现问题）。要多注意。

万能的业内大佬：uparse

1、全端支持，除了nvue
2、uparse支持监听富文本内的图片以及a链接点击事件。
对于一些需要操作a链接点击的需求很有用。比如点击a链接后用外部浏览器打开（下面举例）

总结

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
      let a=encodeURI(href)  //为兼容iOS端，特别长的url需做转码处理
      //打开外部url
      if(a){
          plus.runtime.openURL(a, res=>{
              uni.showToast({title: '打开当前地址出错啦，请稍后再试',icon:'none'});
          }) 
        }
    }
  }
}


//在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="正在加载中..." />调用了