karlew > 微信网页开发 > 微信调用JS-SDK分享接口

微信调用JS-SDK分享接口

10-30 10,500 views

之前一直在弄微信的公众平台开发，最近在所加的一些微信开发群里经常有网友问到微信分享到朋友圈的自定义分享内容怎么实现，jssdk怎么设置和使用。对于刚接触或者不太熟的人来说确实需要一点点时间去理解文档来实现这功能，其实不难，在此发一下实现的过程：

此为微信JSSDK的官方说明文档链接

http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.BF.E7.94.A8.E6.AD.A5.E9.AA.A4

由于不方便用公司的公众号来写这教程，所以申请了一个测试号。那么，现在看下实现过程：

●设置JS接口安全域名：按官方文档的说法，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。这里我的测试号上填即将要用到的wx.karlew.com作为JS接口安全域名（公众号上可填三个）

填写JS接口安全域名

●引入JS文件：其实就是一句<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

●通过config接口注入权限验证配置：先看下截图中官方文档的描述

通过config接口注入权限验证配置

appid在登录公众平台后即可看到。这里的signature签名是重点，PHP获取signature的代码如下

  1. //获取access_token  
  2. function wx_get_token(){  
  3.     global $appid;  
  4.     global $appsecret;  
  5.     $res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);  
  6.     $res = json_decode($res,true);  
  7.     $token = $res['access_token'];  
  8.     return $token;  
  9. }  
  10.   
  11. //获取ticket  
  12. function wx_get_jsapi_ticket(){  
  13.     if(time()-filemtime('ticket.txt')>3600){    //每一个小时获取一次新的ticket  
  14.         //通过access_token获取签名时用到的ticket  
  15.         $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".wx_get_token()."&type=jsapi";  
  16.         $res = file_get_contents($url);  
  17.         $res = json_decode($res,true);  
  18.         $ticket = $res['ticket'];  
  19.         $fileupdata = fopen("ticket.txt",'w');  
  20.         fwrite($fileupdata,$ticket);  //将ticket保存，由于access_token一天只能获取2000次，所以不建议每次都获取新的access_token  
  21.         fclose($fileupdata);  
  22.     }else{  
  23.         $ticket = file_get_contents('ticket.txt');  
  24.     }  
  25.     return $ticket;  
  26. }  
  27.   
  28. $appid = "wx9b4b97f6ce6647ef";  //替换为所用公众号的appid  
  29. $appsecret = "b1be97744f78714a5de17f4ca2823211";  //替换为所用公众号的appsecret  
  30. $weburl = "http://wx.karlew.com/share_test";  
  31. $timestamp = time();  //生成签名的时间戳  
  32. $nonceStr = "wm3wzytpz0wzccnw";  //随机字符串  
  33. $wxticket  = wx_get_jsapi_ticket();  //获取ticket  
  34. $url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];  //当前页面url  
  35. $wxOri = sprintf("jsapi_ticket=".$wxticket."&noncestr=".$nonceStr."&timestamp=".$timestamp."&url=".$url);  
  36. $signature = sha1($wxOri);  //生成签名  

 

js上config接口注入权限验证代码：

  1. wx.config({  
  2.     //debug: true,   
  3.     appId: '<?php echo $appid; ?>',   
  4.     timestamp: <?php echo $timestamp; ?>,  
  5.     nonceStr: '<?php echo $nonceStr; ?>',  
  6.     signature: '<?php echo $signature; ?>',  
  7.     jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']   
  8. });</code>  
  9. 调用接口分享功能代码：  
  10. <code lang="js">wx.ready(function(){  
  11.     var share_title = '分享接口调用成功！';  
  12.     var share_imgurl = '<?php echo $weburl; ?>/img/share.jpg';  
  13.     var share_link = '<?php echo $weburl; ?>';  
  14.     wx.onMenuShareTimeline({  
  15.         title: share_title, // 分享标题  
  16.         link: share_link, // 分享链接  
  17.         imgUrl: share_imgurl, // 分享图标  
  18.         success: function () {   
  19.               
  20.         },  
  21.         cancel: function () {   
  22.               
  23.         }  
  24.     });  
  25.     wx.onMenuShareAppMessage({  
  26.         //title: share_title, // 分享标题  
  27.         desc: share_title, // 分享描述  
  28.         link: share_link, // 分享链接  
  29.         imgUrl: share_imgurl, // 分享图标  
  30.         type: '', // 分享类型,music、video或link，不填默认为link  
  31.         dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空  
  32.         success: function () {   
  33.               
  34.         },  
  35.         cancel: function () {   
  36.               
  37.         }  
  38.     });  
  39. });  

 

完整代码：https://github.com/karlew/wechat/tree/master/share

版权属于: karlew

原文地址: https://www.karlew.com/archives/19

转载时必须以链接形式注明原始出处及本声明。

欢迎留言