uni-app rich-text 组件在 ios18 上点击超链接无法打开链接

发布于 1周前 作者 eggper 来自 Uni-App

uni-app rich-text 组件在 ios18 上点击超链接无法打开链接

开发环境 版本号 项目创建方式
vue 3.7.3

操作步骤:

  • 点击超链接

预期结果:

  • 跳转链接地址

实际结果:

  • 跳转链接地址

bug描述:

  • 富文本中存在三方超链接,高版本ios 18 无法打开链接 低版本可以打卡
2 回复

更新到最新版的HBuilderX 已修复


uni-app 中使用 rich-text 组件时,如果在 iOS 18 上遇到点击超链接无法打开的问题,通常是因为事件处理机制或系统权限设置导致的问题。为了确保超链接能够正常打开,你可以尝试以下方式进行处理。这里提供一个基本的代码案例,并展示如何在 uni-app 中配置 rich-text 组件以处理超链接点击事件。

首先,确保你的 uni-app 项目已经正确引入并使用了 rich-text 组件。以下是一个基本的示例代码:

<template>
  <view>
    <rich-text :nodes="htmlNodes" @linktap="handleLinkTap"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      htmlNodes: [
        {
          name: 'paragraph',
          children: [
            {
              type: 'text',
              text: 'Click here to visit ',
            },
            {
              type: 'a',
              attrs: {
                href: 'https://www.example.com',
                target: '_blank' // Note: '_blank' might not work directly in some environments
              },
              children: [
                {
                  type: 'text',
                  text: 'Example'
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handleLinkTap(event) {
      const { url } = event.detail;
      // Use uni-app's navigateToMiniProgram or web-view or any other suitable method to open the link
      if (uni.getSystemInfoSync().platform === 'ios') {
        // For iOS, especially iOS 18, you might need to handle it differently
        uni.setClipboardData({
          data: url,
          success: () => {
            uni.showModal({
              title: 'Tip',
              content: `Link copied to clipboard: ${url}`,
              success: (res) => {
                if (res.confirm) {
                  // Optionally prompt user to paste in Safari or another browser
                }
              }
            });
          }
        });
      } else {
        // For other platforms, use web-view or navigate directly if supported
        uni.navigateTo({
          url: `https://web-view.html?url=${encodeURIComponent(url)}` // Assuming you have a web-view page setup
        });
      }
    }
  }
};
</script>

注意几点:

  1. 事件监听@linktap 事件用于监听链接点击。
  2. iOS特殊处理:在iOS 18上,由于Safari的策略变更,target="_blank" 可能不再有效。这里采用复制链接到剪贴板的方式作为备选方案。
  3. 平台判断:通过 uni.getSystemInfoSync().platform 判断当前平台,对iOS做特殊处理。
  4. Web-view:在Android或其他平台上,可以使用 web-view 组件来打开链接,但需要确保应用有相应的页面和逻辑支持。

此代码提供了一个基本的框架,你可以根据实际需求进行调整和扩展。

回到顶部