点击复制以及长按识别图中二维码功能

功能介绍：1.点击复制按钮，复制指定内容；2.借助微信浏览器识别图中二维码。效果如图：

功能介绍

点击复制功能

前提：引入clipboard.js

html

<div class="guide-div" data-clipboard-target=".guide-content-token" data-clipboard-action="copy">
    <div class="guide-content-token">kj1111</div>
    <div class="guide-copy">点击复制</div>
</div>

js

$('.guide-copy').text('点击复制');

$('.guide-content-token').text(token);
$('.guide-content-qrcode img').attr('src', qrcode);

var clipboard = new Clipboard('.guide-div').on('success', function(e){
    $('.guide-copy').text('复制成功');
}).on('error', function(e){
    alert('复制失败')
});

特别注意：如果是IOS，必须对可点击的元素增加样式cursor: pointer;否则无效，也就是.guide-copy这个样式的元素必须要加cursor: pointer

识别图中二维码

这个功能简单，直接把二维码放在img标签就可以了。一般无法出现“识别图中二维码”的功能的原因是：二维码被当成背景，也就是放到background属性中。

这里要说的是一个小技巧，例如：左边是二维码，右边是指纹，提示用户长按指纹区域可以识别二维码。然后指纹区域附近又有文字，长按可能会出现复制而不是识别图中二维码。 解决方案就是：通过img增加padding-right, 增大可接触面积，可以实现该功能