非微信内网页链接如何复制内容跳转微信?

作者 : 快手私信名片 本文共2219个字,预计阅读时间需要6分钟 发布时间: 2021-05-13 共18人阅读
17shou专业为中小微企业提供抖音落地页制作、设计;网站跳转微信;抖音私信名片制作;快手私信名片制作;快手落地页设计、制作;QQ私信名片;微信图文卡片;抖音快手网站建设;抖音快手私信系统定制开发;小程序开发;微商城开发;微信开发等服务项目。技术咨询QQ:2676163226

之前接触过这样一个需求:呈现给尽可能让用户加微信的一个网页

首先判断是在什么平台(微信移动端、手机端浏览器、PC端浏览器),为什么要这样区分平台?

如果是在微信内置浏览器,那或许就要把二维码图片放置到便于用户长按识别的位置;
如果是在手机端浏览器,那比较好的方式应该是自动复制微信号然后跳转到微信添加好友;
如果是在pc端浏览器,那最直接的方式就是展示显眼的二维码让用户扫了。
关于如何识别不同平台,可参考我的这篇文章。如标题所说,我要分享的是如何复制内容跳转微信。

我们把这个过程拆解开就是:用户点击页面某个元素→显示微信号和跳转按钮→用户点击跳转到微信。

那在这其中,主要关注的就是两个点:复制内容&微信跳转。

复制内容

一般认为,复制内容到剪贴板有两种方式,document.execComand命令和clipboard.js。

对于document.execCommand,MDN上是这样说的:

“When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region, such as form inputs or contentEditable elements.”

从中我们可以获取到的信息是,当HTML文档变为设计模式时(designMode),文档提供了一个操作当前可编辑区域的方法(execComand),编辑区域诸如input textarea。

execComand语法:bool=document.execCommand(aCommandName,aShowDefaultUI,aValueArgument)

第一个参数是必选的操作命令,主要有cut copy;后两个参数不是必须的。在这里就不细聊execComand的更多了,可以移步这里了解更多。

let copy happens,

<style>
#popup{
display: none;
}
</style>
</head>
<body>
<div id=”click”>点击添加微信</div>
<div id=”popup”>
<span id=”close”>关闭</span>
<div id=”wcid”>uncle-tomlinson</div>
<div>复制成功</div>
<div><a href=”weixin://” class=”btn” data-clipboard-action=”copy” data-clipboard-target=”#wcid”>打开微信</a></div>
</div>
<script>
//复制功能
var addc=document.getElementById(“click”);
var popp=document.getElementById(“popup”);
addc.onclick=function(){
popp.style.display=”block”;
//document.execCommand()方法
// var cont=document.getElementById(“wcid”).innerText;
// var cinput=document.createElement(“input”);
// cinput.value=cont;
// document.body.appendChild(cinput);
// cinput.select();
// document.execCommand(“Copy”);
// cinput.style.display=’none’;

//clipboard.js方法
var clipboard = new ClipboardJS(‘.btn’);
// clipboard.on(‘success’, function(e) {
// console.log(e);
// });
// clipboard.on(‘error’, function(e) {
// console.log(e);
// });
}
var close=document.getElementById(“close”);
close.onclick=function(){
popp.style.display=”none”;
}
</script>
需要注意的一点是,execCommand只支持在可编辑的区域上的操作,所以上面的js代码中出了一个创建input标签的操作。

这个方法有一个坑是,在ios端可能无法复制,然后我就转用clipboard.js,看到其他网友说到解决的办法用这句代码替换cinput.select();

input.setSelectionRange(0, input.value.length);
使用clipboard.js复制内容,这里就简单介绍下使用,准备下一遍博客把官方文档翻译遍。

使用的要点:在要复制的标签上做个锚点,然后在另外个标签上获取(如下),再随后就是在js代码中引用clipboard.js,再实例化一个ClipboardJs对象就可以正常使用了。

data-clipboard-action=”copy” data-clipboard-target=”#wcid”

微信跳转

跳转就是利用一个微信协议:weixin://。这样就可以实现,如果是在移动端浏览器打开跳转微信。

    提供快手商家号,快手服务号,快手蓝v认证,快手落地页,快手私信名片,快手消息卡片,快手跳转微信技术服务
    快手商家号_快手服务号_快手蓝v认证_快手落地页_快手名片卡片_快手跳转微信 » 非微信内网页链接如何复制内容跳转微信?

    常见问题FAQ

    跳转技术服务是免费的吗?
    哈哈哈,免费?难道我们是做慈善的?免费?这辈子都不可能免费!


    金价查询系统、今日金价、每日金价、国际金价走势、黄金价格、今日金价查询、每日金价查询、今日银价查询、每日银价查询、黄金价格走势 www.chajinjia.top、www.chajinjia.net、www.chajinjia.vip、www.chajinjia.com.cn、 www.chajinjia.cc、www.chajinjia.net.cn、www.chajinjia.ink、www.chajinjia.fit、 www.chajinjia.link、www.chajinjia.work、www.chajinjia.online、www.chajinjia.fun、www.chajinjia.site、www.chajinjia.shop、www.chajinjia.club、www.chajinjia.xyz、www.chajinjia.store