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

1.安装

npm install qrcode --save-dev

2.组件使用

javascript 复制代码

  
          <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>

javascript 复制代码

<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>

css 复制代码

<style scoped lang="scss">
.share {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  justify-content: center;
  .weibo {
    display: block;
    width: 24px;
    height: 21px;
    background-image: url("/assets/img/wb.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  .BJ_WB {
    background-color: #e6162d;
    width: 110px;
    height: 40px;
    margin-top: 15px;
    margin-right: 15px;
    display: flex;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    &:hover {
      background-color: #f75567;

      transform: translateY(-2px);
    }
  }

  .BJ_QQ {
    background-color: #2384cc;
    width: 110px;
    height: 40px;
    margin-top: 15px;
    margin-right: 15px;
    display: flex;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    &:hover {
      background-color: #5faae2;
      transform: translateY(-2px);
    }
  }

  .BJ_WX {
    background-color: #3cb034;
    width: 110px;
    height: 40px;
    margin-top: 15px;
    border-radius: 8px;
    /* position: relative; */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s;
    color: #fff;
    cursor: pointer;
    &:hover {
      background-color: #7dd377;
      transform: translateY(-2px);
    }
  }

  .BJ {
    background-color: rgb(255, 206, 0);
    width: 110px;
    height: 40px;
    display: flex;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 15px;
    cursor: pointer;
    &:hover {
      background-color: #ffde52;
      transform: translateY(-2px);
    }
  }

  .qq {
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("/assets/img/qq.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  .qqkj {
    display: block;
    width: 28px;
    height: 28px;
    background-image: url("/assets/img/qqkj.png");

    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }

  .weixinall {
    position: relative;
    display: flex;
    justify-content: center;
    .weixin {
      display: block;
      width: 28px;
      height: 28px;
      background-image: url("/assets/img/wx.png");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .weixincode {
      position: absolute;
      left: -60px;
      z-index: 1000 !important;
    }
  }
}

.qrcode-visible {
  opacity: 1 !important;
  pointer-events: auto;
}
</style>

效果