【uniapp】读取剪切板，长按复制、【h5】点击复制，打开手机应用

来自湖南的阿晨

已于 2023-11-13 17:10:55 修改

阅读量3.5k

点赞数 1

分类专栏： uniapp全栈 wx小程序文章标签： uni-app 小程序 javascript

于 2023-07-09 10:44:17 首次发布

本文链接：https://blog.csdn.net/weixin_52479803/article/details/131597928

版权

uniapp全栈同时被 2 个专栏收录

20 篇文章 3 订阅

订阅专栏

wx小程序

9 篇文章 0 订阅

订阅专栏

uniapp实现读取手机剪切板需求

效果图：

完整代码：

<template>
	<view class="">
		<text>测试</text>
		<view @click="pasteContent()" class="content">
			点击此处可快速识别 您的收货信息
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressData: {
					name: '',
					phone: '',
					details: '', //详细地址
				},
			}
		},
		methods: {
			//获取到剪切板的内容，快速识别收货地址
			pasteContent() {
				var that = this
				// 获取系统剪贴板内容
				uni.getClipboardData({
					success: (res) => {
						
						const text = res.data;
						const phoneNumber = this.extractPhoneNumber(text);
						const name = this.extractName(text, phoneNumber);
						const address = this.extractAddress(text, phoneNumber);

						// 去除特殊字符和前缀标识
						const cleanedName = this.cleanText(name);
						const cleanedPhoneNumber = this.cleanText(phoneNumber);
						const cleanedAddress = this.cleanText(address);

						// 在这里可以对姓名、手机号和收货地址进行处理
						// 例如，将提取到的信息填充到表单中

						console.log('姓名:', cleanedName);
						console.log('手机号:', cleanedPhoneNumber);
						console.log('收货地址:', cleanedAddress);
						if (cleanedName != '') {
							that.addressData.name = cleanedName
						}
						if (cleanedPhoneNumber != '') {
							that.addressData.phone = cleanedPhoneNumber
						}
						if (cleanedAddress != '') {
							that.addressData.details = cleanedAddress
						}
					}
				});
			},
			//1姓名 通过正则找到电话
			extractPhoneNumber(text) {
				const reg = /\d{11}/;
				const match = text.match(reg);
				const phoneNumber = match ? match[0] : '';
				return phoneNumber;
			},
			//2手机号 截取0到电话第一次出现的位置
			extractName(text, phoneNumber) {
				const index = text.indexOf(phoneNumber);
				const name = index > 0 ? text.substring(0, index).trim() : '';
				return name;
			},
			//3地址 从电话第一次出现的位置+电话长度开始截取
			extractAddress(text, phoneNumber) {
				const index = text.indexOf(phoneNumber);
				const address = index > 0 ? text.substring(index + phoneNumber.length).trim() : '';
				return address;
			},
			// 4去除特殊字符和前缀标识
			cleanText(text) {
				const cleanedText = text.replace(/\/|姓名：|手机号：|收货地址：|详细地址：/g, '');
				return cleanedText;
			},

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: white;
		height: 120rpx;
		text-align: center;
	}
</style>

uniapp实现长按内容复制需求：

第一种方式：点击按钮复制到剪切板

<template>
	<view class="">
		<text>测试赋值文字</text>
		<text>{{cloneText}}</text>
		<button @click="cloneClick">点击复制</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cloneText: '我是要复制的内容、我是要复制的内容、我是要复制的内容'
			}
		},
		methods: {
			cloneClick() {
				// 设置系统剪贴板的内容
				uni.setClipboardData({
					data: this.cloneText,
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				})
			}
		}
	}
</script>

ps：多次点击也只会复制一次

第二种方式：长按内容复制到剪切板

<template>
	<view class="">
		<text>长按复制</text>
		<!-- longpress如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。 -->
		<text @longpress='copyText'>{{cloneText}}</text>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				cloneText: 'v我50看看实力、v我50看看实力、v我50看看实力'
			}
		},
		methods: {
			copyText() {
				uni.setClipboardData({
					data: this.cloneText,
					success() {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'none',
						})
					}
				})
			}
		}
	}
</script>

h5

效果展示

所需js：

引用jquery.js 和 clipboard.min.js

jQuery就不用多说了，而clipboard.min.js 是一个 JavaScript 库，用于实现网页上的复制到剪贴板功能。它提供了一种简单的方式来处理复制操作，无需使用浏览器原生的复制命令或手动选中文本并右键复制

代码如下：

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script> 
    <title>点击复制微信号并自动打开微信应用</title>    
</head>    
<body>    
<span id="target">微信号123132</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>    
</body>    
<script>    
    $(document).ready(function(){      
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号复制成功",1500);
            window.location.href='weixin://';
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>

代码注解：

e.clearSelection() ：清除用户选择的文本

data-clipboard-action="copy"：指定了复制操作的类型为 "copy"，表示点击按钮时将执行复制操作。

data-clipboard-target="#target"：指定了要复制的目标元素的选择器，该选择器为 #target，表示要复制具有 id="target" 的元素的文本内容。

协议注解：URL Scheme

URL Scheme，是Android，Scheme是一种页面内跳转协议

简单的说，URL Scheme就是一个可以让app相互之间可以跳转的协议。每个app的URL Scheme都是不一样的

要在浏览器中打开淘宝和知乎等应用程序，可以使用类似的方法：

//打开淘宝
window.location.href = 'taobao://';

//打开知乎
window.location.href = 'zhihu://';

来自湖南的阿晨

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
【uniapp】读取剪切板，长按复制、【h5】点击复制，打开手机应用

【uniapp】读取剪切板，长按复制、【h5】点击复制，打开手机应用
复制链接

扫一扫

专栏目录