小程序的点击复制功能和长按复制功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序的点击复制功能和长按复制功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：

在小程序中实现点击复制功能和长按复制功能,主要使用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文章来源地址https://www.toymoban.com/news/detail-503034.html

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


Component({
    methods: {

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

    }
})

到了这里，关于小程序的点击复制功能和长按复制功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！