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

最新推荐文章于 2025-10-20 10:33:06 发布

原创最新推荐文章于 2025-10-20 10:33:06 发布 · 8.2k 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #web前端

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

互联网

12 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现点击按钮即可复制文本的功能，包括wxml和js文件的配置步骤，最终达成用户友好体验的效果。

1.wxml

    <view class="linkcopy">
            <input type="text" value="{{contents}}" class="linkstyle"></input>
            <text bindtap='copyText' data-text="{{contents}}">复制链接</text>
         </view>

2.js文件

     copyText: function (e) {
        console.log(e)
        wx.setClipboardData({
          data: e.currentTarget.dataset.text,
          success: function (res) {
            wx.getClipboardData({
              success: function (res) {
                wx.showToast({
                  title: '复制成功'
                })
              }
            })
          }
        })
      },