【网页分享到微博、微信、qq空间、qq】

卷毛崽

于 2023-01-16 10:09:44 发布

阅读量767

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_42221321/article/details/128700688

版权

前端专栏收录该内容

17 篇文章

订阅专栏

网页分享到微博、微信、qq空间、qq

参考文章
实现功能
获取当前网址 document.location.href
1、微博分享
2、微信分享
3、qq空间分享
4、qq分享

参考文章

实现功能

分享到微博、微信扫码分享、分享至qq空间、分享到qq
在这里插入图片描述

获取当前网址 document.location.href

 this.locallink = encodeURIComponent(document.location.href);

1、微博分享

              <a
                class="sharelist-item"
                target="_blank"
                :href="
                  'https://service.weibo.com/share/share.php?url=' +
                  分享链接 + '&title=' + 标题 +'&pics=' + '图片地址' 
                "
              >
                <img src="../assets/images/news/weibo.png" />
              </a>

分享链接需要url编码

效果
在这里插入图片描述

2、微信分享

下载vueQr 插件，text传入要分享的链接，注意直接使用地址就可以，不需要url编码

<vueQr :text="weixinlink" :size="200"></vueQr>

效果
在这里插入图片描述

3、qq空间分享

              <a
                class="sharelist-item"
                target="_blank"
                :href="
                  'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' +
                  分享链接 +
                  '&sharesource=qzone&title=' + 标题 +'&pics=' + '图片地址' + '&summary=' + 分享描述信息
                "
              >
                <img src="../assets/images/news/qzone.png" />
              </a>

分享链接需要url编码

效果
在这里插入图片描述

4、qq分享

              <a
                class="sharelist-item"
                target="_blank"
                :href="
                  'https://connect.qq.com/widget/shareqq/index.html?url=' + 分享链接 + '&title=' + 标题 + '&pics=' + 你的分享图片地址 + '&summary=' + 你的分享描述 + '&desc='你的分享简述
                "
              >
                <img src="../assets/images/news/qq.png" />
              </a>