1. 程式人生 > >使用jquery.qrcode生成二維碼實現微信分享功能

使用jquery.qrcode生成二維碼實現微信分享功能

pen spa blog 插件 詳情 空間 asc inf pan

前言:

最近有個這樣的需求,在pc端的商品詳情頁增加分享功能。

微博分享、QQ好友分享、QQ空間分享這些都很常見。但是微信分享我還沒有手動寫過(以前改過)。

最終效果如下圖:

技術分享圖片

技術分享圖片

解決方案:使用jquery.qrcode插件生成二維碼

jquery.qrcode cdn地址 參見: https://www.bootcdn.cn/jquery.qrcode/

1.加載 jQuery 和 jquery.qrcode.js:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script 
src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

2.微信圖標的html代碼:

<!-- 微信圖標 -->
<div onclick="wxShow()">
  <img src="http://zixuephp.net/static/images/wechatshare.png" width="26">
</div>

3.創建一個用於包含 QRcode 圖片的 DOM 元素,比如 div。

二維碼彈出層html代碼:

<!-- 二維碼彈出層 
--> <div class="wx-qrcode-wrapper"> <!-- 遮罩層 --> <div class="mask"></div> <div class="wx-qrcode"> <h4>微信分享 <!-- 關閉圖標 --> <a href="javascript:;" class="icon-close2" onclick="wxHide()"> <img src="images/static_img/icon-close2.png"
alt=""> </a> </h4> <!-- 生成的二維碼容器 --> <div id="qrcode"></div> </div> </div>

4.現在開始寫js實現交互功能

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
  /* 生成二維碼 */
  $("#qrcode").qrcode({
    text: "https://github.com/jeromeetienne/jquery-qrcode", //設置二維碼內容 
    render: "table", //設置渲染方式
    width: 200, //設置寬度,默認生成的二維碼大小是 256×256
    height: 200, //設置高度 
    typeNumber: -1, //計算模式 
    background: "#ffffff", //背景顏色 
    foreground: "#000000" //前景顏色 
  });

  /* 點微信圖標,觸發二維碼彈出層顯示 */
  function wxShow() {
    $(.wx-qrcode-wrapper).show()
  }

  /* 關閉二維碼彈出層 */
  function wxHide() {
    $(.wx-qrcode-wrapper).hide()
  }

</script>

5.完成。

6.測試後產品反饋說二維碼掃不出來。。。

7.我把二維碼渲染方式 render 改成canvas就好了

render: "canvas"

參考文章:使用jquery.qrcode生成二維碼及常見問題解決方案

jquery.qrcode 官網:http://jeromeetienne.github.io/jquery-qrcode/

jquery.qrcode cdn:https://www.bootcdn.cn/jquery.qrcode/

使用jquery.qrcode生成二維碼實現微信分享功能