vue分享至qq空间,新浪微博,微信朋友圈及微信好友
vue分享至qq空间,新浪微博,微信朋友圈及微信好友
本博客主要针对pc网页版分享,移动端相似之处不做参考
关于分享,对于分享到qq空间、好友及新浪微博比较简单,给一个点击事件调用一下官方接口就可以了,自己绑定一些标题、链接、图片内容就可以了
分享到qq空间及好友
qq空间:
https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=你的网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片&summary=你的分享描述信息
qq好友:
http://connect.qq.com/widget/shareqq/index.html?url=你的分享网址&sharesource=qzone&title=你的分享标题&pics=你的分享图片地址&summary=你的分享描述&desc=你的分享简述
获取当前网址要用encodeURIComponent(document.location)
分享到新浪微博
http://service.weibo.com/share/share.php?url=你的分享网址&sharesource=weibo&title=你的分享标题&pic=你的分享图片&appkey=你的key,需要在新浪微博开放平台中申请
分享到微信
首先需要安装微信的js-sdk,这里我安装的是1.4.0版本,之后在需要使用的地方引入就可以了(这里的引入方式是采用下面的这种方式)
npm i weixin-js-sdk --save
const wx = require(‘weixin-js-sdk’);
这里微信分享的逻辑是弹出一个二维码,用户使用手机扫描二维码进入网页,右上角会有一个微信的菜单,打开之后会有分享,我们只需要配置好一些参数,及分享的内容标题等
关于二维码
二维码使用的是qrcodejs2这个插件,使用起来也很简单,同样,使用的地方正常引入就可以了
npm i qrcodejs2 --save
import QRCode from ‘qrcodejs2’
下面是怎么使用的代码
<div id="qrcode" ref="qrcode"></div>
this.$nextTick(() => {let qrcode = new QRCode('qrcode',{width: 200, // 设置宽度,单位像素height: 200, // 设置高度,单位像素text: window.location.href // 设置二维码内容或跳转地址})
})
这是我们只是做了一个二维码让用户能够扫面这个二维码进入网站,分享还需要我们去做一些配置,这里是vue,只讲前端,前端需要发送请求获取一些信息(这个要跟后端去要),当然发送请求的时候要把当前页面的路径发送出去
let data = {url: window.location.href //当前页面的路径
}
this.$axios.post('你的路径',data).then(function(res){wx.config({appId: res.data.data.signPackage.appId,// 必填,公众号的唯一标识timestamp: res.data.data.signPackage.timestamp,// 必填,生成签名的时间戳nonceStr: res.data.data.signPackage.nonceStr, // 必填,生成签名的随机串signature: res.data.data.signPackage.signature,// 必填,签名jsApiList: ["updateAppMessageShareData","updateTimelineShareData"]// 必填,需要使用的JS接口列表(这里的接口是你下面需要使用的,必须提前声明)});wx.ready(function() {//分享给朋友wx.updateAppMessageShareData({title: '中国创意共享平台·壹企划',desc: title,link: window.location.href,imgUrl: picLink,success: function() {console.log('分享成功')}});//分享到朋友圈wx.updateTimelineShareData({title: title,link: window.location.href,imgUrl: picLink,success: function() {console.log('分享成功')}}); //分享失败wx.error(function(res){alert('分享失败')}) })
})
如果这些配置都正常的话,就可以正常使用了,如果有什么问题也可以给我留言或者私信,如果及时看到一定会给大家分析,互帮互助才能成长
下面是我微信Xiongwei953(欢迎交流,备注csdnbear就好)
vue分享至qq空间,新浪微博,微信朋友圈及微信好友相关推荐
- android 分享qq微信朋友圈,H5微信JS-SDK实现分享朋友 朋友圈以及QQ自定义分享
1.准备工作 APPID公众号id.申请好友分享接口.ip白名单.js接口安全域名设置(必须是通过备案).要先登录微信公众平台进入"公众号设置"的功能设置里填写"JS接口 ...
- android qq微信分享到朋友圈,android实现微信朋友圈和微信好友分享功能
今天的这篇文章是基于上一篇微信登录的基础实现的.可以先看看我的微信登录的实现. 废话不多说,先看运行效果 首界面,点击微信登录,弹出分享菜单,楼主比较懒,图片和按钮文字都没换,希望大家不要介意 点击微 ...
- uni-app实现Android分享到微信朋友圈和微信好友,附DEMO和源码
微信分享大家见怪不怪了!就是再APP点击分享,然后唤起微信,分享当前页面到朋友圈或者分享给朋友. 所以,我开发了这样的一个工具. 动图demo 分享后 就是一个带有标题.描述文字.LOGO.分享来源的 ...
- android 链接分享到朋友圈,android 分享到微信朋友圈或微信好友
一.首先创建一个数字签名(keystore文件)这里不再讲述keystore的创建过程! 二.用keystore给app签名,注意最后如下图所示 图中的md5就是 申请apkid时所需的 签名,这里需 ...
- html分享到微信朋友圈代码,微信分享给朋友及朋友圈JS代码
var imgUrl = "图片地址"; var lineLink = "网址"; var descContent = '描述文字在这里.....'; var ...
- android 微信朋友圈头像,微信进阶玩法,这样设置朋友圈和头像,个性又好看
今日分享:微信头像.昵称.个性签名新玩法 适用系统:安卓.苹果 对于很多人来说,微信的使用已经融入了生活的方方面面,现在大部分人都使用微信来联络感情,平时加了一个新的微信好友,我们初步了解一个微信朋友 ...
- 如何打造高大上的微信朋友圈 打造微信高逼格朋友圈教程
1.注意发朋友圈的频率,单次动态不要超过两条 学会给自己的朋友圈排期看起来简单,其实真的做起来非常难,这就和每天坚持做十个俯卧撑和写文章一样难,很少有人能够坚持下来,但是坚持下来的人,往往都收获了惊喜 ...
- 批量抓取微信朋友圈 Java_微信朋友圈转疯了(golang写小爬虫抓取朋友圈文章)...
很多人在朋友圈里转发一些文章,标题都是什么转疯啦之类,虽然大多都也是广告啦,我觉得还蛮无聊的,但是的确是有一些文章是非常值得收藏的,比如老婆经常就会收藏一些养生和美容的文章在微信里看. 今天就突发奇想 ...
- android 模拟分享到微信朋友圈,uni-app实现Android分享到微信朋友圈和微信好友
分享到微信群或好友 清空以上信息 里客云科技开发 export default { data() { return {} }, // 执行事件 methods:{ formSubmit:functio ...
- 微信朋友圈,微信红包,QQ登录测试用例
2,微信红包测试用例 3.登录 以qq登录为例 安全性测试用例包括: 用户密码后台存储是否加密: 用户密码在网络传输过程中是否加密: 密码是否具有有效期,密码有效期到期后,是否提示需要修改密码: ...
最新文章
- 凯文凯利:未来世界发展七大趋势
- 福特数据总监:汽车业的大数据框架如何构建?
- 【学习笔记】人类为什么最终选择了芯片
- mac photoshop install无法安装_MAC安装应用报错:无法打开或文件损坏的处理方法~...
- 通过6个简单的步骤在Windows上运行Apache Hive
- Bootstrap-table 部分浏览器显示不出来
- 房价预测 search Search 中对数据预处理的学习
- Go-json解码到接口及根据键获取值
- 分布式存储 CentOS6.5虚拟机环境搭建FastDFS-5.0.5集群
- 【解决方法】jdb2/sdb1-8 io使用过高
- 12 行列式01---定义、计算 与性质、排列、逆序数、n 阶行列式、上三角形行列、矩阵的初等行变换与行列式性质
- idc机房运维巡检_技本功|数据安全之IDC数据容灾设计实现
- SC0084 AT32F407/437在UCOSIII上运行LwIP协议栈
- UnPackMe_ASPack2.12的IAT修复 19.05.13
- Representation Learning with Contrastive Predictive Coding
- python 使用pandas简单地把excel里面的数据存储到矩阵里面
- 中华好诗词大学季第二季(五)
- 微信防封链接服务器,微信防红防封真的存在吗?
- Gitlab Runner 部署
- Altium Designer 21 原理图库元件模型的组成介绍以及简单的电阻电容元件模型的创建