Vue页面分享QQ\QQ空间\微博\微信-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue页面分享QQ\QQ空间\微博\微信。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、封装js代码：share.js文件

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

// QQ空间
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}`
	)
}

//QQ
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 toDouban(url, title) {
// 	url = encodeURIComponent(url)
// 	title = encodeURIComponent(title)
// 	window.open(`http://www.douban.com/recommend?url=${url}&title=${title}`);
// }

//微信  需要单独写个页面展示二维码，使用微信扫描，点击右上角...分享
export function toWechat(url, title) {
	url = encodeURIComponent(url)
	title = encodeURIComponent(title)
	console.log('share.js', process.env)
	let page = this.$router.resolve({
		name: 'sailSoft',
		query: { newId: newId },
	});
	window.open(page.href, '_blank');
	// window.open(`${process.env.NUXT_ENV_APISERVER}/sharetoWechat?url=${url}&title=${title}`)
}

2、分享页面引入并使用：

<el-button type="primary" size="small" @click="share('QQ')">分享至QQ</el-button>
<el-button type="primary" size="small" @click="share('QQzone')">分享至QQ空间</el-button>
<el-button type="primary" size="small" @click="share('WeiBo')">分享至微博</el-button>
<el-button type="primary" size="small" @click="share('WeiXin')">分享至微信</el-button>

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

share(type) {
	const url = 'https://blog.csdn.net/2201_75870706'
	const title = '章小鱼分享啦！！！！'
	switch (type) {
		case 'QQ':
		    toQQ(url, title);
			break;
		case 'QQzone':
			toQQzone(url, title);
			break;
		case 'WeiBo':
			toWeibo(url, title);
			break;
		case 'WeiXin':
			toWechat(url, title);
			break;
		default:
			this.$message.error('出错了！')
			break;
	}
}

文章来源地址https://www.toymoban.com/news/detail-629301.html

到了这里，关于Vue页面分享QQ\QQ空间\微博\微信的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！