1. 程式人生 > >JS--微信瀏覽器復制到剪貼板實現

JS--微信瀏覽器復制到剪貼板實現

功能 使用場景 scrip 開發 boa mage 優惠券 解決 and

由於太忙很久沒寫博客了,如有錯誤遺漏,請指出,感謝!

首先這裏要註意,是微信瀏覽器下的解決方案,其他瀏覽器請自行測試。

先說復制到剪貼板主要有什麽使用場景:

  • 優惠券優惠碼,需要用戶復制
  • 淘寶商品,需要復制淘口令

由於最近在做自己的導購網站,大家可以用微信打開看效果,當然,購物也是可以的哈

技術分享

由於淘寶鏈接無法在微信中打開,所以淘寶開發了淘口令方便物質傳播,而導購網站在微信推廣的時候也是生成口令,用戶只需要復制口令,打開手機淘寶,即可看到對應的商品:

技術分享

這裏要使用的是一個非常強大的工具Clipboardjs,這個工具只需要引入對應的js,即可方便的完成上面的功能。

引入js,這裏我把js放在了服務器,通過url請求訪問即可,官網方法是下載對應的js文件:

<script src="https://www.fndroid.cn/static/js/clipboard.min.js"></script>

頁面代碼:

<div class="test-area">
    <input id="taokouling" value="{{code}}" type="text">
    <button id="copyCode" class="btn" data-clipboard-target="#taokouling" data-clipboard-action="copy">
復制淘口令 </button> <script type="text/javascript" src="http://www.fndroid.cn/clipboard.min.js"></script> <script> var clipboard = new Clipboard(.btn); clipboard.on(success, function(e){ console.log(e); document.getElementById(
copyCode).innerHTML = 復制成功; }); clipboard.on(error, function(e){ document.getElementById(copyCode).innerHTML = 復制失敗,請長按復制; }); </script> </div>

雖然這個代碼很簡單,但是卻能兼容當前版本的iOS和Android微信瀏覽器,查了很多的代碼才發現這個,所以記錄一下,後面的人如果需求一樣就不用走彎路了。

JS--微信瀏覽器復制到剪貼板實現