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

前言：

最近有個這樣的需求，在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/