详解uniapp富文本

GSDDO • 2025-04-12 13:01 • 编程

一、什么是uniapp富文本

富文本是一种可以实现文字和图片混排的技术手段，多用于网页编辑、电子商务、ERP等领域的软件中。

在uniapp中，官方提供了一种名为rich-text的组件，可以轻松实现富文本的展示。rich-text组件在H5、APP、小程序等平台上都可以使用。

二、uniapp富文本的基本用法

在使用rich-text组件进行富文本展示时，我们首先需要获取到富文本的内容。可以通过从后端接口获取数据，或者在本地定义一段静态的HTML代码。以下为演示代码：


<template>
  <view class="container">
    <rich-text class="content" :nodes="richTextData"></rich-text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      richTextData: '<p>这是一段<b>加粗</b>的<i>斜体</i>文字，还有一张图片：</p><img src="https://picsum.photos/200"><p>完成了<br><p>'
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.content {
  font-size: 28rpx;
}
</style>

三、uniapp富文本的属性和样式

rich-text组件提供了一些属性和样式，可以对富文本进行进一步的调整和美化。以下是常用的属性和样式列表：

1. 属性

nodes： 富文本内容，支持HTML标签。
richtext-class： 容器的类名。
selectable： 是否可选中。
show-img-menu： 是否显示图片菜单，只在H5中可用。
on-error： 图片加载出错后的回调函数。
on-click： 点击a标签后触发的回调函数。

2. 样式

color： 文字颜色。
font-size： 文字大小。
font-weight： 字体粗细。
font-style： 字体样式。
line-height： 行高。
text-decoration： 文字下划线。
text-align： 文字对齐方式。

四、uniapp富文本的实际应用

uniapp提供了官方插件app-plus，可以在uniapp中使用原生API进行拓展，比如获取相机、触摸ID等。在富文本中，我们常常需要使用到的功能之一就是，让用户点击图片后可以进行放大预览。下面是一个演示代码：


<template>
  <view class="container">
    <rich-text class="content" :nodes="richTextData" :on-click="clickHandler"></rich-text>
  </view>
</template>

<script>
export default {
  data () {
    return {
      richTextData: '<p>这是一段<b>加粗</b>的<i>斜体</i>文字，还有一张图片：</p><img src="https://picsum.photos/200" data-src="https://picsum.photos/800"><p>完成了<br><p>'
    }
  },
  methods: {
    clickHandler (e) {
      const tagName = e.target.tagName.toLowerCase()
      if (tagName === 'img') {
        const src = e.target.dataset.src
        uni.previewImage({
          urls: [src],
          current: src
        })
      }
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.content {
  font-size: 28rpx;
}
</style>

五、uniapp富文本的兼容性

在使用rich-text组件进行富文本展示时，需要注意不同端的兼容性问题。以下是个人在实际开发中遇到的几个问题以及解决方案：

1. 图片不显示

在APP端和小程序中，需要将图片链接改为本地绝对路径。

2. 华为手机存在闪退问题

使用的是老版本的rich-text组件，在华为手机上使用会导致APP闪退。需要升级至最新版本。

3. 小程序中图片无法保存到相册

在小程序中，使用uni.saveImageToPhotosAlbum API无法保存图片到相册。需要使用wx.saveImageToPhotosAlbum API。

总结

通过对uniapp富文本的详细阐述，我们了解了如何使用rich-text组件进行富文本展示，并且可以进行适当的样式和属性调整。除此之外，我们还介绍了富文本在实际应用中的一些问题和解决方案，希望对大家有所帮助。

原创文章，作者：GSDDO，如若转载，请注明出处：https://www.506064.com/n/369355.html