web端三方分享

在网站中我们经常会用到分享功能，今天我就简单来介绍一下web端分享功能的实现，分享大概可以从三个维度去实现：1.调用官方提供的API2.使用集成的分享环境，如：百度一键分享等3.集成原生SDK一、下面我们先来看通过调用API的方式来实现分享这里强调一个问题，调用API实现分享如果出现undefined的问题。可能是url的自动转码造成的，浏览器会将我们的‘ = ’等符号转换成...

liuhua_2323

788人浏览 · 2019-07-16 20:38:00

liuhua_2323 · 2019-07-16 20:38:00 发布

在网站中我们经常会用到分享功能，今天我就简单来介绍一下web端分享功能的实现，分享大概可以从三个维度去实现：

1.调用官方提供的API

2.使用集成的分享环境，如：百度一键分享等

3.集成原生SDK

一、下面我们先来看通过调用API的方式来实现分享

这里强调一个问题，调用API实现分享如果出现undefined的问题。可能是url的自动转码造成的，浏览器会将我们的‘ = ’等符号转换成url编码，我们需要在url中将等号等替换成url编码格式。至于转码的规则请自行百度

1）QQ好友实现分享

http://connect.qq.com/widget/shareqq/index.html?title='分享标题'&url='分享链接'......等参数

具体参数介绍如下：       

     url: 'location.href',    /*获取URL，可加上来自分享到QQ标识，方便统计*/

     desc:'', /*分享理由(风格应模拟用户对话),支持多分享语随机展现（使用|分隔）*/

     title:'', /*分享标题(可选)*/

     summary:'', /*分享摘要(可选)*/

     pics:'', /*分享图片(可选)*/

     flash: '', /*视频地址(可选)*/

     site:'', /*分享来源(可选) 如：QQ分享*/

     style:'201',    /*风格设置*/ 

     width:32,    /*大小设置*/

     height:32

2） qq空间分享实现

http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title='分享标题'&url='分享链接'......等参数

   具体参数介绍如下：

      url:location.href,    /*获取URL，可加上来自分享到QQ标识，方便统计*/

      showcount:'',    /*是否显示分享总数,显示：'1'，不显示：'0' */

      desc:'',    /*默认分享理由(可选)*/

      summary:'',   /*分享摘要(可选)*/

      title:'',   /*分享标题(可选)*/

      site:'',   /*分享来源 如：腾讯网(可选)*/

      pics:'',   /*分享图片的路径(可选)*/

      style:'203',   /*风格设置*/ 

      width:98,   /*大小设置*/

      height:22

3）新浪微博分享实现

http://service.weibo.com/share/share.php?title='分享标题'&url='分享链接'......等参数

    具体参数介绍如下：

      count:'',     /*表示是否显示当前页面被分享数量(1显示)(可选，允许为空)*/

      url:'',         /* 将页面地址转成短域名，并显示在内容文字后面。(可选，允许为空)*/

      appkey:'',   /*用于发布微博的来源显示，为空则分享的内容来源会显示来自互联网。(可选，允许为空)*/

      title:'',   /*分享时所示的文字内容，为空则自动抓取分享页面的title值(可选，允许为空)*/

      pic:'',   /*自定义图片地址，作为微博配图(可选，允许为空)*/

      ralateUid:'',    /*转发时会@相关的微博账号(可选，允许为空)*/

      language:''   /*语言设置(zh_cn|zh_tw)(可选)*/

上述罗列了三种分享渠道，介绍了各个参数的含义。这里的三方API分享渠道我就不一一罗列了，大家可以参考下面这篇文章，博主介绍了很多分享的渠道。https://blog.csdn.net/mapbar_front/article/details/80455022

二、使用集成的分享环境（百度分享为例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more"></a>
    <a href="#" class="bds_qzone" data-cmd="qzone"></a>
    <a href="#" class="bds_tsina" data-cmd="tsina"></a>
    <a href="#" class="bds_tqq" data-cmd="tqq"></a>
    <a href="#" class="bds_renren" data-cmd="renren"></a>
    <a href="#" class="bds_weixin" data-cmd="weixin"></a>
</div>
<script>
window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "2", "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {}, "image": { "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"], "viewText": "分享到：", "viewSize": "16" }, "selectShare": { "bdContainerClass": null, "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"] } }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script>
</body>

</html>

直接使用百度的一键分享很简单，这里只是介绍怎么使用，对于如何配置，大家请进官网查看：http://share.baidu.com/code

三、集成原生SDK

由于小编才疏学浅，还未用到过集成原生SDK去实现分享的功能，这里就不做介绍了。