分享qq,wx,qqZone,weibo基于vue
1 DOM 2 <span class="title_bot_txt">分享至</span> 3 <div class="share-icon-box"> 4 <div class="share-icon" title="微信分享"> 5 <span class="iconfont iconzk-wechat" v-popover:wechatShare></span> 6 <span class="icon_txt">微信</span> 7 <!-- 微信二维码 --> 8 <el-popover ref="wechatShare" placement="left" trigger="hover"> 9 <div class="wechat-qrcode-box"> 10 <div id="wechat-share-qrcode"></div> 11 <div>打开微信扫一扫</div> 12 </div> 13 </el-popover> 14 </div> 15 <div class="share-icon" title="QQ分享" @click="shareClick('qq', news, categoryList)"> 16 <span class="iconfont iconQQ"></span> 17 <span class="icon_txt">QQ</span> 18 </div> 19 <div class="share-icon" title="微博分享" @click="shareClick('weibo', news, categoryList)"> 20 <span class="iconfont iconxinlang"></span> 21 <span class="icon_txt">微博</span> 22 </div> 23 <div class="share-icon" title="QQ空间分享" @click="shareClick('qqZone', news, categoryList)"> 24 <span class="iconfont iconQQkongjian"></span> 25 <span class="icon_txt">QQ空间</span> 26 </div> 27 </div> 28 </div> 29 30 /** 31 * @Description: 分享按钮点击 32 * @param {String} type 分享类型 33 * @param {Object} news 新闻 34 * @param {Array} categoryList 类目列表 35 * @LastEditTime: Do not edit 36 * @Date: 2019-03-05 18:45:15 37 */ 38 shareClick: function(type, news, categoryList) { 39 console.log("share Click", type, news); 40 if (type !== "wechat") { 41 const { content = "", title: newsTitle = "", coverImage: image } = news; 42 let summary = content.replace(/<\/?[^>]*>/g, ""); 43 summary = summary.replace(/&\w+;/g, ""); 44 summary = summary.substring(0, 50); 45 const category = categoryList.map(ele => ele.name); 46 const info = { 47 url: window.location.href, 48 summary, 49 image 50 }; 51 info.title = 52 type === "qq" ? newsTitle : `${newsTitle}${category.join("")}`; 53 info.desc = 54 type === "qq" ? `${newsTitle}${category.join("")}` : newsTitle; 55 ShareFun(type, info); 56 } 57 }, 58 59 // shareFun.js组件 60 /** 61 * @Description: 分享公共函数 62 * @params {String} type 分享类型 // qq or weibo 目前只有两种 63 * @params {Object} info 分享的内容 64 * info: { 65 * url: String 分享的链接[必选] 66 * title: String 分享链接的标题[qq必选] 67 * summary: String 分享链接的内容概述[可选] 68 * desc: String 分享的描述内容 [可选] 69 * image: String 分享内容的封面图 [可选] 70 * } 71 * @return 打开一个新的分享窗口 72 * @LastEditTime: Do not edit 73 * @Date: 2019-03-19 16:06:49 74 */ 75 const urlList = { 76 qq: 'http://connect.qq.com/widget/shareqq/index.html?url={{url}}&title={{title}}&source={{source}}&desc={{desc}}&pics={{image}}&summary={{summary}}', 77 weibo: 'http://service.weibo.com/share/share.php?url={{url}}&title={{title}}&source={{source}}&desc={{desc}}&pic={{image}}&summary={{summary}}', 78 qqZone: 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url={{url}}&title={{title}}&source={{source}}&desc={{desc}}&pics={{image}}&summary={{summary}}', 79 }; 80 export default function(type, info) { 81 console.log('info', info); 82 if (urlList[type] && urlList[type].length) { 83 // 替换url 84 const shareUrl = urlList[type].replace(/{{(\w+)}}/g, (match, p1) => { 85 return encodeURIComponent(info[p1] || ''); 86 }); 87 // 获取窗口的宽高 88 const screenInfo = window.screen; 89 const newWindowArea = { 90 height: screenInfo.height / 3 * 2, 91 width: screenInfo.width / 3 * 2, 92 }; 93 // 打开窗口 94 window.open(shareUrl, 'newwindow', `height=${newWindowArea.height}, width=${newWindowArea.width}`); 95 } else { 96 console.warn('url不存在'); 97 } 98 }
// 生成微信分享二维码// 跳转到h5显示的相同资讯generateQRCode: function() {const url = window.location.href; //这里之所以取当前的链接是由于pc端做了正则适配到h5的链接,其实本质就是链接和二维码的转换而已.let QRCode = this.$QRCode;this.qrcodeImg = new QRCode("wechat-share-qrcode", {width: 128,height: 128,text: url, // 二维码地址colorDark: "#000",colorLight: "#fff"});},
转载于:https://www.cnblogs.com/lujunan/p/11497151.html
分享qq,wx,qqZone,weibo基于vue相关推荐
- 微信hash ajax,基于vue hash模式微信分享#号的解决
看代码吧~ // 问题描述在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加?fromTimeline之类的后缀参数,这就造成了分享出 ...
- 基于vue 的h5微信分享
之前一直都是使用的html,jquery,js等做的微信分享,现在项目都改用vue做了,但是微信分享还是要接入的,这里简单分享一下移动端vue如何接入微信分享. 1.首先安装微信分享依赖 npm in ...
- vue 分享给好友 点击分享按钮_基于vue+leaflet+echart的足迹分享评论平台
系统操作https://www.zhihu.com/video/1160268313283821568 基于vue+leaflet+Cesium的足迹分享评论平台 (其实题目是随便取的,目的只是用来证 ...
- 基于vue和vuex的todos效果展示及源码分享
todos,待做项目经常被以各种方式来实现,js,node, 这里分享一个基于vue和vuex的todos 主要有三部分代码main.js,index.js,App.vue import Vue fr ...
- 基于Vue移动音乐webapp跨域获取QQ音乐歌单接口
最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端 ...
- 转:基于Vue移动音乐web app跨域获取QQ音乐歌单接口教程
最近看了一个vue移动音乐webapp教程,老师是一个来自滴滴公司的名为黄轶的前端大神,之前学习了他的一个基于vue仿饿了么webapp的初级教程,感觉非常好,十分适合新手,但是那个教程的数据都是前端 ...
- 基于vue的MOBA类游戏攻略分享平台
082-springboot基于vue的MOBA类游戏攻略 开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7 数据库工具:N ...
- vue 回车查询 按钮_前后端分离商城,前端基于Vue后端nodejs包含小程序源码免费分享...
先转发,然后加关注,私信"购物"即可获取源码下载链接 项目简介 本项目前后端分离,前端基于Vue+Vue-router+Vuex+Element-ui+Axios,参考小米商城实现 ...
- bootstrap的表单验证 vue_分享几个基于Vue的UI库和开源项目
阅读本文大概需要 3.6 分钟. 题图:Evan You(尤雨溪)的工作室 在编程的世界里,你遇到的 90% 问题,别人都遇到过,并且提供了比较优秀的解决方案.我们无需一行一行代码从零开始创建一个项目 ...
最新文章
- 第一篇:text preprocessing文本预处理
- 把宝可梦搬到终端后,摸鱼也不会被老板发现了,收集对战玩法一应俱全|开源...
- 关于linux分区与挂载的解释
- JQUERY的size()与length
- 第三节 计算机体系结构,计算机系统结构 第三节 输入输出系统.pdf
- 最高效的进(线)程间通信机制--eventfd
- 【hihocoder 1312】搜索三·启发式搜索(启发式搜索写法)
- SpringBoot 精通系列-SpringBoot整合Redis的常用操作
- 英国央行:稳定币讨论文件将讨论与央行数字货币概念相关可能出现的问题
- 小白使用word小技巧-持续更新(以论文服务为主)
- Reset Password Windows Server 2008 r2
- Linux中文输入法安装
- 数学重要公式--笔记
- 数据分析师就业前景怎么样?零基础能成为数据分析师吗?
- 打破985校史!她以独作身份投中数学顶刊,曾因换方向重读博士7年
- TRIZ系列-创新原理-2-抽取原理
- minicom配置及使用方法
- Ubuntu 网络应用服务器 Apache 配置基础
- 如何正确理解三极管的放大区、饱和区、截止区
- 世界睡眠医学杂志世界睡眠医学杂志杂志社世界睡眠医学杂志编辑部2023年第2期目录