vue分享给QQ好友,QQ空间,微博

<script setup lang="ts">
//分享到QQ好友(PC端可用)
//自定义内容
const share = {
title: '分享测试',
desc: '测试描述',
image_url: [
'https://pic3.zhimg.com/80/v2-ab0718575cc9337b24bfc7578f5e6d32_720w.jpg',
],
share_url: 'https://xiucai.neafex.com/#/',
}
function shareToQQ() {
//此处分享链接内无法携带图片
window.open(
'https://connect.qq.com/widget/shareqq/index.html?url=' +
encodeURIComponent(share.share_url) +
'&title=' +
share.title +
'&desc=' +
share.desc
)
}
//分享到QQ空间(可用)
function shareToRoom() {
let image_urls = share.image_url.map(function (image) {
return encodeURIComponent(image)
})
//跳转地址
window.open(
'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
)
}
//分享到微博(可用)
function shareToMicroblog() {
//跳转地址
window.open(
'https://service.weibo.com/share/share.php?url=' +
encodeURIComponent(share.share_url) +
'&title=' +
share.title +
'&pic=' +
share.image_url +
'&searchPic=true'
)
}
</script>

<template>
<p>欢迎使用</p>
<div>
<button @click="shareToQQ()">分享到QQ</button>
<button @click="shareToRoom()">分享到QQ空间</button>
<button @click="shareToMicroblog()">分享到微博</button>
</div>
</template>