Vue<分享功能>

首先我們公司的項目用的是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>


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 先引入JS 文件 this.wxShare() 在created里調(diào)用 首先登陸微信公眾號 JSSDK使用步驟 步...
    寄魚予海與你閱讀 6,755評論 1 3
  • 作者 | 羅虎琳 冷玉窺人簡光皎,常伴孤燈將影挑。 愈卷經(jīng)絲甘自縛,漸聞天聲燃犀角。 何得清明上河去,幾多星月戴板...
    Princelene閱讀 207評論 1 0
  • 看那櫻花開 那盛開的櫻花 靜靜的站在那里 款款深情的目光 如你的愛戀如癡如醉 一陣微風(fēng) 不知深淺的來 漫天飛舞的花...
    清風(fēng)_ef94閱讀 255評論 0 0
  • 臘月9.10點的早晨雖天氣寒冷但幸有艷陽,坐在咖啡店中喝著咖啡吃著面包,并未意識到自己最愛的女孩的來臨...
    異地人閱讀 260評論 0 0