首先我們公司的項目用的是H5，今天有說讓實現(xiàn)微信，朋友圈，QQ，空間等分享功能，于是在網(wǎng)上找了很多資料，一開始發(fā)現(xiàn)網(wǎng)上都說的迷迷糊糊的，自己一臉懵。

而且產(chǎn)品還給我推薦了一個地址，讓我參考https://juejin.im/post/5a61a8b86fb9a01cba42a742（其實這個寫的挺好的），同時我也參考了微信開發(fā)平臺的分享功能https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115。

總結(jié)：H5無法實現(xiàn)直接調(diào)用手機(jī)App并實現(xiàn)分享功能，如果你想自定義分享的內(nèi)容，就必須在微信內(nèi)嵌的瀏覽器里面調(diào)用微信的分享接口（QQ瀏覽器就要調(diào)用它的相關(guān)api，其他瀏覽器也是），畢竟H5不是APP，有一些東西還是在APP上調(diào)用比較方便。H5方便的也就是直接使用瀏覽器自帶的分享功能（把當(dāng)前頁面的URL分享出去，分享的內(nèi)容根據(jù)瀏覽器自身而定）。

不過有個別分享是可以直接通過URL，自定義分享內(nèi)容的

效果圖：

（比較簡陋，但是能用）

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() {
      //此處分享鏈接內(nèi)無法攜帶圖片
      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() {
        //自定義內(nèi)容
      const share = {
        title: "東金秀財",
        desc: "描述",
        image_url: ["https://xxx.jpeg"],
        share_url: "https://地址"
      };
      let image_urls = share.image_url.map(function(image) {
        return encodeURIComponent(image);
      });
       //跳轉(zhuǎn)地址
      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() {
      //自定義內(nèi)容
      const share = {
        title: "東金秀財",
        image_url: ["https://xxx.jpeg"],
        share_url: "https://地址"
      };
      //跳轉(zhuǎn)地址
      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>