微信开发 分享按钮怎么做

Posted 2023-04-19

微信开发分享按钮实例：

效果图如上，具体的操作如下：

1、关注他人的实现方法很简单,调用weixin协议即可 具体代码如下:

<a href="weixin://profile/gh_xxxxxxxx">关注他</a>
这里gh_xxxxxxxx就是用户的原始ID,注意,必须使用原始ID.

2、分享到朋友圈:

其实利用微信公众账号发布的html页面最终是利用微信内置的web浏览器打开的,同时在这个浏览器里集成了WeixinJSBridge这个JS对象,利用这个JS对象的一些操作接口可以实现微信应用内的功能.如添加好友,发送消息等等功能.

01 function ShareTofriends(img_url,link,title,desc)  
02        //在HTML页面内嵌入这一段JS代码
03    if(window.WeixinJSBridge) 参考技术A 加入 TX开发者平台 里面就有这种组件的开发应用 参考技术B 微信有分享按钮吗 参考技术C 招商银行那个按钮 是最特别的 参考技术D 你可以看看首屏微信掌柜的开发案例

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)];

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