今天在开发中遇到一个问题,在小程序中 复制文本,在做之前也查了资料,大部分都是固定文本复制,(小程序本身是不能手动复制的)和需求还是不一样的。
对于复制官方文档中提供了:
wx.setClipboardData设置系统剪贴板的内容。调用成功后,会弹出 toast 提示"内容已复制",持续 1.5s。
方法一:要求在小程序页面中可以手动选择文本复制。
<text selectable="true">{{texts}}</text>
在text标签中添加 selectable="true" 属性就可以了。
方法二:当复制一段文字或者一行文字的时候。
<view wx:for="{{newArr}}" wx:key="index">
<text class="modal-li" selectable="true">{{item.title}}</text>
<view class="iconfont icon-fuzhi" bindtap="copyBtn" data-title="{{item.title}}">复制</view>
</view>
copyBtn(){
let that = this;
wx.setClipboardData({//复制文本
data: that.data.newArr,
success: function (res) {
wx.showToast({
title: '复制成功',
icon:"none",
mask:"true"//是否设置点击蒙版,防止点击穿透
})
}
})
}
在复制按钮中添加 data-属性="{{item.属性}}" 就可以实现复制。
或者 当遇到复制手机号的时候也可以用这种方法来实现。
<text class="modal-li" selectable="true">{{title}}</text>
<view class="iconfont icon-fuzhi" bindtap="copyBtn" data-title="{{title}}">复制</view>
方法三:当循环出列表数据,点击复制,复制全部数据。这样就不能用data-了。如果用的话就是相当于一个li标签中有一个复制按钮,感觉用户体验也不好,也没达到需求。
<view class="iconfont icon-fuzhi" bindtap="copyBtn" >复制</view>
<view wx:for="{{newArr}}" wx:key="index">
<text class="modal-li" selectable="true">{{item.title}}</text>
</view>
copyBtn() {
let that=this;
let result = "";
let newcopy = that.data.newArr;
for(var i = 0; i < newcopy.length; i++){
console.log('遍历打印==', newcopy[i].title);
wx.setClipboardData({//复制文本
data: result += newcopy[i].title + "\n",
success: function (res) {
wx.showToast({
title: '复制成功',
icon:"none",
mask:"true"//是否设置点击蒙版,防止点击穿透
})
}
})
};
首先遍历数组,其次生命一个变量,把数组拼接字符串。这样就可以复制全部的数据。文章来源:https://www.toymoban.com/news/detail-494391.html
第一次接触小程序复制的功能,不足之处欢迎指正。文章来源地址https://www.toymoban.com/news/detail-494391.html
到了这里,关于微信小程序wx.setClipboardData复制文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!