Vue-分享功能

今天分享一个小技巧，教你如何一分钟内学会用vue实现分享功能。

 

H5无法实现直接调用手机App并实现分享功能，如果你想自定义分享的内容，就必须在微信内嵌的浏览器里面调用微信的分享接口（QQ浏览器就要调用它的相关api，其他浏览器也是），毕竟H5不是APP，有一些东西还是在APP上调用比较方便。H5方便的也就是直接使用浏览器自带的分享功能（把当前页面的URL分享出去，分享的内容根据浏览器自身而定）。

不过有个别分享是可以直接通过URL，自定义分享内容的

 

效果图：

（比较简陋，但是能用）

 

 

 

image.png

代码如下：

 

 

 

完整代码呈上（方便复制粘贴）

<template>
  <div style="margin-top:100px;">
    <button @click="shareToQQ()">分享到QQ</button>
    <button @click="shareToRoom()">分享到QQ空间</button>
    <button @click="shareToMicroblog()">分享到微博</button>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //分享到QQ好友(PC端可用)
    shareToQQ() {
      //此处分享链接内无法携带图片
      const share = {
        title: "东金秀财",
        desc: "描述",
        share_url: "https://xiucai.neafex.com/#/"
      };
      location.replace(
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&desc=" +
          share.desc
      );
    },
    //分享到QQ空间(可用)
    shareToRoom() {
        //自定义内容
      const share = {
        title: "东金秀财",
        desc: "描述",
        image_url: ["https://xxx.jpeg"],
        share_url: "https://地址"
      };
      let image_urls = share.image_url.map(function(image) {
        return encodeURIComponent(image);
      });
       //跳转地址
      location.replace(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&pics=" +
          image_urls.join("|") +
          "&summary=" +
          share.desc
      );
    },
    //分享到微博(可用)
    shareToMicroblog() {
      //自定义内容
      const share = {
        title: "东金秀财",
        image_url: ["https://xxx.jpeg"],
        share_url: "https://地址"
      };
      //跳转地址
      location.replace(
        "https://service.weibo.com/share/share.php?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&pic=" +
          share.image_url +
          "&searchPic=true"
      );
    }
  }
};
</script>

<style>
</style>

微信公众号： 我的web前端自救之路

回复 加群 ，跟大佬们一起交流技术吧