Vue项目实现web端第三方分享(qq、qq空间、微博、微信)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
开发背景:文章详情页面需要分享到第三方,包括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
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
9e887079
[skip ci] 1 年前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)