在clipboard.js出現(xiàn)之前，如果要在前端用一個(gè)按鈕復(fù)制網(wǎng)頁(yè)的內(nèi)容復(fù)制到剪貼板，最好的辦法就是通過(guò)Flash,因?yàn)樗募嫒菪宰詈?。但是隨著Flash江河日下，這種辦法的也就逐漸的被淘汰掉了。
clipboard.js有著出色的兼容性，無(wú)論是PC端、移動(dòng)端都沒(méi)有任何兼容問(wèn)題（真的是這樣嗎，不，對(duì)微信內(nèi)置的瀏覽器可不這樣美好）。它們的主頁(yè)是這樣介紹這個(gè)產(chǎn)品的：“拷貝文本到剪貼板不應(yīng)該是一件復(fù)雜的事，不應(yīng)該需要許多步驟以及幾百KB的文件，另外，它不應(yīng)該依靠flash以及其他框架，這就是clipboard存在的原因?！?/p>
我最終使用的是1.71的最新版本，使用min.js版本只有11K。也就是說(shuō)，這個(gè)工具非常高效。
好像使用微信內(nèi)置瀏覽器去兼容clipboard.js這種需求并不多。至少我在google里面搜相關(guān)的信息搜不到這個(gè)答案。不過(guò)倒是有人提出相關(guān)的問(wèn)題，但沒(méi)有任何答案。
我來(lái)說(shuō)說(shuō)為什么我需要這種需求（就是需要在微信端的內(nèi)置瀏覽器上進(jìn)行復(fù)制操作）。大家知道，最近通過(guò)微信群發(fā)優(yōu)惠券的淘客們?nèi)兆舆^(guò)得可不滋潤(rùn)了，微信通過(guò)檢測(cè)淘口令的方法，對(duì)發(fā)商品過(guò)多的用戶(hù)進(jìn)行封鎖。一時(shí)間，哀鴻遍野。
使用淘口令打開(kāi)手機(jī)淘寶直接到優(yōu)惠券的確是一個(gè)最方便的辦法。但由于微信需要支付大量的流量費(fèi)用，而最終的受益者是淘寶，微信當(dāng)然不愿意看到這種局面，所以進(jìn)行封鎖。所謂道高一尺魔高一丈，淘客們也紛紛采用了各種方法以逃避微信封鎖。
其中比較好的方法是采用第三方網(wǎng)站進(jìn)行淘口令復(fù)制。也就是說(shuō)，在發(fā)布商品里面沒(méi)有淘口令，也沒(méi)有淘寶方的鏈接。通過(guò)第三方網(wǎng)站的鏈接或者識(shí)別圖片的二維碼打開(kāi)第三方網(wǎng)站，通過(guò)網(wǎng)頁(yè)的淘口令進(jìn)行復(fù)制。
很簡(jiǎn)單的淘客網(wǎng)站，我們需要一個(gè)后臺(tái)，后臺(tái)將管理用戶(hù)和密碼，再通過(guò)用戶(hù)再去增編刪商品，商品數(shù)據(jù)庫(kù)字段：商品ID,商品名稱(chēng)，商品淘口令即可。
我們?cè)赾lipboard.js的Demo里面看到了簡(jiǎn)單應(yīng)用代碼，如下，非常簡(jiǎn)單：
<!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>
從上面的代碼可以看出，通過(guò)button，class名為btn，復(fù)制內(nèi)容為div里面的內(nèi)容，這里最好使用id,可以非常精確的指定復(fù)制內(nèi)容。如我下面的代碼。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>點(diǎn)擊復(fù)制，優(yōu)惠無(wú)限</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>舜安特加厚車(chē)用洗車(chē)毛巾吸水抹布</p>
<p
class="lead"></p>
<p><button class="btnClipboard" data-clipboard-action="copy" data-clipboard-target="#copy">復(fù)制</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>
運(yùn)行之后，我在PC,IPAD,安卓手機(jī)移動(dòng)瀏覽器上測(cè)試均沒(méi)有問(wèn)題，唯獨(dú)在微信端不行，復(fù)制能指定到所在的ID區(qū)域，但是并不能被復(fù)制到剪貼板上面來(lái)。
GOOGEL了很久換了很多的關(guān)鍵詞，始終找不到相關(guān)的答案。最后只能在自身找問(wèn)題了。
微信內(nèi)置瀏覽器是不可能專(zhuān)門(mén)針對(duì)clipboard.js做限制的，更多的考量是安全性問(wèn)題，那么網(wǎng)頁(yè)內(nèi)容不能被復(fù)制的話，那我使用input type="text" 文本輸入框應(yīng)該可以吧。于是我修改了一下相關(guān)代碼，運(yùn)行測(cè)試通過(guò)：
<div class="container body-content">
<div class="jumbotron">
<h2>舜安特加厚車(chē)用洗車(chē)毛巾吸水抹布</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">復(fù)制</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>
運(yùn)行如下圖。
在淘客網(wǎng)站的下一篇，我來(lái)制作一個(gè)帶有二維碼的商品圖片。基本思路是這樣的，通過(guò)復(fù)制商品的圖片（一般是在QQ群或者微信群），然后顯示在網(wǎng)頁(yè)的Canvas里面，再將相對(duì)應(yīng)的網(wǎng)址生成二維碼，也在Canvas顯示，最終自動(dòng)合成為一個(gè)圖片。那么就可以復(fù)制到群里面去，圖片就帶有二維碼了。而不用打開(kāi)圖像編輯軟件，直接在代碼里面生成。
下次再見(jiàn)。
