分享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              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", {
         128,
        height: 128,
        text: url, // 二维码地址
        colorDark: "#000",
        colorLight: "#fff"
      });
    },
// mounted(){

// 生成wx二维码

this.generateQRCode();