微信小程序wx.setClipboardData复制文本

今天在开发中遇到一个问题，在小程序中复制文本，在做之前也查了资料，大部分都是固定文本复制，（小程序本身是不能手动复制的）和需求还是不一样的。

对于复制官方文档中提供了：

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"//是否设置点击蒙版，防止点击穿透})}})};

首先遍历数组，其次生命一个变量，把数组拼接字符串。这样就可以复制全部的数据。

第一次接触小程序复制的功能，不足之处欢迎指正。

微信小程序wx.setClipboardData复制文本相关推荐

微信小程序点击复制文本到剪切板，获取剪切板内容
设置剪切板:wx.setClipboardData 获取剪切板:wx.getClipboardData api:https://developers.weixin.qq.com/miniprogram ...
微信小程序长按复制文本
wxml部分 <view class="basic-row" bindlongtap="copyLess" data-info="我是复制的文本 ...
微信小程序点击复制文本至剪切板
只需要在点击事件内使用 wx.setClipboardData这个API即可 wx.setClipboardData({data: '_______',//需要复制的内容success: functi ...
微信小程序长按复制文本内容
<text user-select='true'>{{itext}}</text> 注意:<text selectable='true'> 长按复制文本</t ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念区别: wx.setStorage是异 ...
微信小程序foreach遍历_微信小程序wx:for和wx:for-item的用法
微信小程序wx:for和wx:for-item的用法.兴弘海科技在微信小程序定制开发单门店系统的时候,在制作菜单的时候,需要体现左侧是菜单栏目,右侧是菜单名称列表的时候,遇到wx:for和wx:for ...

微信小程序wx.setClipboardData复制文本

微信小程序wx.setClipboardData复制文本相关推荐

最新文章

热门文章