关于ios点击分享自动复制到粘贴板的问题

前言

Android 系统没有什么特别的要求,实现这个也比较容易。但ios在某些情况下就会出现问题。

  1. 如果ios是点击之后,请求接口,再把接口的内容赋值给粘贴板肯定行不通,会被ios系统拦截,导致赋值失败或者赋值为空。
  2. 建议使用第三方库clipboard.js来实现粘贴板赋值
  3. 将点击的dom设置为一个button最好实现。
js 复制代码
<!-- 辅助copy的button Android不需要被用户查看 -->
<button id="copy-share" ref="copyBtn" v-show="showBtn">
	Copy to clipboard
</button>

import ClipboardJS from 'clipboard';

const copyBtn = ref('')
const showBtn = ref(false)
const handleShareLink = async () => {
	// 这是一个异步函数
	const res = await shareLinkGenerate({
      ...
    })
    if(res) {
	    copyBtn.value.setAttribute('data-clipboard-text', res); // 并且将这个res的结果,赋值给这个按钮
	    var clipboard = new ClipboardJS('#copy-share'); // 如果请求成功了 让clipboard 和按钮绑定
	    clipboard.on('success', function(e) {  // 成功的回调
	        showSuccessToast('分享链接已复制');
	        e.clearSelection();
	    });
	    clipboard.on('error', function(e) { // 和失败的回调
	      showToast('复制失败');
	      e.clearSelection();
	    });
    	//判断是不是ios系统或者苹果系列
    	if (navigator?.userAgent?.match(/(iPhone|iPod|iPad);?/i)) {
	       	// 控制让一个按钮出现,或者弹一个按钮出来,让用户再点击这个按钮一次
	       	showBtn.value = true
	        return
      } else {
		// 如果不是苹果,就可以直接赋值给剪贴板了copyBtn 就是对应的按钮
        const handleCopy = () => {
          if(copyBtn.value) {
            copyBtn.value.click()
          }
        }
        setTimeout(() => {
          handleCopy()
        },1000)	
	  }
    }
}
相关推荐
2501_916007473 小时前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview
2501_915909065 小时前
iOS 应用上架全流程解析,苹果应用发布步骤、ipa 上传工具、TestFlight 测试与 App Store 审核经验
android·macos·ios·小程序·uni-app·cocoa·iphone
Jouzzy5 小时前
【iOS安全】iPhone X iOS 16.7.11 (20H360) Palera1n MacOS版 越狱教程
macos·ios·iphone
ZFJ_张福杰13 小时前
【Flutter】GetX最佳实践与避坑指南
android·flutter·ios·getx
阿蓝8581 天前
iOS代码架构
ios
非专业程序员1 天前
从0到1自定义文字排版引擎:原理篇
前端·ios
2501_915918411 天前
Video over HTTPS,视频流(HLSDASH)在 HTTPS 下的调试与抓包实战
网络协议·http·ios·小程序·https·uni-app·iphone
2501_916013742 天前
iOS 26 系统流畅度检测 从视觉特效到帧率稳定的实战策略
android·macos·ios·小程序·uni-app·cocoa·iphone
咕噜企业签名分发-淼淼2 天前
App防止恶意截屏功能的方法:iOS、Android和鸿蒙系统的实现方案
android·ios·harmonyos
游戏开发爱好者82 天前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone