微信自定义分享-JSSDK

亲身实践流程：微信自定义分享 jssdk

微信官方开发者文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1.微信服务号相关操作

（1）查看AppId，AppSecret：开发->基本配置->公众号开发信息

（2）绑定域名：设置->公众号设置->功能设置->js域名

2.代码
（1）调用JSSDK [eg.TP框架]，微信自己下载demo

 <?php 
    Vendor('Aop.AopClient','','.class.php');
    Vendor('Aop.jssdk','','.class.php');
    $jssdk = new \JSSDK("wxec***********baf","d775************************dd7b");  
    $signPackage = $jssdk->GetSignPackage(); 
?>

（2）引入js文件，注意http or https

 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

（3）调用JSSDK [eg.TP框架]

<script>  
          wx.config({  
              debug: false,  
              appId: '<?php echo $signPackage["appId"];?>',  
              timestamp:<?php echo $signPackage["timestamp"];?>,  
              nonceStr: '<?php echo $signPackage["nonceStr"];?>',  
              signature: '<?php echo $signPackage["signature"];?>',  
              jsApiList: [  
	                'checkJsApi',  
	                'onMenuShareTimeline',  
	                'onMenuShareAppMessage',  
	                'onMenuShareQQ',  
	                'onMenuShareWeibo',
              ]  
          }); 
 </script> 
 <script src="__PUBLIC__/Home/text/js/wechatdemo.js"> </script>//如下

(4) 分享的wechatdemo.js

wx.ready(function () {  
  var title       = "梦想";
  var keywords    = "热爱生活的人";
  var description = "脸上总是挂着笑意";
  var href = window.location.href;
  // 2. 分享接口  
  // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口  
    wx.onMenuShareAppMessage({  
      title:title,
      desc:description ,  
      link: href,  
      imgUrl: "http://www.**.com/Public/Home/mengba/images/mengba37.jpg",
      trigger: function (res) {  
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回  
        alert('用户点击发送给朋友');  
      },  
      success: function (res) {  
        alert('已分享');  
      },  
      cancel: function (res) {  
        alert('已取消');  
      },  
      fail: function (res) {  
        alert(JSON.stringify(res));  
      }  
    });  

  
  // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口  
  wx.onMenuShareTimeline({  
      title:title,
      desc:description ,  
      link: href,  
      imgUrl: "http://www.**.com/Public/Home/mengba/images/mengba37.jpg",  
      trigger: function (res) {  
        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回  
        alert('用户点击分享到朋友圈');  
      },  
      success: function (res) {  
        alert('已分享');  
      },  
      cancel: function (res) {  
        alert('已取消');  
      },  
      fail: function (res) {  
        alert(JSON.stringify(res));  
      }  
    });  


  
  // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口  
    wx.onMenuShareQQ({  
      title:title,
      desc:description ,  
      link: href,   
      imgUrl: "http://www.**.com/Public/Home/mengba/images/mengba37.jpg", 
      trigger: function (res) {  
        alert('用户点击分享到QQ');  
      },  
      complete: function (res) {  
        alert(JSON.stringify(res));  
      },  
      success: function (res) {  
        alert('已分享');  
      },  
      cancel: function (res) {  
        alert('已取消');  
      },  
      fail: function (res) {  
        alert(JSON.stringify(res));  
      }  
    });  

 
    
  // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口  
    wx.onMenuShareWeibo({  
      title:title,
      desc:description ,  
      link: href,  
      imgUrl: "http://www.**.com/Public/Home/mengba/images/mengba37.jpg", 
      trigger: function (res) {  
        alert('用户点击分享到微博');  
      },  
      complete: function (res) {  
        alert(JSON.stringify(res));  
      },  
      succr54ess: function (res) {  
        alert('已分享');  
      },  
      cancel: function (res) {  
        alert('已取消');  
      },  
      fail: function (res) {  
        alert(JSON.stringify(res));  
      }  
    });  
});