网站内容复制(尽可能让用户加微信的一个网页。(图)拆解)

　　网站内容复制(尽可能让用户加微信的一个网页。(图)拆解)

　　我之前接触过这样一个需求：呈现一个网页，尽可能让用户加微信。

　　首先确定它是在什么平台上（微信手机端、手机浏览器、PC浏览器），为什么要这样区分平台？

　　如何识别不同平台，请参考我的文章文章。正如标题所说，我想分享的是如何复制内容并跳转到微信。

　　我们拆解这个过程：用户点击页面元素→显示微信ID和跳转按钮→用户点击跳转到微信。

　　在这一点上，主要关注两点：复制内容和微信跳转。

　　复制内容

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

　　对于 document.execCommand，MDN 是这样说的：

　　“当一个 HTML 文档切换到设计模式时，它的文档对象公开了一个 execCommand 方法来运行操作当前可编辑区域的命令，例如表单输入或内容可编辑元素。”

　　我们可以得到的信息是，当HTML文档变为设计模式（designMode）时，文档提供了一个方法（execComand）来操作当前的可编辑区域，比如输入textarea。

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

　　第一个参数是需要的操作命令，主要是cut copy；后两个参数不是必需的。execComand这里就不多说了，大家可以移步这里了解更多。

　　让复制发生，

#popup{

display: none;

}

点击添加微信

关闭

uncle-tomlinson

复制成功

打开微信

//复制功能

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";

}

　　需要注意的一点是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://。如果在手机浏览器中打开微信重定向就可以实现。