uni.setClipboardData仅在App和小程序可靠,H5完全不支持;小程序需manifest配置权限,H5须用navigator.clipboard或execCommand并满足HTTPS、用户手势等限制。
uni-app 不能只写一个 api 就跨端跑通剪贴板 —— 必须按平台拆解逻辑,否则 h5 静默失败、小程序报权限错、app 真机无响应。
uni.setClipboardData 在哪些平台实际可用
这个 API 名字看着统一,但真实支持范围很窄:uni.setClipboardData 仅在 App(iOS/Android)和微信/支付宝等小程序环境可靠;H5 端完全不支持,调用后既不进 success 也不进 fail,控制台也无报错。
- 小程序端必须在
manifest.json的对应平台节点(如mp-weixin)里声明权限:"permission": { "scope.writeClipboard": { "desc": "用于复制链接" } } - App 端需确保 HBuilderX 版本 ≥ 3.2.13,旧版可能 fallback 到 Native.js 才生效
- H5 必须弃用
uni.setClipboardData,改用navigator.clipboard.writeText或降级document.execCommand
H5 复制必须绕过三个硬限制
浏览器对剪贴板写入卡得极死,不是加个 HTTPS 就完事:
-
navigator.clipboard只在https://或localhost下可用,http://192.168.x.x本地调试直接抛NotAllowedError - 必须由用户手势(
click、tap)**直接触发**,包一层setTimeout或Promise.then就失效 - 部分安卓 WebView(如旧版 QQ 浏览器)根本不认
navigator.clipboard,得靠textarea.select() + document.execCommand('copy')兜底 - iOS Safari 对
textarea.setSelectionRange(0, txt.length)敏感,漏掉这句在 iPhone 上大概率复制空串
小程序读取剪贴板失败的典型原因
uni.getClipboardData 在小程序里失败,90% 不是代码问题,而是配置或时机踩坑:
- 没在
manifest.json中配scope.writeClipboard权限 → iOS 真机直接拒绝,连弹窗都不给 - 在
onLoad、onShow或定时器里调用 → 微信强制要求“用户点击按钮后立即读”,否则静默返回空字符串 - 读出来是空,但
data.trim().length > 0为 false → 很可能是微信转发口令带了零宽空格\u200b,得用data.replace(/[\u200b-\u200f\u202a-\u202f]/g, '')清理 - 首次调用被用户点“拒绝” → iOS 会记住状态,后续调用仍失败,必须提示用户去「设置 > 隐私 > 剪切板」手动开启
App 端想监听剪贴板变化怎么办
官方 uni.getClipboardData 只能“手动点一下读一次”,无法监听。如果业务需要实时感知剪贴板内容变更(比如自动识别邀请码),只能走 Native.js:
- 仅限 App 端,H5 和小程序完全不可行
- Android 示例:用
plus.android.invoke(clip, "getText")直接取原生剪贴板内容 - iOS 需调用
UIPasteboard.general.string,但需在uni-app的 native 插件中封装,不能纯 JS 实现 - 注意:Native.js 方案无法获取其他 App 复制的富文本或图片,只对纯文本稳定
跨端剪贴板最麻烦的从来不是“怎么写”,而是“什么时候能写、在哪能写、写了别人能不能读”——权限、上下文、平台策略三者缺一不可,漏一个就白忙活。











