在clipboard.js出现之前，如果要在前端用一个按钮复制网页的内容复制到剪贴板，最好的办法就是通过Flash,因为它的兼容性最好。但是随着Flash江河日下，这种办法的也就逐渐的被淘汰掉了。
clipboard.js有着出色的兼容性，无论是PC端、移动端都没有任何兼容问题（真的是这样吗，不，对微信内置的浏览器可不这样美好）。它们的主页是这样介绍这个产品的：“拷贝文本到剪贴板不应该是一件复杂的事，不应该需要许多步骤以及几百KB的文件，另外，它不应该依靠flash以及其他框架，这就是clipboard存在的原因。”
我最终使用的是1.71的最新版本，使用min.js版本只有11K。也就是说，这个工具非常高效。
好像使用微信内置浏览器去兼容clipboard.js这种需求并不多。至少我在google里面搜相关的信息搜不到这个答案。不过倒是有人提出相关的问题，但没有任何答案。
我来说说为什么我需要这种需求（就是需要在微信端的内置浏览器上进行复制操作）。大家知道，最近通过微信群发优惠券的淘客们日子过得可不滋润了，微信通过检测淘口令的方法，对发商品过多的用户进行封锁。一时间，哀鸿遍野。
使用淘口令打开手机淘宝直接到优惠券的确是一个最方便的办法。但由于微信需要支付大量的流量费用，而最终的受益者是淘宝，微信当然不愿意看到这种局面，所以进行封锁。所谓道高一尺魔高一丈，淘客们也纷纷采用了各种方法以逃避微信封锁。
其中比较好的方法是采用第三方网站进行淘口令复制。也就是说，在发布商品里面没有淘口令，也没有淘宝方的链接。通过第三方网站的链接或者识别图片的二维码打开第三方网站，通过网页的淘口令进行复制。
很简单的淘客网站，我们需要一个后台，后台将管理用户和密码，再通过用户再去增编删商品，商品数据库字段：商品ID,商品名称，商品淘口令即可。
我们在clipboard.js的Demo里面看到了简单应用代码，如下，非常简单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target-div</title>
</head>
<body>
<!-- 1. Define some markup -->
<div>hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
<!-- 2. Include library -->
<script src="../dist/clipboard.min.js"></script>
<!-- 3. Instantiate clipboard -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
从上面的代码可以看出，通过button，class名为btn，复制内容为div里面的内容，这里最好使用id,可以非常精确的指定复制内容。如我下面的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击复制，优惠无限</title>
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/css.css" rel="stylesheet" />
<script src="/js/jquery-1.10.2.min.js"></script>
<body>
<div class="container body-content">
<div class="jumbotron">
<h2 id="copy">《LuPS0389cDX《</h2>
<p>舜安特加厚车用洗车毛巾吸水抹布</p>
<p
class="lead"></p>
<p><button class="btnClipboard" data-clipboard-action="copy" data-clipboard-target="#copy">复制</button></p>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btnClipboard');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
运行之后，我在PC,IPAD,安卓手机移动浏览器上测试均没有问题，唯独在微信端不行，复制能指定到所在的ID区域，但是并不能被复制到剪贴板上面来。
GOOGEL了很久换了很多的关键词，始终找不到相关的答案。最后只能在自身找问题了。
微信内置浏览器是不可能专门针对clipboard.js做限制的，更多的考量是安全性问题，那么网页内容不能被复制的话，那我使用input type="text" 文本输入框应该可以吧。于是我修改了一下相关代码，运行测试通过：
<div class="container body-content">
<div class="jumbotron">
<h2>舜安特加厚车用洗车毛巾吸水抹布</h2> <input id="copy" type="text" value="《LuPS0389cDX《" class="form-control" readonly>
<p
class="lead"></p>
<p><button class="btnClipboard" data-clipboard-action="copy" data-clipboard-target="#copy">复制</button></p>
</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/clipboard.min.js"></script>
<script>
var clipboard = new Clipboard('.btnClipboard');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
</script>
运行如下图。
mark
在淘客网站的下一篇，我来制作一个带有二维码的商品图片。基本思路是这样的，通过复制商品的图片（一般是在QQ群或者微信群），然后显示在网页的Canvas里面，再将相对应的网址生成二维码，也在Canvas显示，最终自动合成为一个图片。那么就可以复制到群里面去，图片就带有二维码了。而不用打开图像编辑软件，直接在代码里面生成。
下次再见。
网友评论