uni-app剪切板功能 uni-app如何复制内容到剪切板-uni-app-PHP中文网

uni.setclipboarddata 仅在 app（ios/android）和小程序端可靠，h5 端不支持；h5 需用 navigator.clipboard.writetext 或 document.execcommand 降级，并注意 https、用户手势触发及兼容性限制。

uni-app剪切板功能 uni-app如何复制内容到剪切板

uni.setClipboardData 在哪些平台能用？

uni.setClipboardData 是 uni-app 官方 API，但它只在 App（iOS/Android）和小程序端可靠工作，H5 端完全不支持——调用后静默失败，既不报错也不触发 success 回调。

常见错误现象：

H5 页面点击“复制”没反应，控制台也无报错
本地开发（H5 模式）测试通过，真机调试却失效

使用场景判断建议：

如果项目只跑 App 或微信/支付宝小程序 → 直接用 uni.setClipboardData，最稳
如果必须兼容 H5 → 必须 fallback 到 navigator.clipboard.writeText 或 document.execCommand

注意点：

uni.setClipboardData 的 data 参数必须是字符串，传对象或数字会静默转空串
小程序端需在 manifest.json 中确认已开启剪贴板权限（微信要求配置 scope.writeClipboard）

H5 复制必须处理的三个硬限制

H5 端复制不是“写个 API 就行”，它受浏览器策略严格约束：

navigator.clipboard 只在 HTTPS 环境下可用，本地 <a href="https://www.php.cn/link/bb122c8fe6c764e8aae555e2186a6344">https://www.php.cn/link/bb122c8fe6c764e8aae555e2186a6344</a> 开发时可能报 NotAllowedError
复制操作必须由用户手势（如 click、tap）触发，不能在异步回调（如 setTimeout、Promise.then）里直接调用
部分安卓 WebView（尤其旧版 UC、QQ 浏览器）根本不支持 navigator.clipboard，得降级到 document.execCommand

实操建议：

先用 if (navigator.clipboard && window.isSecureContext) 做双保险检测
降级方案中，document.execCommand 已被标记为废弃，但仍是目前最广谱兼容的兜底手段
不要省略 textarea.select() 后的 textarea.setSelectionRange(0, txt.length)，iOS Safari 对此敏感

如何封装一个真正跨端的 copy 函数？

别写两套逻辑再 if-else 拼接，直接按平台条件编译 + 统一 Promise 接口：

function copyTxt(txt) {
  txt = String(txt || '').trim();
  if (!txt) return Promise.reject('内容为空');
<p>// #ifdef APP-PLUS
return new Promise((resolve, reject) => {
uni.setClipboardData({
data: txt,
success: () => resolve(),
fail: reject
});
});
// #endif</p><p>// #ifdef H5
if (navigator.clipboard) {
return navigator.clipboard.writeText(txt);
}
// 降级：execCommand 方案
const textarea = document.createElement('textarea');
textarea.value = txt;
textarea.readOnly = true;
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, txt.length);
const result = document.execCommand('copy');
document.body.removeChild(textarea);
return result ? Promise.resolve() : Promise.reject('execCommand 失败');
// #endif
}</p>

关键细节：

所有平台都返回 Promise，上层统一 .then/.catch，不用关心内部差异
H5 降级代码里加了 style.left = '-9999px'，避免闪屏；不用 display: none，否则 iOS Safari 无法选中
不推荐用 vue-clipboard2 这类第三方插件，它对 H5 依赖 document.execCommand，且在 Vue3 + Composition API 下兼容性差

为什么复制后 toast 提示总延迟或不显示？

这不是 UI 问题，而是 uni.setClipboardData 和 navigator.clipboard.writeText 的执行时机差异导致的：

uni.setClipboardData 是异步但非 Promise，success 回调在原生层完成才触发，中间有毫秒级延迟
navigator.clipboard.writeText 是 Promise，但部分安卓 WebView 会在 resolve 后仍卡顿几十毫秒才真正写入系统剪贴板

结果就是：toast 弹出时，内容其实还没落进剪贴板，用户马上粘贴就失败。

解决办法：

不要在 success 或 then 里立刻弹 toast，加个 setTimeout(() => { uni.showToast(...) }, 100)
更稳妥的做法：toast 显示文案改为“已尝试复制”，而不是“已复制”，降低用户预期
如果业务强依赖“复制成功即刻可用”，建议加一次校验（如用 uni.getClipboardData 读回比对），但注意该 API 在 H5 不可用

跨端复制看着简单，真正踩坑的都在平台边界和时序上。别信“一套代码全端通”，先分清哪段跑在哪，再决定用哪个 API、什么时候提示用户。