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

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

Vue入门之Web端CURD前端项目示例
Vue入门之Web端CURD前端项目示例随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...
【Lilishop商城】No4-1.业务逻辑的代码开发，涉及到：会员B端第三方登录使用及后端接口(微信、QQ等)
仅涉及后端,全部目录看顶部专栏,代码.文档.接口路径在: [Lilishop商城]记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客全篇会结合业务介绍重点设计逻辑,其中重点包括接口 ...
Vue项目打包移动端App(App打包教程)，简便直接
一.Vue项目打包移动端APP 需要准备的工具:Hbuilder 二.首先打包vue到dist目录 npm run build 三.然后再Hbuilder中打开dist目录首先可以看到dist目录的 ...
flutter和webapp_Flutter全平台！迁移现有Flutter项目到WEB端
写在前面 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS .Android.web和桌面 ...
Vue项目如何实现国际化？分享一下基于vue-i18n实现国际化的经验
vue项目如何实现国际化?分享一下基于vue-i18n实现国际化的经验 demo源码链接:https://github.com/XieTongXue/how-to/tree/master/vue-in ...
OpenCV-Python实战（21）——OpenCV人脸检测项目在Web端的部署
OpenCV-Python实战(21)--OpenCV人脸检测项目在Web端的部署 0. 前言 1. OpenCV 人脸检测项目在 Web 端的部署 1.1 解析请求并构建响应 1.2 构建请求进行测 ...
OpenCV-Python实战（20）——OpenCV计算机视觉项目在Web端的部署
OpenCV-Python实战(20)--OpenCV计算机视觉项目在Web端的部署 0. 前言 1. Python Web 框架简介 2. Flask 安装与使用 2.1 Flask 安装 2.2 ...
vue项目js文件引入第三方库组件
vue项目js文件引入第三方库组件 //首先按需引入第三方库 import { MessageBox } from 'element-ui' 使用: MessageBox.alert(`<di ...
Django项目之Web端电商网站的实战开发（一）
说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 项目源码下载目录一丶项目介绍二丶电商项目开发流程三丶项目需求四丶项目架构概览五丶项目数据库设计六丶项目框架搭建一丶 ...

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

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

最新文章

热门文章