uni-app rich-text 组件在 ios18 上点击超链接无法打开链接
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>
注意几点:
- 事件监听:
@linktap
事件用于监听链接点击。 - iOS特殊处理:在iOS 18上,由于Safari的策略变更,
target="_blank"
可能不再有效。这里采用复制链接到剪贴板的方式作为备选方案。 - 平台判断:通过
uni.getSystemInfoSync().platform
判断当前平台,对iOS做特殊处理。 - Web-view:在Android或其他平台上,可以使用
web-view
组件来打开链接,但需要确保应用有相应的页面和逻辑支持。
此代码提供了一个基本的框架,你可以根据实际需求进行调整和扩展。