uni.setClipboardData仅在App和小程序可用,H5需降级至navigator.clipboard或execCommand;必须用户手势直接触发,禁止异步调用;data须为非空字符串,各端需配置对应权限。

直接用 uni.setClipboardData 是最稳的起点,但它只在 App 和小程序里真正可用;H5 端必须降级处理,否则点不动、不报错、也不复制——这是上线前被卡住最多的地方。
uni.setClipboardData 必须在用户点击第一层调用
这个 API 表面简单,但只要进异步回调就大概率静默失败。它要求「用户可感知的手势」直接触发,不能包裹在 setTimeout、Promise.then、this.$nextTick 或接口响应之后再调用。
- ✅ 正确:
@tap="handleCopy"→handleCopy() { uni.setClipboardData({ data: this.text }) } - ❌ 错误:
this.getData().then(() => uni.setClipboardData(...)),即使数据已就绪,也跨了宏任务 - 如果内容需异步获取,建议把请求和复制都放在同一事件处理器里,且复制调用紧挨在数据赋值后(不加任何延时)
data 参数必须是字符串,且不能为 null/undefined/空对象
传 number、object、null 或 undefined 会转成 [object Object] 或空串,剪贴板没变,控制台也不报错。
- 务必提前做类型处理:
String(this.value)或JSON.stringify(this.obj) - 建议加判空逻辑:
if (!this.text?.trim()) return,避免复制空白内容还弹成功提示 - 不要依赖 success 回调来判断是否真复制成功——H5 端
uni.setClipboardData根本不执行,success永远不会进
H5 端必须降级到 navigator.clipboard 或 execCommand
uni.setClipboardData 在 H5 完全不支持,强行调用等于没写。你得自己 fallback,而且要过三关:
- 环境:必须 HTTPS 或
https://localhost,http://localhost会抛NotAllowedError - 触发:必须由用户 click/tap 直接触发,不能在
onLoad或定时器里调 - 兼容:旧版安卓 WebView(如 UC、QQ 浏览器)不支持
navigator.clipboard,得用document.execCommand('copy')兜底 - execCommand 方案里,必须创建临时
<textarea></textarea>、.select()、再立刻.setSelectionRange(0, txt.length),否则 iOS Safari 复制失败
各端权限和配置不能漏
没配权限,API 就是摆设,而且静默失败——连 warning 都没有。
- App iOS:manifest.json → 「App 设置」→「iOS 设置」勾选「剪贴板」
- App Android:manifest.json → 「模块权限配置」启用
clipboard模块 - 微信小程序:manifest.json 的
mp-weixin节点下加"permission": { "scope.writeClipboard": { "desc": "用于复制内容" } } - 支付宝小程序:同样需在
mp-alipay下声明scope.writeClipboard
最容易被忽略的是 H5 降级逻辑的完整性:既要检测 navigator.clipboard 是否存在,也要检查 window.isSecureContext,还得准备 execCommand 备胎。少一环,真机上就白屏式失效。


















