Vue<分享功能>

首先我们公司的项目用的是H5，今天有说让实现微信，朋友圈，QQ，空间等分享功能，于是在网上找了很多资料，一开始发现网上都说的迷迷糊糊的，自己一脸懵。

而且产品还给我推荐了一个地址，让我参考https://juejin.im/post/5a61a8b86fb9a01cba42a742（其实这个写的挺好的），同时我也参考了微信开发平台的分享功能https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。

总结：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>