需求：文章添加分享功能（包括微信、微博、QQ空间）

如下图所示：

 

 

点击图标分别跳转到如下界面：（实现效果如下）

 

 

 

 

 

 

话不多说直接代码（可以封装成组件）

<template>
  <div class="shareBox">
    分享到：
    <span class="hover-pointer" @click="shareToMicroblog()">
      <img src="@/assets/img/weibo.png" alt="" />
    </span>
    <span class="qqIcon hover-pointer" @click="shareToQQRom()">
      <img src="@/assets/img/QQKJ.png" alt="" />
    </span>
    <span class="hover-pointer" @click="shareToWeChat()">
      <img src="@/assets/img/weixin.png" alt="" />
    </span>
  </div>
</template>

<script>
export default {
  props: ["sysInfo"],  //父组件传过来的文章数据
  data() {
    return {
      shareUrl: location.href,
    };
  },
  methods: {
    /**
     * 分享到微博
     */
    shareToMicroblog() {
      //跳转地址
      window.open(
        "https://service.weibo.com/share/share.php?url=" +
          encodeURIComponent(this.shareUrl) +
          "&title=" +
          this.sysInfo
      );
    },
    /**
     * 分享到qq空间
     */
    shareToQQRom() {
      //跳转地址
      window.open(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(this.shareUrl) +
          "&title=" +
          this.sysInfo +
          "&summary=" +
          this.sysInfo
      );
    },
    /**
     * 分享到微信：需要单独画页面
     */
    shareToWeChat() {
      localStorage.setItem("shareUrl", this.shareUrl); // 存储当前页面地址，前端页面直接根据URL链接生成二维码
      let url = location.href.split("#")[0] + "#/Share/toWechat"; // 注意：#/Share/toWechat: 自己定义的路由
      window.open(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.shareBox {
  .iconfont {
    font-size: 22px !important;
  }
  .qqIcon {
    display: inline-block;
    margin: 0 10px;
  }
}
</style>

 

注意：

1.微信分享需要加另外画页面 加前端页面根据URL链接生成二维码功能

参考：Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码 – 微微一笑绝绝子 – 博客园 (cnblogs.com)

2.橙色字体需要换成你自己定义的变量（包括图片 路由  props中的值 ）

3.注意微信分享页面的路由设置，最好放在根路由中 （如下图 ）并同步到代码中

 

 

 

 

完结撒花！赶快试试吧

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/16922560.html
本博客文章均为作者原创，转载请注明作者和原文链接。

 

原文地址：http://www.cnblogs.com/wwyxjjz/p/16922560.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性