专栏首页nice_每一天h5怎么做分享到QQ 、朋友圈、微信 、微博等功能

h5怎么做分享到QQ 、朋友圈、微信 、微博等功能

 微信已经成为我们日常聊天联系基本的必备工具,所以小菜我首先介绍一下如何调用微信的分享功能。其实除了可以在微信上分享到朋友圈和发送给好友,微信的分享接口还提供了分享到QQ和分享到腾讯微博等,就是在页面的config接口注入权限验证配置好就ok!

类似于“分享到朋友圈”按钮点击状态及自定义分享内容接口,我们调用“分享到QQ”和“分享到腾讯微博”按钮点击状态及自定义分享内容接口 。

获取“分享到QQ”按钮点击状态及自定义分享内容接口

    wx.onMenuShareQQ({  
        title: '', // 分享标题  
        desc: '', // 分享描述  
        link: '', // 分享链接  
        imgUrl: '', // 分享图标  
        success: function () {   
           // 用户确认分享后执行的回调函数  
        },  
        cancel: function () {   
           // 用户取消分享后执行的回调函数  
        }  
    });  

获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

    wx.onMenuShareQZone({  
        title: '', // 分享标题  
        desc: '', // 分享描述  
        link: '', // 分享链接  
        imgUrl: '', // 分享图标  
        success: function () {   
           // 用户确认分享后执行的回调函数  
        },  
        cancel: function () {   
            // 用户取消分享后执行的回调函数  
        }  
    });  

获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

    wx.onMenuShareWeibo({  
        title: '', // 分享标题  
        desc: '', // 分享描述  
        link: '', // 分享链接  
        imgUrl: '', // 分享图标  
        success: function () {   
           // 用户确认分享后执行的回调函数  
        },  
        cancel: function () {   
            // 用户取消分享后执行的回调函数  
        }  
    });  

以上是调用接口然后进行自定义分享。下面是关于h5分享到的两个不错的插件。

一、http://www.jiathis.com/help/html/weixin-share-code

具体事例可以查看以上网址,我这里演示一个简单的例子。

使用说明: 复制并粘贴下面的JS代码,放到您的网页,可以在和的之间网页的任意位置放置。如果您的网站使用的模板,您也可以复制代码到您的模板,按钮将在所有网页自动出现。

<!-- JiaThis Button BEGIN --><div id="ckepop">
<span class="jiathis_txt">分享到:</span>
<a class="jiathis_button_weixin">微信</a> 
<a href="http://www.jiathis.com/share"  class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a>
<a class="jiathis_counter_style"></a> </div> 
<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>
</div> <!-- JiaThis Button END -->

 二、http://share.baidu.com/code

HTML代码

<div class="bdsharebuttonbox">
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
  <a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
</div>

js代码

 window._bd_share_config={
      "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"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)];

 如果想要查看更多的分享格式,可以查看原网址。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • H5分享功能

    https://www.cnblogs.com/sdcs/p/8328367.html

    用户1518699
  • 解决电脑系统卡、慢 3分钟成为高手!

    简介:大家在平常使用电脑的过程中,随着时间的推移,电脑Windows系统会变得越来越卡,越来越慢!很多人都会选用电脑自带的系统安全软件来优化Windows系统,...

    用户1518699
  • 转载 Elasticsearch开发环境搭建(Eclipse\MyEclipse + Maven)

    作者:好记性不如烂笔头! 出处:http://www.cnblogs.com/zlslch/

    用户1518699
  • 你所理解的分享经济,是否是我所感知的分享经济?

    引爆市场的分享经济正逐步变成包罗万象的经济形态,对其界定百家争鸣,尚无定论 孙怡  腾讯研究院高级研究员 任帅涛 腾讯研究院助理研究员 随着Ube...

    腾讯研究院
  • 美团|深度学习在推荐中的实践

    用户3578099
  • 分享经济席卷全球背后的“秘密”:6大区域的启迪意义

    张孝荣  腾讯研究院高级研究员   当下,分享经济热潮正席卷全球,已经有几十亿消费者从中受益。最著名的两家龙头企业,Airbnb业务已经覆盖了190余个国家...

    腾讯研究院
  • 分享经济时代,你参与了吗?

    当我们在传统的思维里苦苦挣扎,别人已经开始了用分享经济学+倍增学原理+大数据+移动互联网+的思维在奔跑了!改变思维模式是当下所有人需要努力的方向! 分享经济在全...

    企鹅号小编
  • 忍不住分享

    分享 ?

    JavaQ
  • 你为什么不敢分享?

    前日我在《怎样实习才能成长最快》的 Chat 中提到了分享的问题。我发现,无论再怎么说尽分享的好处,同学们可能还是不知道从何处入手。就像大家都知道吸烟后果很严重...

    姬小光
  • 2016分享经济海外发展报告

    课题策划:司晓 顾问统筹:张孝荣 报告主笔:孙怡 参与撰写:刘烔言、郝璞璞 调研支持:金宁、刘嘉琪 要点抢先看:   分享经济风潮已然席卷全球,不仅在美洲、...

    腾讯研究院

扫码关注云+社区

领取腾讯云代金券