当前位置:   article > 正文

前端 uni-app 小程序 使用setClipboardData、getClipboardData实现 复制和粘贴功能 微信小程序和支付宝小程序APP都能使用,这里用的是vue3_uni.setclipboarddata

uni.setclipboarddata

1、准备阶段

1、先准备好要实现粘贴复制的代码

  1. <view class="form_left">
  2. <text class="form_one">订单编号</text>
  3. <text class="form_two">{{ orderNumber }}</text>
  4. <text class="form_copy" @click="copyChange(orderNumber)">复制</text>
  5. </view>
  1. <script setup>
  2. import { onLoad } from '@dcloudio/uni-app';
  3. import { ref } from 'vue';
  4. const orderNumber = ref('C2023020115CZ293829109819');
  5. // 复制订单编号
  6. const copyChange = (data) => {
  7. console.log('data', data);
  8. console.log('复制订单编号', 1111111);
  9. uni.setClipboardData({
  10. data: data,
  11. success: function (res) {
  12. console.log('success', res);
  13. uni.getClipboardData({
  14. success: function (res) {
  15. console.log('粘贴', res);
  16. }
  17. });
  18. uni.showToast({
  19. title: '复制成功',
  20. icon: 'none'
  21. });
  22. },
  23. fail: (error) => {
  24. console.log('失败', error);
  25. uni.showToast({
  26. title: '复制失败',
  27. icon: 'none'
  28. });
  29. }
  30. });
  31. };
  32. };
  33. </script>

2、如果用的是微信 wx.setClipboardData 和 wx.getClipboardData 我们需要先申请一个权限 

3、在微信公众平台申请权限  https://mp.weixin.qq.com/

  1. 进入公众平台后  -- 往下翻找到 设置模块 

  2. 右边找到 ---  服务内容声明 ---  用户隐私保护指引  ---- 点击更新

  3. 找到 开发者处理的信息  ----  增加信息类型 --- 弹出框选择 剪切板 -- 然后填写 

    开发者读取你的剪切板,用于 后面的信息

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/880359
推荐阅读
相关标签
  

闽ICP备14008679号