短链接复制需先调用第三方api生成，再用navigator.clipboard.writetext复制；必须做存在性判断、异常降级、视觉反馈，并分离请求与复制逻辑，safari下须确保writetext在用户手势同步上下文中执行。
复制短链接前先确认当前页面 URL 是否可缩短
浏览器原生不提供短链接生成能力，所谓“短链接”必须依赖第三方服务（如 Bitly、腾讯云短链、或自建服务）的 API。直接在前端调用 navigator.clipboard.writeText() 只能复制已有字符串——所以第一步不是写按钮逻辑，而是明确：你手头有没有可用的短链接口？没有的话，点击按钮只会复制长 URL，达不到“短链接”效果。
常见错误现象：Uncaught TypeError: Cannot read properties of undefined (reading 'writeText')（未检查权限）、或复制后粘贴出来仍是原始 URL（误以为调用了短链服务，实际只是复制了 window.location.href）。
- 若使用腾讯云短链，需提前申请
ShortUrl接口权限，并在后端封装请求（因跨域和密钥安全限制，不可前端直连） - 若用 Firebase Dynamic Links 或 Vercel Edge Functions 自建，同样需后端代理，前端只负责触发和接收返回结果
- 开发阶段可临时用
https://clck.ru/--?url=这类公开跳转服务做测试，但注意其稳定性与长度限制（部分会拒绝过长 URL）
按钮点击后调用 navigator.clipboard.writeText() 的兼容性处理
这个 API 在现代浏览器中支持良好，但 Safari 15.4 之前、旧版 Android WebView 仍可能报错。不能假设 writeText 一定存在或成功。
实操建议：
- 始终用
if (navigator.clipboard && navigator.clipboard.writeText)做存在性判断 - 捕获异常并降级：失败时改用
document.execCommand('copy')（已废弃但仍有兼容价值），或聚焦一个隐藏<textarea></textarea>后执行select()+execCommand - 复制成功后必须给出视觉反馈（如按钮文字临时变为“已复制”），否则用户无法感知操作结果
示例关键片段：
async function copyShortLink(shortUrl) {
try {
await navigator.clipboard.writeText(shortUrl);
button.textContent = '已复制';
} catch (err) {
// fallback
const textarea = document.createElement('textarea');
textarea.value = shortUrl;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
button.textContent = '已复制';
}
}
短链接生成与复制必须分离：避免按钮阻塞 UI
短链生成是网络请求，耗时不可控。如果把 API 调用和复制逻辑全塞进按钮点击事件里，用户会遇到明显卡顿，甚至多次点击触发重复请求。
正确做法是：按钮只负责“发起请求”，短链返回后再启用复制逻辑。过程中按钮应置为 disabled 并显示加载态。
- 后端返回的短链字段名不统一：Bitly 返回
link，腾讯云是ShortUrl，自建服务可能叫short_url，前端取值前务必确认响应结构 - 不要在请求未完成时就调用
writeText，否则复制的是undefined或默认占位符 - 超时控制很重要：设置
AbortController防止请求挂起，3–5 秒无响应就提示“生成失败，请重试”
移动端 Safari 的特殊限制：writeText 必须由用户手势触发
Safari 对剪贴板 API 卡得最严：只有在用户真实点击/触摸事件回调中才能调用 writeText，且不能包裹在 setTimeout 或 Promise.then 里延迟执行（哪怕延迟 0ms）。
这意味着如果你的短链请求走异步，拿到结果后不能直接复制——必须把复制动作“回传”到用户点击上下文中。
- 推荐方案：点击按钮后立即发起短链请求，同时保持按钮处于“等待中”状态；响应到达后，用
button.click()模拟一次新点击（不行），或更稳妥地——在按钮上绑定一个“可复用”的复制函数，响应到达后手动调用它（前提是该函数已在点击事件内定义） - 更简单做法：请求完成后再动态插入一个“复制”子按钮，让用户再点一次（体验稍差但 100% 可靠）
- 绝对不要在
fetch().then(() => navigator.clipboard.writeText(...))中直接写复制逻辑，Safari 会静默拒绝
这事关 iOS 用户是否能真正用上功能，不是“尽量兼容”，而是“不处理就失效”。
