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