html分享页面到qq 图片_Vue<分享功能>

今天分享一个小技巧，教你如何一分钟内学会用vue实现分享功能。

H5无法实现直接调用手机App并实现分享功能，如果你想自定义分享的内容，就必须在微信内嵌的浏览器里面调用微信的分享接口(QQ浏览器就要调用它的相关api，其他浏览器也是)，毕竟H5不是APP，有一些东西还是在APP上调用比较方便。H5方便的也就是直接使用浏览器自带的分享功能(把当前页面的URL分享出去，分享的内容根据浏览器自身而定)。不过有个别分享是可以直接通过URL，自定义分享内容的

效果图：

(比较简陋，但是能用)

image.png

代码如下：

完整代码呈上(方便复制粘贴)

<template>  <div style="margin-top:100px;">    <button @click="shareToQQ()">分享到QQbutton>    <button @click="shareToRoom()">分享到QQ空间button>    <button @click="shareToMicroblog()">分享到微博button>  div>template><script>export default {  data() {    return {};  },  methods: {    //分享到QQ好友(PC端可用)    shareToQQ() {      //此处分享链接内无法携带图片      const share = {        title: "东金秀财",        desc: "描述",        share_url: "https://xiucai.neafex.com/#/"      };      location.replace(        "https://connect.qq.com/widget/shareqq/index.html?url=" +          encodeURIComponent(share.share_url) +          "&title=" +          share.title +          "&desc=" +          share.desc      );    },    //分享到QQ空间(可用)    shareToRoom() {        //自定义内容      const share = {        title: "东金秀财",        desc: "描述",        image_url: ["https://xxx.jpeg"],        share_url: "https://地址"      };      let image_urls = share.image_url.map(function(image) {        return encodeURIComponent(image);      });       //跳转地址      location.replace(        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +          encodeURIComponent(share.share_url) +          "&title=" +          share.title +          "&pics=" +          image_urls.join("|") +          "&summary=" +          share.desc      );    },    //分享到微博(可用)    shareToMicroblog() {      //自定义内容      const share = {        title: "东金秀财",        image_url: ["https://xxx.jpeg"],        share_url: "https://地址"      };      //跳转地址      location.replace(        "https://service.weibo.com/share/share.php?url=" +          encodeURIComponent(share.share_url) +          "&title=" +          share.title +          "&pic=" +          share.image_url +          "&searchPic=true"      );    }  }};script><style>style>