uni.setClipboardData在小程序和App端可用，H5端不可用需降级；应从data/ref聚合表单字段值拼接纯文本，避免JSON.stringify；H5需用navigator.clipboard.writeText并兼容execCommand；建议同时支持按钮复制和text组件selectable长按选中。
uni.setClipboardData 在表单场景下的可用性判断
直接调用 uni.setClipboardData 复制整个表单内容，**在小程序和 App 端可行，H5 端不可用**——因为 H5 没有该 API 实现，调用会静默失败或抛出 API setClipboardData is not yet implemented 错误。这不是你代码写错了，是平台限制。
所以第一步必须做平台判断，不能无脑调用：
-
uni.getSystemInfoSync().platform === 'h5'时走降级方案（如document.execCommand或navigator.clipboard.writeText） - 微信/支付宝/头条等小程序，以及 iOS/Android App，可直接用
uni.setClipboardData - 注意：App 端需确认 manifest.json 中已开启剪贴板权限（iOS 需在
ios/plist中添加UIPasteboard相关配置）
如何拼接整个表单内容为纯文本
表单通常含多个 input、textarea、picker 和 checkbox，直接取 DOM 值不现实（uni-app 不暴露原生 DOM）。正确做法是：**从 data 或 ref 中聚合字段值**。
示例逻辑（假设表单数据存在 formData 对象中）：
copyForm() {
const lines = []
Object.keys(this.formData).forEach(key => {
const label = this.formLabels[key] || key // 可配中文标签
const value = this.formData[key]
if (value != null && value !== '') {
lines.push(`${label}：${value}`)
}
})
const text = lines.join('\n')
this.doCopy(text)
}
- 避免直接拼
JSON.stringify(this.formData)—— 用户看不懂、带引号和括号，体验差 - 对
date、time类型字段，手动格式化（如new Date(value).toLocaleDateString()） - 多选
checkbox值建议用.join('、')而非默认数组字符串
H5 端必须用 navigator.clipboard.writeText
uni.setClipboardData 在 H5 下无效，必须切换为标准 Web API。但要注意兼容性：
-
navigator.clipboard.writeText要求页面处于安全上下文（https或localhost），HTTP 站点会拒绝执行 - 需手动加
try/catch，失败时 fallback 到document.execCommand('copy')（仅旧版浏览器） - 不能在非用户手势触发的异步回调里调用（比如 setTimeout 里直接调会失败）
推荐封装函数：
async doCopy(text) {
if (uni.getSystemInfoSync().platform === 'h5') {
try {
await navigator.clipboard.writeText(text)
uni.showToast({ title: '复制成功', icon: 'none' })
} catch (e) {
// fallback to execCommand
const input = document.createElement('textarea')
input.value = text
input.readOnly = true
input.style.cssText = 'position: absolute; left: -9999px'
document.body.appendChild(input)
input.select()
document.execCommand('copy')
document.body.removeChild(input)
uni.showToast({ title: '复制成功', icon: 'none' })
}
} else {
uni.setClipboardData({
data: text,
success: () => uni.showToast({ title: '复制成功', icon: 'none' }),
fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
})
}
}
长按选中 + 点击按钮双路径设计更稳妥
只依赖按钮复制，对部分用户（尤其移动端）不够友好。建议同时支持「长按文字可选中」+「一键复制按钮」两种方式：
- 在表单展示区域（如
view包裹的text）加selectable属性：<text selectable>{{item.label}}：{{item.value}}</text> - 注意：
selectable仅对text组件生效，view或span不行 - 若表单含富文本（
v-html），需用rich-text并配合selectable（部分平台支持有限，iOS 微信较稳） - 按钮复制作为主路径，长按选中作为辅助路径——两者不互斥，且能覆盖更多操作习惯
真正容易被忽略的是：不同平台对 selectable 的渲染行为不一致（比如安卓端可能默认禁用，需配合 user-select: text CSS），上线前务必在真机上逐平台验证。
