最新资讯

  • 微信小程序 复制功能

微信小程序 复制功能

2026-01-30 19:00:39 栏目:最新资讯 0 阅读

1.复制代码






2.放到components里文件名CopyText.vue

3.再次复制代码

export function copyToClipboard(text, options = {}) {
  return new Promise((resolve, reject) => {
    // 获取平台信息
    const platform = uni.getSystemInfoSync().platform
    
    // 处理不同平台的复制逻辑
    if (typeof uni !== 'undefined' && uni.setClipboardData) {
      // 使用 uni-app 的 API(支持所有平台)
      uni.setClipboardData({
        data: String(text),
        success: () => {
          showSuccess(options.successMessage)
          resolve(true)
        },
        fail: (err) => {
          console.error('复制失败:', err)
          // 尝试使用备用方法
          fallbackCopy(text, options, platform)
            .then(resolve)
            .catch(reject)
        }
      })
    } else if (typeof wx !== 'undefined' && wx.setClipboardData) {
      // 微信小程序环境
      wx.setClipboardData({
        data: String(text),
        success: () => {
          showSuccess(options.successMessage)
          resolve(true)
        },
        fail: (err) => {
          console.error('复制失败:', err)
          fallbackCopy(text, options, platform)
            .then(resolve)
            .catch(reject)
        }
      })
    } else if (navigator.clipboard && window.isSecureContext) {
      // H5 环境且支持 Clipboard API
      navigator.clipboard.writeText(String(text))
        .then(() => {
          showSuccess(options.successMessage)
          resolve(true)
        })
        .catch(err => {
          console.error('复制失败:', err)
          fallbackCopy(text, options, platform)
            .then(resolve)
            .catch(reject)
        })
    } else {
      // 其他环境使用备用方法
      fallbackCopy(text, options, platform)
        .then(resolve)
        .catch(reject)
    }
  })
}

4.放到utils里文件名copy.js

5.在页面上使用