1. 网页的分享,查到的一些插件，比如百度分享
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>test</title> 8 </head> 9 <body> 10 <div class="bdsharebuttonbox" data-tag="share_1"> 11 <a class="bds_weixin" data-cmd="weixin"></a> 12 <a class="bds_qzone" data-cmd="qzone"></a> 13 <a class="bds_tsina" data-cmd="tsina"></a> 14 <a class="bds_baidu" data-cmd="baidu"></a> 15 <!-- <a class="bds_tqq" data-cmd="tqq"></a> --> 16 <a class="bds_sqq" data-cmd="sqq"></a> 17 <a class="bds_more" data-cmd="more">更多</a> 18 <a class="bds_count" data-cmd="count"></a> 19 </div> 20 <script> 21 window._bd_share_config = { 22 "common" : { 23 "bdSnsKey" : {}, 24 "bdText" : "${title}", //分享时的标题 25 "bdMini" : "2", 26 "bdMiniList" : false, 27 "bdPic" : "${pic}", //此处为分享时自带的图片 28 "bdStyle" : "0", 29 "bdSize" : "32", 30 "bdUrl" : '${sharUrl}', //此处为后台要进行分享的内容的定义 31 "bdDesc":'${summary}', //分享时的文本摘要 32 }, 33 "share" : {} 34 }; 35 //此处为需要引入的百度分享的js文件 36 with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)]; 37 </script> 38 </body> 39 </html>
应用以上的代码就可以简单的实现一个内容的分享功能。如果要实现更多的功能，可以参考百度分享的官网。
根据这个原生的分享的思想，在vue里面封装成组件的实现。
<template> <div class="vue-share-container"> <div> <div class="bdsharebuttonbox" data-tag="share_1"> <a class="bds_weixin" data-cmd="weixin"></a> <a class="bds_qzone" data-cmd="qzone"></a> <a class="bds_tsina" data-cmd="tsina"></a> <a class="bds_baidu" data-cmd="baidu"></a> <!-- <a class="bds_tqq" data-cmd="tqq"></a> --> <a class="bds_sqq" data-cmd="sqq"></a> <a class="bds_more" data-cmd="more">更多</a> <a class="bds_count" data-cmd="count"></a> </div> </div> </div> </template> <script> export default{ mounted(){ window._bd_share_config = { "common" : { "bdSnsKey" : {}, "bdText" : "${title}", //分享时的标题 "bdMini" : "2", "bdMiniList" : false, "bdPic" : "${pic}", //此处为分享时自带的图片 "bdStyle" : "0", "bdSize" : "32", "bdUrl" : '${sharUrl}', //此处为后台要进行分享的内容的定义 "bdDesc":'${summary}', //分享时的文本摘要 }, "share" : {} }; //此处为需要引入的百度分享的js文件 } } // index.html引入这个js // src='http://bdimg.share.baidu.com/static/api/js/share.js' </script> <style scoped> </style>
2. 移动app应用的分享。。。待学习