uni-app 如何实现点击图标复制当前URL链接-uni-app-PHP中文网

uni.setclipboarddata在h5端需降级为execcommand或navigator.clipboard.writetext，小程序/app端可直接使用；获取完整url需按平台分支处理；复制操作必须由用户手势触发，且data必须为非空字符串。

uni-app 如何实现点击图标复制当前url链接

uni.setClipboardData 在 H5 和小程序端表现不一致

直接调用 uni.setClipboardData 复制当前 URL，在 H5 端会静默失败，控制台可能报错 API setClipboardData is not yet implemented；而微信小程序、App 端（5+）基本可用。这不是你代码写错了，是平台能力差异导致的——H5 没有原生剪贴板写入权限，必须走 document.execCommand('copy') 或现代 navigator.clipboard.writeText()。

获取当前页面完整 URL 的方式因平台而异

不能硬写 window.location.href，它在非 H5 环境（如小程序）下不存在；也不能只用 uni.getCurrentPages() 拼路径，那只是路由路径，不含域名、协议、query 参数等。

H5 端：直接用 window.location.href 最可靠
微信小程序：需手动拼接，uni.getStorageSync('uni_app_host') || 'https://yourdomain.com' + 当前路由路径 + query（从 onLoad 的 options 或 getCurrentPages()[0].options 获取）
App 端（5+）：可结合 plus.runtime.getProperty() 读取 manifest 配置的 base host，再拼接

更稳妥的做法是封装一个 getCurrentFullUrl() 工具函数，按 uni.getSystemInfoSync().platform 分支处理。

复制逻辑必须包裹在用户手势触发的回调里

浏览器和小程序都强制要求剪贴板写入必须由用户主动行为（如 @click、@tap）触发，否则会被拦截。不能放在 mounted、onLoad 或定时器里调用。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

按钮绑定 @click="handleCopyUrl"，不要用 @touchstart 或 @longpress 替代
若使用 document.execCommand，要临时创建 <input> 并 select()，且必须 appendChild 到 document.body 后再操作
若用 navigator.clipboard.writeText()，需检查兼容性：if (navigator.clipboard)，否则降级到 execCommand

示例片段（H5 主流写法）：

handleCopyUrl() {
  const url = window.location.href;
  const input = document.createElement('input');
  input.value = url;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
  uni.showToast({ title: '链接已复制', icon: 'none' });
}