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

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

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

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

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

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

wxml代码:

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

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: '复制失败',
        });
      }
    })
  },

猜你喜欢

转载自www.cnblogs.com/Aix-yz/p/10289326.html