微信小程序使用wx.setClipboardData实现复制和换行功能

微信小程序实现复制功能：多行数据一键复制

最新推荐文章于 2024-08-15 09:59:33 发布

原创最新推荐文章于 2024-08-15 09:59:33 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

Html 同时被 3 个专栏收录

262 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

微信-小程序

48 篇文章

订阅专栏

本文介绍了如何在微信小程序中利用wx.setClipboardData方法实现复杂数据的复制功能，包括多个对象的键值对，并在复制成功后显示提示。通过将数据转化为多行格式并设置到剪贴板，用户可以方便地复制酒店信息等结构化数据。

微信小程序使用wx.setClipboardData实现复制和换行功能

- 解决方案

解决方案

在这里插入图片描述
wxml 页面

<button catchtap="copyText">复制</button>

js页面

copyText: function (e) {
    // var copy = e.currentTarget.dataset.copy;  //data-copy传过来的数值
    arr = [
      {
        name: "酒店名称",
        value: "上海国际酒店"
      },
      {
        name: "房间号",
        value: "1231"
      },
      {
        name: "酒店地址",
        value: " 上海市黄浦区南京西路170号"
      }
    ]
    // console.log(`${arr.map(item =>`${item.name}: ${item.value}`).join("\n")}`)
    wx.setClipboardData({
      data: `${arr.map(item =>`${item.name}: ${item.value}`).join("\n")}`,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
      }
    })
  },