微信小程序-实现按钮复制文本功能及解决取消默认提示【内容已复制】问题

我会带着你远行 2023-07-17 12:45 6阅读 0赞

### 需求: ###

点击下方复制按钮，实现复制该条记录中的“content ”值；

![20200321145526950.png][]

### 代码如下： ###

//chat.wxml 
    <view data-content="{
       {item.content}}" class="1" bindtap="copyNotice" style="">
    </view>

//chat.js
     copyNotice: function(e) {
        console.log("所复制的通知内容：", e.currentTarget.dataset.content);
        wx.setClipboardData({
          data: e.currentTarget.dataset.content,
          success: function(res) {
            wx.getClipboardData({
              success: function() {
                wx.showToast({
                  title: '复制成功',
                })
              }
            })
          }
        })
      },

### 解析： ###

**      1、设置系统剪贴板的内容：**wx.setClipboardData(Object)

**      2、获取系统剪贴板内容：**wx.getClipboardData(Object)

### 注意： ###

在使用wx.setClipboardData设置success后，你会发现，api自带的弹窗提示【内容已复制】，设置自己的提示框时，会出现默认自带的提示框先闪一次的问题；如何解决优化？

一、要么取消自定义提示效果；采用原生提示；

copyNotice: function(e) {
        wx.setClipboardData({
          data: e.currentTarget.dataset.content,
          success: function(res) {
            wx.getClipboardData({
              success: function() {   
              }
            })
          }
        })
      },

二、要么就想办法隐藏掉自带的复制成功消息提示；

但是我好像都尝试过了，网上教程说的在设置setClipboardData成功后，加上wx.hideLoading()或者wx.hideToast()；暂时没有隐藏掉；暂时我是没有解决，看你们的了，或者等官方团队进行调整。

如下附上：微信官方团队给出的公告：[iOS 2.0.0 基础库剪贴板提醒问题处理][iOS 2.0.0]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70][]

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】
> 
> ❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论（请勿发表攻击言论）。

[20200321145526950.png]: /images/20230528/dd7a8929e21147118f9528cfbe24dc41.png
[iOS 2.0.0]: https://developers.weixin.qq.com/community/develop/doc/00064c689c80c83ab5966603e5b401
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3MDc0Mw_size_16_color_FFFFFF_t_70]: /images/20230528/91afd37577e74e8b830ba09744da3390.png