手机版html+JavaScript点击微信号复制并打开微信代码

godkings · 发表于 2022-4-28 11:07:09

场景：手机端点击微信号时自动复制并提示复制成功，同时打开微信，作用是在某些页面上这样的功能可以方便用户快速添加客服微信号，避免那些在手机端不会使用复制的人不知道如何添加微信。

<!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>
<div class="px-3 mt-1">
<i class="bi bi-phone-vibrate"></i> 手机号码：<a href="tel:13601031286" class="link-danger"><span id="target">13601031286</span></a>
<button class="btn text-muted p-0 float-end" id="v2_copysj" data-clipboard-text="13601032186">复制号码</button>
<script>
$(document).ready(function(){
var clipboard = new ClipboardJS('#v2_copysj');
clipboard.on('success', function(e) {
alert("微信号复制成功",1500);
window.location.href='weixin://';
console.info('Text:', e.text);
e.clearSelection();
});
});
</script>
</div>
</body>
</html>

复制代码

注意：需要先引入jQuery和clipboard这两个js文件。

效果：手机上点击手机号码时会弹出拨打，点“复制号码”会提示复制成功并打开微信
微信截图_20220428105859.png

账号		自动登录	找回密码
密码			立即注册