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

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

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