uni.setclipboarddata必须传字符串,非字符串值(如对象、null)会导致静默失败;h5端不支持该api,需用navigator.clipboard.writetext或document.execcommand降级;小程序须在隐私协议中声明剪贴板权限。

uni.setClipboardData 必须传字符串,不能直接传变量引用
动态内容复制失败,90% 是因为 uni.setClipboardData 的 data 字段传了非字符串值——比如对象、undefined、null 或空数组。它不会报错,但剪贴板不变,用户完全感知不到问题。
正确做法是显式转成字符串,并做空值兜底:
-
data: String(value)或data: value?.toString() || '' - 若
value来自异步(如接口返回),务必在success回调里检查是否已赋值,避免复制空字符串 - 模板中绑定的变量(如
{{item.id}})不能直接塞进copy(item.id)调用——需确保item.id在点击时已存在且非 undefined
H5 端不支持 uni.setClipboardData,必须降级处理
在 H5 环境下,uni.setClipboardData 是无效的(不是未实现,而是被框架跳过),点按钮毫无反应,控制台也无报错。这是上线前最常踩的坑。
必须手动判断平台并切换方案:
- 用
uni.getSystemInfoSync().platform === 'h5'或process.env.UNI_PLATFORM === 'h5'区分环境 - H5 端优先用
navigator.clipboard.writeText()(需 HTTPS + 用户手势触发) - 兼容旧版浏览器可 fallback 到
document.execCommand('copy'),但需创建临时<textarea></textarea>并 focus - 不要在
mounted或onLoad里预调用,必须在@click等用户事件回调中执行
小程序端要开隐私权限,否则静默失败
微信/支付宝等小程序要求在 manifest.json 或 mp-weixin/permission 配置中声明剪贴板权限,否则 uni.setClipboardData 调用成功回调会执行,但实际没写入。
关键配置项:
- 微信小程序:在
mp-weixin/permission中添加"clipboard": {"desc": "用于复制订单号"} - App 端无需额外配置,但 iOS 14+ 可能弹系统级提示,需引导用户允许
- 支付宝小程序需在
mini.project.json中加"requiredPrivateInfos": ["clipboard"]
动态内容含 HTML 或富文本?别用 setClipboardData 直接塞
如果变量是带标签的字符串(如后端返回的 <p>订单已发货</p>),直接传给 uni.setClipboardData 会把标签一起复制过去,用户粘贴时看到的是源码而非渲染效果。
更合理的做法是:
- 纯文本场景:用
value.replace(/]*>/g, '')去标签后再复制 - 需要保留格式(如复制带样式的代码块):H5 可用
navigator.clipboard.write()写入text/html类型,但小程序和 App 不支持 - 想让用户长按选中复制:改用
<text selectable>{{value}}</text>,不用按钮,也不走 API











