uni-app的剪贴板

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

uni-app剪贴板

公司的租房项目有一个租房的团队功能，而该功能在最开始仅存于H5，主要在微信通过公众号发展，而最近开始上线APP之后，部分的功能进行改变，其中对于团队的添加新成员功能做了新的操作流程，由原本的基于微信公众号、微信浏览器的分享二维码，到现在类似某宝的分享邀请码来完成操作。

所以这里就需要用到用户的剪切板操作。

然后，我万万没想到啊，uni-app的剪贴板操作不支持H5.

其他的app，小程序全支持，就不支持H5，你说气不气？

不气，你不支持的部分我就自己搞。哼唧。

先熟悉下自带的剪贴板操作API

  uni.setClipboardData({ data: '需要复制的文本' })

那么在H5下，就用元素的JavaScript来处理。

const textarea = document.createElement('textarea')
textarea.value = data
textarea.readOnly = true
document.body.appendChild(textarea)
textarea.select()
textarea.setSelectionRange(0, data.length)
document.execCommand('copy')
textarea.remove()

通过新增textarea文本域，即操作相关的API来实现复制功能。

最后把它们合并，封装成一个方法。

setClipboardData(data) {
  return new Promise((success, fail) => {
    // #ifndef H5
    uni.setClipboardData({ data, success, fail })
    // #endif
    
    // #ifdef H5
    const textarea = document.createElement('textarea')
    textarea.value = data
    textarea.readOnly = true
    document.body.appendChild(textarea)
    textarea.select()
    textarea.setSelectionRange(0, data.length)
    document.execCommand('copy')
    textarea.remove()
    success(data)
    // #endif
  })
}

调用如下

setClipboard(data){
    this.setClipboardData(data)
    .then(res => {}) // 成功回调
    .catch(err => {}) // 失败回调
}