网页和移动应用的分享功能（微信，微博，QQ等社交平台）

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>
百度分享插件demo

应用以上的代码就可以简单的实现一个内容的分享功能。如果要实现更多的功能，可以参考百度分享的官网。

根据这个原生的分享的思想，在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>
vue分享组件demo

2. 移动app应用的分享。。。待学习

posted @ 2018-08-24 10:44  玲珑塔  阅读(957)  评论(0)  编辑  收藏  举报