Vue

今天分享一个小技巧，教你如何一分钟内学会用vue实现分享功能。H5无法实现直接调用手机App并实现分享功能，如果你想自定义分享的内容，就必须在微信内嵌的浏览器里面调用微信的分享接口（QQ浏览器就要调用它的相关api，其他浏览器也是），毕竟H5不是APP，有一些东西还是在APP上调用比较方便。H5方便的也就是直接使用浏览器自带的分享功能（把当前页面的URL分享出去，分享的内容根据浏览器自身而定）。不过有个别分享是可以直接通过URL，自定义分享内容的效果图：（比较简陋，但是能用） image.png代码如下： 分享到QQ分享到QQ空间分享到微博exportdefault{ data() {return{}; },methods: {//分享到QQ好友(PC端可用) shareToQQ() {//此处分享链接内无法携带图片constshare = {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() {//自定义内容constshare = {title:"东金秀财",desc:"描述",image_url: ["https://xxx.jpeg"],share_url:"https://地址" };letimage_urls = share.image_url.map(function(image){returnencodeURIComponent(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() {//自定义内容constshare = {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" ); } }};分享到QQ分享到QQ空间分享到微博exportdefault{ data() {return{}; },methods: {//分享到QQ好友(PC端可用) shareToQQ() {//此处分享链接内无法携带图片constshare = {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() {//自定义内容constshare = {title:"东金秀财",desc:"描述",image_url: ["https://xxx.jpeg"],share_url:"https://地址" };letimage_urls = share.image_url.map(function(image){returnencodeURIComponent(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() {//自定义内容constshare = {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" ); } }};分享到QQ分享到QQ空间分享到微博exportdefault{ data() {return{}; },methods: {//分享到QQ好友(PC端可用) shareToQQ() {//此处分享链接内无法携带图片constshare = {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() {//自定义内容constshare = {title:"东金秀财",desc:"描述",image_url: ["https://xxx.jpeg"],share_url:"https://地址" };letimage_urls = share.image_url.map(function(image){returnencodeURIComponent(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() {//自定义内容constshare = {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" ); } }};分享到QQ分享到QQ空间分享到微博exportdefault{ data() {return{}; },methods: {//分享到QQ好友(PC端可用) shareToQQ() {//此处分享链接内无法携带图片constshare = {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() {//自定义内容constshare = {title:"东金秀财",desc:"描述",image_url: ["https://xxx.jpeg"],share_url:"https://地址" };letimage_urls = share.image_url.map(function(image){returnencodeURIComponent(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() {//自定义内容constshare = {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" ); } }};欢迎 关注微信公众号：我的web前端自救之路欢迎 进微信群 和大佬们交流 分享到QQ分享到QQ空间分享到微博exportdefault{  data() {return{};  },methods: {//分享到QQ好友(PC端可用)    shareToQQ() {//此处分享链接内无法携带图片constshare = {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() {//自定义内容constshare = {title:"东金秀财",desc:"描述",image_url: ["https://xxx.jpeg"],share_url:"https://地址"      };letimage_urls = share.image_url.map(function(image){returnencodeURIComponent(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() {//自定义内容constshare = {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"      );    }  }};

本文章由javascript技术分享原创和收集