微信公众号自定义分享内容实现

三月 06, 2019 | views
Comments 0

微信公众号号在手机中通过api接口可以实现自定义分享内容了,下面我们来看这个接口的实现步骤.

一、准备阶段

公众号一个,微网站一个.

二、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.

备注:登录后可在“开发者中心”查看对应的接口权限。

三、代码

  1. <?php 
  2. //curl获取请求文本内容 
  3. function get_curl_contents($url$method ='GET'$data = array()) { 
  4.     if ($method == 'POST') { 
  5.         //使用crul模拟 
  6.         $ch = curl_init(); 
  7.         //禁用htt<a href="/fw/photo.html" target="_blank">ps</a> 
  8.         <a href="/tags.php/curl_setopt/" target="_blank">curl_setopt</a>($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
  9.         //允许请求以文件流的形式返回 
  10.         curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); 
  11.         curl_setopt($ch, CURLOPT_POST, 1); 
  12.         curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data)); 
  13.         curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30); 
  14.         curl_setopt($ch, CURLOPT_DNS_CACHE_TIMEOUT, 30); 
  15.         curl_setopt($ch, CURLOPT_URL, $url); 
  16.         $result = curl_exec($ch); //执行发送 
  17.         curl_close($ch); 
  18.     }else { 
  19.         if (ini_get('allow_<a href="/tags.php/fopen/" target="_blank">fopen</a>_url') == '1') { 
  20.             $result = file_get_contents($url); 
  21.         }else { 
  22.             //使用crul模拟 
  23.             $ch = curl_init(); 
  24.             //允许请求以文件流的形式返回 
  25.             curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); 
  26.             //禁用https 
  27.             curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
  28.             curl_setopt($ch, CURLOPT_URL, $url); 
  29.             $result = curl_exec($ch); //执行发送 
  30.             curl_close($ch); 
  31.         } 
  32.     } 
  33.     return $result
  34. //获取微信公从号access_token 
  35. function wx_get_token() { 
  36.     $AppID = '1235464654';//AppID(应用ID) 
  37.     $AppSecret = '705641465sdfasdf456465a4sdf';//AppSecret(应用密钥) 
  38.     $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$AppID.'&secret='.$AppSecret
  39.     $res = get_curl_contents($url); 
  40.     $res = json_decode($res, true); 
  41.     //这里应该把access_token缓存起来,至于要怎么缓存就看各位了,有效期是7200s 
  42.     return $res['access_token']; 
  43. //获取微信公从号ticket 
  44. function wx_get_jsapi_ticket() { 
  45.     $url = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi", wx_get_token()); 
  46.     $res = get_curl_contents($url); 
  47.     $res = json_decode($res, true); 
  48.     //这里应该把access_token缓存起来,至于要怎么缓存就看各位了,有效期是7200s 
  49.     return $res['ticket']; 
  50. $wx = array(); 
  51. //生成签名的时间戳 
  52. $wx['timestamp'] = time(); 
  53. //生成签名的随机串 
  54. $wx['noncestr'] = 'Wm3WZYTPz0wzccnW'
  55. //jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下,jsapi_ticket的有效期为7200秒,通过access_token来获取。 
  56. $wx['jsapi_ticket'] = wx_get_jsapi_ticket(); 
  57. //分享的地址,注意:这里是指当前网页的URL,不包含#及其后面部分,曾经的我就在这里被坑了,所以小伙伴们要小心了 
  58. $wx['url'] = 'http://www.baidu.com'
  59. $string = sprintf("jsapi_ticket=%s&noncestr=%s&timestamp=%s&url=%s"$wx['jsapi_ticket'], $wx['noncestr'], $wx['timestamp'], $wx['url']); 
  60. //生成签名 
  61. $wx['signature'] = sha1($string); 
  62. /* 
  63. 注意事项 
  64. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。 
  65. 签名用的url必须是调用JS接口页面的完整URL。 
  66. 出于安全考虑,开发者必须在服务器端实现签名的逻辑。 
  67. */ 
  68. ?> 

四、视图显示

在需要调用JS接口的页面引入如下JS文件,支持https:http://res.wx.qq.com/open/js/jweixin-1.0.0.js

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

  1. <script> 
  2.  
  3. //通过config接口注入权限验证配置 
  4.  
  5. wx.config({ 
  6.  
  7.     debug : false
  8.  
  9.     appId : 'AppID'
  10.  
  11.     timestamp : '<?php echo $wx["timestamp"];?>'
  12.  
  13.     nonceStr : '<?php echo $wx["noncestr"];?>'
  14.  
  15.     signature : '<?php echo $wx["signature"];?>'
  16.  
  17.     jsApiList : ['onMenuShareTimeline''onMenuShareAppMessage''onMenuShareQQ''onMenuShareWeibo'
  18.  
  19. }); 
  20.  
  21. wx.ready(function(){ 
  22.  
  23.     var 
  24.  
  25.         s_title = '分享标题',   // 分享标题 
  26.  
  27.         s_link = '分享链接',    // 分享链接 
  28.  
  29.         s_desc = '分享描述',   //分享描述 
  30.  
  31.         s_imgUrl = '分享图片'// 分享图标 
  32.  
  33.     //朋友圈 
  34.  
  35.     wx.onMenuShareTimeline({ 
  36.  
  37.         title: s_title, // 分享标题 
  38.  
  39.         link: s_link, // 分享链接 
  40.  
  41.         imgUrl: s_imgUrl, // 分享图标 
  42.  
  43.         success: function () { }, 
  44.  
  45.         cancel: function () { } 
  46.  
  47.     }); 
  48.  
  49.     //发送给好友 
  50.  
  51.     wx.onMenuShareAppMessage({ 
  52.  
  53.         title: s_title, // 分享标题 
  54.  
  55.         desc: s_desc, // 分享描述 
  56.  
  57.         link: s_link, // 分享链接 
  58.  
  59.         imgUrl: s_imgUrl, // 分享图标 
  60.  
  61.         type: ''// 分享类型,music、video或link,不填默认为link 
  62.  
  63.         dataUrl: ''// 如果type是music或video,则要提供数据链接,默认为空 
  64.  
  65.         success: function () {}, 
  66.  
  67.         cancel: function () {} 
  68.  
  69.     }); 
  70.  
  71.     //QQ好友 
  72.  
  73.     wx.onMenuShareQQ({ 
  74.  
  75.         title: s_title, // 分享标题 
  76.  
  77.         desc: s_desc, // 分享描述 
  78.  
  79.         link: s_link, // 分享链接 
  80.  
  81.         imgUrl: s_imgUrl, // 分享图标 
  82.  
  83.         success: function () { }, 
  84.  
  85.         cancel: function () { } 
  86.  
  87.     }); 
  88.  
  89.     //腾讯微博 
  90.  
  91.     wx.onMenuShareWeibo({ 
  92.  
  93.         title: s_title, // 分享标题 
  94.  
  95.         desc: s_desc, // 分享描述 
  96.  
  97.         link: s_link, // 分享链接 
  98.  
  99.         imgUrl: s_imgUrl, // 分享图标 
  100.  
  101.         success: function () { }, 
  102.  
  103.         cancel: function () { } 
  104.  
  105.     }); 
  106.  
  107. }); 
  108.  
  109. </script> 

五、大功告成

基本上的流程就是这样了,比较麻烦的一点就是生成签名那一块,注意一点就行了.



zend