Frontend Javascript Generate QRCode

demo.js

import QRCode from 'qrcode'
document.addEventListener('DOMContentLoaded', function() {
    console.log("DOMContentLoaded");
    const baseUrl = "https://open.weixin.qq.com/connect/oauth2/authorize";
    const params = new URLSearchParams({
        appid: "wx49e1457a970ee840",
        redirect_uri: "https://qiwangtech.com/weixin/wechat/verify",
        response_type: "code",
        scope: "snsapi_base",
        state: "STATE"
    });
    const wechatAuthUrl = `${baseUrl}?${params.toString()}#wechat_redirect`;
    
    QRCode.toCanvas(document.getElementById('qrcode'), wechatAuthUrl, function (error) {
        if (error) console.error(error)
        console.log('success!');
    })
});

<!-- QR Code Test Section -->
<div class="bg-white py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center">
      <h2 class="text-3xl font-extrabold text-gray-900">
        微信授权测试
      </h2>
      <p class="mt-4 text-lg text-gray-500">
        扫描下方二维码进行微信授权测试
      </p>
    </div>
    <div class="mt-8 flex justify-center">
      <canvas id="qrcode"></canvas>
    </div>
  </div>
</div>