Vue项目实现web端第三方分享（qq、qq空间、微博、微信）

开发背景：文章详情页面需要分享到第三方，包括qq、qq空间、微博、微信。

一、封装一个share.js文件，放在目录/utils下

// share.js

// url - 需要分享的页面地址（当前页面地址）
// title - 分享的标题（文章标题）

export function toQQzone (url, title) {
  url = encodeURIComponent(url)
  title = encodeURIComponent(title)
  window.open(`https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}&desc=${title}&summary=${title}&site=${url}`)
}

export function toQQ (url, title) {
  url = encodeURIComponent(url)
  title = encodeURIComponent(title)
  window.open(`https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&source=${url}&desc=${title}&pics=`)
}

export function toWeibo (url, title) {
  url = encodeURIComponent(url)
  title = encodeURIComponent(title)
  window.open(`https://service.weibo.com/share/share.php?url=${url}&title=${title}&pic=&appkey=&sudaref=`)
}

export function toWechat (url, title) {
  url = encodeURIComponent(url)
  title = encodeURIComponent(title)
  // console.log(21, process.env.NUXT_ENV_APISERVER)
  window.open(`${process.env.NUXT_ENV_APISERVER}/sharetoWechat?url=${url}&title=${title}`)
}

二、引入使用

1、引入

import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/share.js'

2、使用

const url = 'https://blog.csdn.net/qq_40146789'
const title = '我是标题'
toQQzone(url, title);
toQQ(url, title);
toWeibo(url, title);
toWechat(url, title);

记录于2022-2-25