clipboard.js在H5中必须在用户点击事件同步上下文中初始化，不可延迟或异步调用；需按需导入、每次新建并销毁实例，且仅支持HTTPS或localhost环境。
clipboard.js 在 H5 环境下能用，但必须手动触发且不能异步调用
直接在 @click 回调里 new Clipboard 实例是可行的，但很多人踩坑在于：把它放在 mounted 里初始化、或用 setTimeout 延迟调用、或在 Promise.then 里执行 —— 这些都会导致浏览器拒绝访问剪贴板，报 NotAllowedError。它和 navigator.clipboard.writeText 一样，严格依赖用户手势同步上下文。
常见错误现象：
点击按钮无反应，控制台也不报错；微信开发者工具里正常，真机 H5 打包后失效。
- 必须在 click/tap 事件处理函数体内直接初始化
Clipboard实例（不能包裹在 async/await 后续语句中） - 目标元素需有唯一可选中的 class 或 id，例如
class="copy-btn" - 传入的文本必须是字符串，
number或object会静默失败 - 不支持 HTTPS 的本地开发（如
http://192.168.x.x）会直接 fallback 到error回调
安装和初始化 clipboard.js 的正确姿势
别在 main.js 全局挂载，也别用 Vue.use —— clipboard.js 是纯 DOM 操作库，不依赖 Vue 生命周期，全局注册反而容易触发时机错乱。
推荐写法：按需在组件内 import + 局部实例化。
import Clipboard from 'clipboard'
在方法里这样写：
copyLink() {
const clipboard = new Clipboard('.copy-btn', {
text: () => this.copyText // 必须是函数返回值，不能直接传字符串
})
clipboard.on('success', (e) => {
console.log('复制成功:', e.text)
uni.showToast({ title: '复制成功' })
clipboard.destroy() // 关键！避免重复绑定和内存泄漏
})
clipboard.on('error', (e) => {
console.error('复制失败:', e.action, e.trigger)
uni.showToast({ title: '复制失败', icon: 'none' })
clipboard.destroy()
})
}
-
text选项必须是函数，否则 H5 下某些版本 clipboard.js 会读不到值 - 每次调用后务必执行
clipboard.destroy()，否则多次点击会重复绑定事件 - 不要复用同一个
Clipboard实例去复制不同内容，每次都应新建 + 销毁
为什么 clipboard.js 比直接用 navigator.clipboard 更稳？
因为 clipboard.js 内部做了两层兜底：
优先尝试 navigator.clipboard.writeText（满足安全上下文时），失败后自动降级到 document.execCommand('copy') + 临时 <textarea></textarea> 方案。
但它依然绕不开浏览器硬限制：
- 仍要求
window.isSecureContext === true（即 HTTPS 或localhost） - 仍禁止在异步回调中调用（比如你把
new Clipboard(...)放在uni.showModal的 success 回调里，就必然失败） - 部分安卓 WebView（如旧版 UC、QQ 浏览器）连
execCommand都不支持，此时clipboard.js也会进error回调
所以它只是封装了兼容逻辑，并没绕过策略 —— 你得自己确保触发时机和环境合规。
真机调试时 copy 失败，先检查这三件事
很多问题不是代码写错了，而是环境没达标。遇到“点不动”，先快速核对：
- 当前页面 URL 是否以
https://开头？http://或局域网 IP（如http://192.168.1.100）一律不认 - 复制操作是否由用户真实点击触发？有没有被
uni.showToast、uni.showLoading或网络请求的回调包裹？ - 目标设备是否为老旧安卓 WebView？可在控制台打印
!!navigator.clipboard和document.queryCommandSupported('copy')看返回值
最常被忽略的是：你以为在“点击”，其实是在模拟点击（比如用 element.click() 触发），这种非用户手势产生的调用，浏览器一律拦截。
