Vue 项目中实现的微信、微博、QQ空间分享功能（亲测有效）

已于 2023-03-15 09:17:03 修改
阅读量2.7k 收藏 15
点赞数 2
分类专栏： 前端 Vue 文章标签： vue.js 微信 前端 javascript ecmascript
于 2022-11-24 17:38:00 首次发布
本文链接：https://blog.csdn.net/wwyxjjz/article/details/128028357
版权
本文介绍如何在Vue项目中添加微信、微博、QQ空间的分享功能。通过点击图标，跳转到相应分享界面。实现过程中，微信分享需要借助前端页面生成二维码，并注意代码中的变量替换和路由配置。详情见作者微微一笑绝绝子的博客园文章。
摘要由CSDN通过智能技术生成

需求：文章添加分享功能(包括微信、微博、QQ空间)

如下图所示：

点击图标分别跳转到如下界面：(实现效果如下)

不知道为什么在csdn显示图片违规，可以去我的博客园看完整版，点击下方链接

https://www.cnblogs.com/wwyxjjz/p/16922560.html

 

 

话不多说直接

最低0.47元/天 解锁文章
微微一笑绝绝子
关注
专栏目录
关于VUE项目中使用微信分享功能
qq_36396584的博客
09-25 1147
一、引入sdk npm install --save-dev weixin-js-sdk 二、写一个外部js wetchat.js import { weixinGetSign } from '@/api/index'; //weixinGetSign 为后台接口名 import wx from 'weixin-js-sdk'; // 引入wxJS const wxApi = { /** * [wxRegister 微信Api初始化] * @param {Function} c
Vue项目实现web端第三方分享（qq、qq空间、微博、微信）
我的博客
02-25 2838
开发背景：文章详情页面需要分享到第三方，包括qq、qq空间、微博、微信。 一、封装一个share.js文件，放在目录/utils下 // share.js // url - 需要分享的页面地址（当前页面地址） // title - 分享的标题（文章标题） export function toQQzone (url, title) { url = encodeURIComponent(url) title = encodeURIComponent(title) window.open(`
vue 微信分享功能
Suger的博客
12-02 3036
微信分享
使用Vue3实现社交媒体分享，结合分享API
最新发布
有我更精彩的博客
07-30 537
分享API（Web Share API）是一种允许网页内容轻松分享至用户设备上的外部应用程序的机制。这一API简化了分享的过程，开发者无需自己创建分享链接或弹出窗口，只需调用API即可。需要注意的是，该API在移动浏览器中支持更为广泛，尤其是在Chrome和Safari等主流浏览器中。本文展示了如何使用Vue 3和Web Share API非常简单地实现社交媒体分享功能。你只需几个简单的步骤，就能够让你的应用程序拥有一个现代化的分享功能。随着应用的发展，你可以根据需求继续扩展分享功能，提升用户体验。
vue 微信分享
yusun1234的博客
08-17 1397
一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友。vue项目中，分享携带头部标题、简介和缩略图等信息。
VUE + 微信分享
追风筝的博客
12-06 3241
项目场景： 项目场景：一个h5界面要求点击右上角三个点后点击微信好友分享带标题和图片给好友 效果图如下 首先得得下载微信的 weixin-js-sdk cnpm i weixin-js-sdk --save 在需要分享的页面引入 import wx from 'weixin-js-sdk'; // 引入wxjs import { shares } from '@/api/index'; // 分享的接口 传给后端一个地址(与域名一致) 在methods写调用的方法 // vue调用微信的自定义分
vue 实现微信分享
m0_73333688的博客
07-31 1608
在这个后端接口中，你需要使用你的微信公众号的AppID和AppSecret来进行签名验证，并生成一个包含参数的JSON返回给前端。在Vue组件中配置微信分享参数：在需要进行分享的Vue组件中，可以使用Vue的生命周期钩子函数（如created或mounted）来配置微信分享的参数。配置后端接口：上述代码中的YOUR_BACKEND_API_URL需要由你自己的后端接口来提供微信分享的参数。您可以参考微信官方文档中关于JS-SDK的介绍和使用说明，以了解更多关于微信分享的信息和配置方法。
vue分享至qq空间，新浪微博，微信朋友圈及微信好友
kleinBlue.的博客
11-23 710
分享至qq空间，新浪微博，微信朋友圈及微信好友 本博客主要针对pc网页版分享，移动端相似之处不做参考 关于分享，对于分享到qq空间、好友及新浪微博比较简单，给一个点击事件调用一下官方接口就可以了，自己绑定一些标题、链接、图片内容就可以了 分享到qq空间及好友 qq空间： https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=
html分享到微博,h5页面分享到微信、朋友圈、新浪微博、QQ空间、QQ好友组件
weixin_39918690的博客
06-04 1178
h5页面分享组件、支持分享到微信、朋友圈、新浪微博、QQ空间、QQ好友。执行逻辑-微信客户端手qqq浏览器uc浏览器其他浏览器分享到微信提示点击右上角分享提示点击右上角分享native分享native分享弹层提示分享到朋友圈提示点击右上角分享提示点击右上角分享native分享native分享弹层提示分享到qq提示点击右上角分享提示点击右上角分享native分享-弹层提示分享到qq空间提示点击右上角...
vue项目中实现的微信分享功能示例
01-21
本文实例讲述了vue项目中实现的微信分享功能。分享给大家供大家参考，具体如下： /* 微信分享 */ Vue.prototype.wechatShare = (shareData) => { let resource = { title: '随我心愿！', desc: '体验优质服务', link: 'https://www.abc.cn/', img: 'http://huoche.7234.cn/images/jb51/abnprpojuhp.jpg' } let obj = Object.assign({}, resource, shareData) let p
vue使用微信JS-SDK实现分享功能
10-16
主要介绍了vue使用微信JS-SDK实现分享功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现微信分享功能
12-02
本文实例为大家分享了vue实现微信分享功能的具体代码，供大家参考，具体内容如下 1.引入微信js [removed][removed] 2.从后台获取签名并分享 fenxiangFun(){//详情分享 var that = this; this.$http({ url:this.changeData() + '/member/weChatShare', method: "post", params: { url : window
VueJs单页应用实现微信网页授权及微信分享功能示例
10-19
本篇文章主要介绍了VueJs单页应用实现微信网页授权及微信分享功能示例，具有一定的参考价值，有兴趣的可以了解一下
vue使用微信SDK实现 微信二次分享信息不丢失
qq_40588166的博客
11-10 321
1)下载微信sdk yarn add weixin-js-sdk 2)调用后端接口，获取需要公众号配置的信息appId,timestamp,nonceStr,signature,ticket 3）配置wx let wx = {} const that = this wx = require('weixin-js-sdk') wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客
vue 实现分享功能
qq_35377714的博客
05-15 1308
vue 实现分享功能
Vue-分享功能
weixin_43964148的博客
12-08 5311
今天分享一个小技巧，教你如何一分钟内学会用vue实现分享功能。 H5无法实现直接调用手机App并实现分享功能，如果你想自定义分享的内容，就必须在微信内嵌的浏览器里面调用微信的分享接口（QQ浏览器就要调用它的相关api，其他浏览器也是），毕竟H5不是APP，有一些东西还是在APP上调用比较方便。H5方便的也就是直接使用浏览器自带的分享功能（把当前页面的URL分享出去，分享的内容根据浏览器自身...
vue+h5+js-sdk 实现分享的功能（分享至好友/朋友圈）
Missbelover的博客
04-03 2919
用户在h5 页面中实现微信的分享至好友、分享至朋友圈的功能、且实现的方式为卡片的形式（附带效果图、踩过的坑、注意事项）
vue3实现视频分享微信微博功能
05-10
要实现视频分享到微信和微博，可以使用第三方的分享插件，例如`vue-social-share`。以下是使用该插件的步骤： 1. 安装`vue-social-share`插件 ``` npm install vue-social-share --save ``` 2. 在项目入口文件中引入和注册`vue-social-share` ```javascript import VueSocialShare from 'vue-social-share' Vue.use(VueSocialShare) ``` 3. 在需要分享的页面中使用`vue-social-share`组件 ```html <template> <div> <video ref="videoPlayer" src="video.mp4"></video> <div> <social-share url="https://example.com" title="视频分享" description="这是一个视频分享" media-src="https://example.com/video.jpg"></social-share> </div> </div> </template> ``` 在`social-share`组件中，我们可以通过设置`url`、`title`、`description`和`media-src`属性来指定分享的链接、标题、描述和媒体资源。其中，`media-src`属性需要指定一个图片链接，用于微博分享时生成缩略图。 完成以上步骤后，我们就可以在页面中看到分享按钮，并且点击按钮后可以选择分享到微信或微博。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值