uni-app实现点击复制到剪贴板 uni-app setClipboardData用法-uni-app-PHP中文网

uni.setClipboardData必须传入字符串类型data参数，否则静默失败；需在用户触发事件中调用，支持success/fail/complete回调，H5和小程序端有兼容性限制。

uni-app实现点击复制到剪贴板 uni-app setclipboarddata用法

uni-app 中 `uni.setClipboardData` 基本用法和必须传的参数

这个 API 不是「调了就完事」，它要求你必须传 data 字符串，且不能是 undefined 或空对象。直接传 {}、null、'' 都会静默失败（不报错但剪贴板没变），尤其容易在异步取值后忘记判空。

正确写法示例：

uni.setClipboardData({
  data: '要复制的文字',
  success: () => {
    uni.showToast({ title: '已复制', icon: 'none' });
  },
  fail: (err) => {
    console.error('复制失败', err);
  }
});

data 必须是字符串类型，数字或布尔值需显式转成字符串（如 String(123)）
微信小程序中若传入含 emoji 或特殊 Unicode 字符的字符串，部分旧版本可能截断，建议先 encodeURIComponent 再复制（粘贴时再解码）
H5 端依赖 navigator.clipboard.writeText，iOS Safari 13.4+ 才支持，低版本需降级提示

为什么点一下没反应？检查这三处常见失败点

多数「点击无反应」不是 API 本身问题，而是环境或调用时机不对：

未在用户主动触发的事件回调里调用（如 button 的 @click），在 mounted 或定时器里直接调用会被浏览器拦截
App 端（Android/iOS）未在 manifest.json 中配置权限："permissions": ["scope.clipboardWrite"]（仅 3.2.14+ 支持，老版本需用 plus.clipboard.writeText）
微信小程序真机调试时，开发者工具模拟正常，但真机上若未开启「获取剪贴板」授权（iOS 尤其敏感），fail 回调里会返回 errMsg: "setClipboardData:fail auth deny"

兼容多端的复制封装函数怎么写

别每次复制都手写一遍 success/fail，抽成工具函数更稳：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

export const copyToClipboard = (text) => {
  if (!text || typeof text !== 'string') return Promise.reject('非有效字符串');
  
  return new Promise((resolve, reject) => {
    uni.setClipboardData({
      data: text,
      success: () => resolve(),
      fail: (err) => reject(err)
    });
  });
};

使用时可配合 async/await：

async handleCopy() {
  try {
    await copyToClipboard(this.content);
    uni.showToast({ title: '已复制', icon: 'none' });
  } catch (err) {
    // H5 或 App 权限拒绝时走这里
    uni.showToast({ title: '复制失败，请重试', icon: 'none' });
  }
}