小程序中复制页面上文字的两种方法
客户要求能直接复制生成的编码从而粘贴到其他地方。通过参考其他博主,得出两种复制的方法。
方法一:将需要复制的文本放在<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: '复制失败',
});
}
})
},