解决微信小程序`setClipboardData`频繁点击会出现另外样式的弹框。

解决微信小程序setClipboardData频繁点击会出现另外样式的弹框。

问题描述

今天做项目的时候，用到了小程序的原生复制功能，但是在使用的时候发现频繁点击会出现另外的弹窗文案。以下是我的代码。

// js文件
copy() {
    wx.setClipboardData({
      data:
        `${this.data.name}年龄为: ${this.data.age}` || '',
      success: () => {
        wx.showToast({
          title: '账户信息复制成功',
        });
      },
    });
}

// wxml文件
<view bind:tap="copy">复制</view>

这个地方我们定义的文案为“账户信息复制成功”，但是如果我们频繁点击复制，会有一刹那出现的文案不是我们定义的这个

问题来源

问题产生的原因很简单，我们打开小程序的官网查找setClipboardData这个函数

原来是setClipboardData调用后默认会有一个自定义的弹窗，如果我们频繁点击，可能刚好在我们的hideToast展示完默认的弹框还没显示完，这样就出现了我们上述的问题

问题解决

方案一：每次点击的时候我们都隐藏上一个的弹窗的内容，并且为了以防万一我们在suceess之后在隐藏一次，这样就可以避免那种问题。但是每次点击的时候都会重新弹出，对于用户体验不好

copy() {
    wx.hideToast();
    wx.setClipboardData({
      data:
        `${this.data.name}年龄为: ${this.data.age}` || '',
      success: () => {
      	wx.hideToast();
        wx.showToast({
          title: '账户信息复制成功',
        });
      },
    });
}

方案二：基于方案一做一个节流函数

const currentTime = Date.now();
if (currentTime - this.data.lastTime < 1500) return;  // lastTime是定义在data上的，如果这一次点击在上一次点击没完成的时候触发的就直接返回
this.setData({
    lastTime: currentTime,
});
wx.hideToast();
wx.setClipboardData({
    data:
    `${this.data.loginAccountInfo.mp_name}\n账户 ID: ${this.data.loginAccountInfo.appid}` || '',
    success: () => {
        wx.hideToast();
        wx.showToast({
            title: '复制成功',
        });
    },
});