分享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"
});
},
// mounted(){
// 生成wx二维码
this.generateQRCode();
}
