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

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

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

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

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐