nuxt3网站文章分享微信 ,QQ功能

1.安装
npm install qrcode --save-dev
2.组件使用

  
          <div class="share">
            <div style="line-height: 69px; color: #fff;width: 100px;">
              <p style="text-align: center;">分享:</p>
            </div>

            <div @click="shareToMicroblog()" class="BJ_WB">
              <a class="weibo" />
              <a>微博</a>
            </div>

            <!-- <div @click="shareToQQ()" class="BJ_QQ">
                <a class="qq"></a>
                <a>QQ好友</a>
              </div> -->

            <div
              class="BJ_WX"
              @mouseover="showQR = true"
              @mouseleave="showQR = false"
            >
              <div class="weixinall">
                <a class="weixin" />
                <a>微信</a>
              </div>
              <div
                class="weixincode"
                :class="{ 'qrcode-visible': showQR }"
                style="
                  position: absolute;
                  top: -220px;

                  opacity: 0;
                  transition: opacity 0.3s ease;
                  width: 200px;
                  height: 200px;
                  background-color: #fff;
                "
              >
                <canvas
                  id="QRCode_header"
                  style="width: 165px; height: 165px; margin: auto"
                />
                <p
                  style="
                    color: #818181;
                    font-size: 12px;
                    line-height: 16px;
                    margin-left: 15px;
                  "
                >
                  打开微信扫一扫<br />将您喜欢的内容分享微信朋友圈
                </p>
              </div>
            </div>

            <div class="BJ" @click="shareToQQRom()">
              <a class="qqkj"></a>
              <a>QQ</a>
            </div>
          </div>

<script setup lang="ts">
import QRCode from "qrcode";
const route = useRoute();
const id = ref(route.params.id);
const showQR = ref(false);
const shareUrl = `https://XXXXXXX.COM/XXXXXXXXXX/${id.value}`;
//分享到QQ
// const shareToQQ= function() {
//   window.open(
//       `https://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&title=${sysInfo}&source=${shareUrl}&desc=${sysInfo}&pics=`)
// }
//分享到微信
onMounted(() => {
  const QR_OPTIONS = {
    errorCorrectionLevel: "H",
    width: 165,
    height: 165,
    margin: 3,
    color: {
      dark: "#000",
      light: "#fff",
    },
    
  };

  QRCode.toCanvas(
    document.querySelector("#QRCode_header"),
    shareUrl,
    QR_OPTIONS,
    (error: any) => {
      if (error) console.error("二维码生成失败:", error);
    }
  );
});

//分享到微博
const shareToMicroblog = function () {
  window.open(
    `https://service.weibo.com/share/share.php?url=${shareUrl}&title=${details.value.productBackground}`
  );
};

//分享到qq空间
const shareToQQRom = function () {
  const pics = encodeURIComponent(details.value.productBackgroundImage);
  const desc = encodeURIComponent(details.value.productBackground);
  window.open(
    `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${shareUrl}&title=${details.value.productBackground}&summary=${details.value.productBackground}&desc=${desc}&pics=${pics}`
  );
};
</script>

效果