詳解uniapp富文本

一、什麼是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組件進行富文本展示，並且可以進行適當的樣式和屬性調整。除此之外，我們還介紹了富文本在實際應用中的一些問題和解決方案，希望對大家有所幫助。