小程序的剪贴板实现复制文本功能

在这里插入图片描述

wx.setClipboardData

wx.setClipboardData()

设置系统剪贴板的内容。调用成功后，会弹出 toast 提示"内容已复制"，持续 1.5s

Promise 风格调用：支持
微信 Windows 版：支持
微信 Mac 版：支持

参数

属性	类型	默认值	必填
data	string	是	剪贴板的内容
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.setClipboardData({
  data: 'data', // 要复制的文本
  success (res) {
    wx.getClipboardData({
      success (res) {
        console.log(res.data) // data
      }
    })
  }
})

我的实现代码

wxml

<view class="content">
	<text class="content-text">{{code}}</text>
	<text class="copy-code" data-text="{{code}}" catchtap="copyText">复制</text> 
</view>

复制的方法

copyText(val) {
  const { text } = val.target.dataset;
  wx.setClipboardData({ data: text }).then(async res => {
    if (res.errMsg === 'setClipboardData:ok') {
      await this.showToast('复制成功');
    } else {
      await this.showToast('复制失败');
    }
  }).catch(async (error) => {
    await this.showToast('复制失败');
    console.error(error);
  });
},

提示成功或失败的方法

showToast(title) {
  return new Promise((resolve, reject) => {
    wx.showToast({
      title: title,
      icon: "none",
      duration: 2000,
      success: resolve,
      fail: reject
    });
  });
}