小程序中复制页面上文字的两种方法

客户要求能直接复制生成的编码从而粘贴到其他地方。通过参考其他博主，得出两种复制的方法。

方法一：将需要复制的文本放在<text></text>标签中，将text标签的属性selectable的值为true。通过手机对文本的复制功能实现复制。

<text selectable=true>{
          
   {item.bookCode}}</text>

{ {item.bookCode}}

这个方法实现比较简单，也可以灵活选择需要复制的字段。缺点在于text的样式和功能设计有限制。

方法二：小程序提供了设置剪切板内容的API复制（wx.setClipboardData）和粘贴（wx.getClipboardData），可以将复制方法绑定在按钮上，长按或点击按钮触发事件来为剪切板设定值。

wxml代码：

<button bindlongpress =copy data-copy={
           
    {value}}>{
          
   {value}}</button>

{ {value}}

js代码：

Page({
    data: {
        value:"这是要复制的内容！"，
    },

   /**
    * 长按复制图书编码
    */
  copy:function(e){
    var code = e.currentTarget.dataset.copy;
    wx.setClipboardData({
      data: code,
      success: function (res) {
        wx.showToast({
          title: 复制成功,
        });
      },
      fail:function(res){
        wx.showToast({
          title: 复制失败,
        });
      }
    })
  },

Page({ data: { value:"这是要复制的内容！"， }, /** * 长按复制图书编码 */ copy:function(e){ var code = e.currentTarget.dataset.copy; wx.setClipboardData({ data: code, success: function (res) { wx.showToast({ title: 复制成功, }); }, fail:function(res){ wx.showToast({ title: 复制失败, }); } }) },

客户要求能直接复制生成的编码从而粘贴到其他地方。通过参考其他博主，得出两种复制的方法。 方法一：将需要复制的文本放在 标签中，将text标签的属性selectable的值为true。通过手机对文本的复制功能实现复制。 { {item.bookCode}} 这个方法实现比较简单，也可以灵活选择需要复制的字段。缺点在于text的样式和功能设计有限制。 方法二：小程序提供了设置剪切板内容的API复制（wx.setClipboardData）和粘贴（wx.getClipboardData），可以将复制方法绑定在按钮上，长按或点击按钮触发事件来为剪切板设定值。 wxml代码： { {value}} js代码： Page({ data: { value:"这是要复制的内容！"， }, /** * 长按复制图书编码 */ copy:function(e){ var code = e.currentTarget.dataset.copy; wx.setClipboardData({ data: code, success: function (res) { wx.showToast({ title: 复制成功, }); }, fail:function(res){ wx.showToast({ title: 复制失败, }); } }) },