小程序中点击按钮实现复制功能

最新推荐文章于 2025-06-07 15:22:04 发布

hangGe0111

最新推荐文章于 2025-06-07 15:22:04 发布

阅读量6.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：点击按钮实现复制功能 text标签实现长按复制

原文链接：https://www.cnblogs.com/xuhuang/p/9720337.html

微信小程序专栏收录该内容

63 篇文章

订阅专栏

博客介绍了微信小程序中复制功能的实现方法。一是点击实现复制，小程序可调用api（wx.getClipboardData），其他端需用input框，小程序可通过that.data.textPaste获取；二是text标签设置selectable=\true\可实现长按复制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.微信小程序中点击实现复制功能

1.1js

textPaste(){
    wx.showToast({
      title: '复制成功',
    })
    wx.setClipboardData({
      data: '点击复制的内容',
      success: function (res) {
        wx.getClipboardData({    //这个api是把拿到的数据放到电脑系统中的
          success: function (res) {
            console.log(res.data) // data
          }
        })
      }
    })
  },

1.2wxml

<text class='shopName' bindtap='textPaste'>{{shopDetailList.shopName}}</text>

.shopName{
  position:absolute;
  left:0;
  top:0;
  z-index:-1000;
  opacity:0;
  color:transparent;
  background:transparent;
}

1.4说明

①在微信小程序中提供了api（wx.getClipboardData）可以直接调用

参考官网：https://developers.weixin.qq.com/miniprogram/dev/api/wx.getClipboardData.html?search-key=wx.getClipboardData

②在其它端(例如pc和触屏等通过js来实现控制的)，需在页面用一个input框，但小程序可以通过 that.data.textPaste 来获取；

2.对于 text 标签还可以通过设置 selectable="true" 来实现开放长按复制工能；

3.转载地址：

https://www.cnblogs.com/xuhuang/p/9720337.html