小程序的点击复制功能和长按复制功能

前言：

        在小程序中实现点击复制功能和长按复制功能,主要使用wx.setClipboardData 小程序的复制功能。

官方方法：

wx.setClipboardData 小程序的复制功能

功能描述

设置系统剪贴板的内容。调用成功后，会弹出 toast 提示"内容已复制"，持续 1.5s

参数 Object object

属性	类型	默认值	必填	说明
data	string		是	剪贴板的内容
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.setClipboardData({
  data: 'data',
  success (res) {
    wx.getClipboardData({
      success (res) {
        console.log(res.data) // data
      }
    })
  }
})

个人使用：

封装一个复制的方法

export function setClipboardData(data, showDoneToast = true) {
  return new Promise((resolve, reject) => {
    wx.setClipboardData({
      data: data,
      success(res) {
        resolve(res);
      },
      fail(err) {
        reject(err);
      }
    })
  }).then(res => {
    if (showDoneToast) {
      wx.showToast({
        title: '复制成功',
        icon: "none",
        duration: 1500,
      })
    }
    return res;
  })
}

一、点击复制+长按复制效果

index.wxml  注意：data-title=我是被复制的文本内容

<text selectable="true">我是被复制的文本内容/text>
<view bindtap="copyBtn" data-title="{{title}}">复制</view>

index.js

    //不使用封装方法
    let that = this;
    wx.setClipboardData({//复制文本
        data: '拿到页面的文本内容',
         success: function (res) {
               wx.showToast({
                 title: '复制成功',
                icon:"none",
                mask:"true"//是否设置点击蒙版，防止点击穿透
              })
        }
     })

import {setClipboardData} from "../../../utils/wxApi"//调用上面封装的方法
//使用上面封装的方法
copyBtn(e){
   setClipboardData(e.target.dataset.title)
},

二、长按复制功能

1、官方默认提供方法

<text selectable='true'>长按复制我</text> 

2、长按事件调用

index.wxml

<text bindlongpress="longpressMassage" data-msg="{{item.payload.text}}">长按复制我</text>

index.js

import {setClipboardData} from "../../../utils/wxApi"//调用上面封装的方法


Component({
    methods: {

        longpressMassage(e){
            //e.target.dataset.msg = 页面上 data-msg 后面绑定的文本内容
           setClipboardData(e.target.dataset.msg)
        },

    }
})