真正稳定跨三端的clipboard插件仅有@ dcloudio/uni-clipboard(v2.0+)和uni-app-clipboard(id=1287);前者需HBuilderX v3.9.0+或CLI手动安装,后者开箱即用但不支持nvue页面。

uni-app 里哪些 clipboard 插件真正能跨三端用
真正稳定支持 H5、微信小程序、App(含 iOS/Android)的 clipboard 插件极少,多数插件在某端会静默失败或报 undefined is not a function。目前实测可用且维护活跃的只有两个:官方推荐的 @dcloudio/uni-clipboard(v2.0+)和插件市场下载量最高的 uni-app-clipboard(id=1287)。前者需 HBuilderX v3.9.0+ 或 CLI 项目手动安装,后者开箱即用但不支持 nvue 页面。
为什么 uni.setClipboardData 在某些平台会失效
原生 API 的兼容性陷阱比想象中多:
- H5 端:必须由用户手势触发(如
@click),异步回调里调用会直接被浏览器拦截 - 微信小程序:iOS 15+ 需要 manifest.json 中配置
"mp-weixin"节点下的"permission"字段,否则静默失败 - App 端:Android 11+ 需要在
manifest.json > app-plus > permissions中显式声明"android.permission.WRITE_CLIPBOARD" - 支付宝小程序:必须使用插件市场提供的
clipboard插件,原生 API 不可用
uni-app-clipboard 插件的实际调用方式
这个插件封装了各端差异,避免手动判断平台,但要注意它的默认行为:
- 不返回 Promise,而是通过回调通知结果:
this.$clipboard.set('text', () => { console.log('success') }, () => { console.log('fail') }) - 复制空字符串或纯空白符时,在 iOS App 上会返回 success 但实际未写入,建议提前
.trim() - H5 端依赖
document.execCommand,Chrome 90+ 已弃用,所以 v2.1.0 起改用navigator.clipboard.writeText,但要求页面是 HTTPS 或 localhost - 不能在
onLoad钩子中自动调用,必须绑定到用户可点击的元素上
自定义剪贴板按钮容易忽略的细节
很多开发者把复制逻辑塞进一个 <button> 就完事,结果在部分安卓机上点击无反应:
- 按钮必须有明确的
role="button"和tabindex="0",否则部分读屏或无障碍模式下不可聚焦 - 不要用
disabled控制状态——它会禁用焦点和事件,改用pointer-events: none; opacity: 0.6+ class 切换 - 复制成功后建议加个短暂 toast,但
uni.showToast在支付宝小程序中不支持 icon: 'success',得降级为 text - 如果文本含换行符
\n,微信小程序会自动过滤,需替换成\r\n才能保留格式
uni.getClipboardData 并比对内容,尤其在涉及验证码、邀请码等敏感文本时。


















