博客列表 >一个PHP文件实现JS-SDK新版微信分享朋友圈,分享给好友功能

一个PHP文件实现JS-SDK新版微信分享朋友圈,分享给好友功能

TANKING的代码日志
TANKING的代码日志原创
2020年02月19日 12:28:122054浏览

前言

现在网上很多关于js-sdk的文章,一搜到处都是,并且有很多不同的实现方法,解决方案,但是均已失效,因为以前的1.0版、1.4版接口都已经丢弃了。

现在已经进入1.6版接口,我们除了要引用jweixin-1.6.0.js之外,还要使用最新的API。

之前的版本是有分享成功、取消分享、分享失败的回调函数的,现在为了防止这个接口的滥用,已经取消了回调,无法检测是否已经分享成功了。

新版的分享朋友圈、分享给好友的API是:

  1. 'updateAppMessageShareData', //分享到朋友圈
  2. 'updateTimelineShareData',//分享给朋友

实现流程

1、先通过后端获取几个参数:jsapi_ticket、noncestr、timestamp、url,获取这几个参数的目的就是为了签名获得signature。
2、前端要引入官方的1.6版js文件jweixin-1.6.0.js

  1. http://res.wx.qq.com/open/js/jweixin-1.6.0.js

3、前端初始化配置,即将后端获取到的参数都用到前端上去,并且在jsApiList这个数组当中添加你要使用的API。

  1. // 初始化配置
  2. wx.config({
  3. debug: true, // 正式上线后成false不在弹出调试信息
  4. appId: '<?php echo $appid;?>',
  5. timestamp: '<?php echo $timestamp;?>',
  6. nonceStr: '<?php echo $nonceStr;?>',
  7. signature: '<?php echo $signature;?>',
  8. jsApiList: [
  9. // 所有要调用的 API 都要加到这个列表中
  10. 'updateAppMessageShareData', //分享到朋友圈
  11. 'updateTimelineShareData',//分享给朋友
  12. ]
  13. });

4、然后调用ready函数来验证是否配置成功

  1. wx.ready(function () {
  2. //实例化API
  3. }
  4. })

信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看。

  1. wx.error(function(res){
  2. // config
  3. alert(res);
  4. });

5、实例化API

  1. //分享到朋友圈
  2. wx.updateTimelineShareData({
  3. title: '', // 分享标题
  4. link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  5. imgUrl: '', // 分享图标
  6. success: function (res) {
  7. //分享成功
  8. }
  9. })
  10. wx.updateAppMessageShareData({
  11. title: '', // 分享标题
  12. desc: '', // 分享描述
  13. link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  14. imgUrl: '', // 分享图标
  15. success: function (res) {
  16. //分享成功
  17. }
  18. })

代码

  1. <?php
  2. // 声明页面header
  3. header("Content-type:charset=utf-8");
  4. // 声明APPID、APPSECRET
  5. $appid = "填写你的APPID";
  6. $appsecret = "填写你的APPSECRET";
  7. // 获取access_token和jsapi_ticket
  8. function getToken(){
  9. $file = file_get_contents("access_token.json",true);//读取access_token.json里面的数据
  10. $result = json_decode($file,true);
  11. //判断access_token是否在有效期内,如果在有效期则获取缓存的access_token
  12. //如果过期了则请求接口生成新的access_token并且缓存access_token.json
  13. if (time() > $result['expires']){
  14. $data = array();
  15. $data['access_token'] = getNewToken();
  16. $data['expires'] = time()+7000;
  17. $jsonStr = json_encode($data);
  18. $fp = fopen("access_token.json", "w");
  19. fwrite($fp, $jsonStr);
  20. fclose($fp);
  21. return $data['access_token'];
  22. }else{
  23. return $result['access_token'];
  24. }
  25. }
  26. //获取新的access_token
  27. function getNewToken($appid,$appsecret){
  28. global $appid;
  29. global $appsecret;
  30. $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret."";
  31. $access_token_Arr = file_get_contents($url);
  32. $token_jsonarr = json_decode($access_token_Arr, true);
  33. return $token_jsonarr["access_token"];
  34. }
  35. $access_token = getToken();
  36. //缓存jsapi_ticket
  37. function getTicket(){
  38. $file = file_get_contents("jsapi_ticket.json",true);//读取jsapi_ticket.json里面的数据
  39. $result = json_decode($file,true);
  40. //判断jsapi_ticket是否在有效期内,如果在有效期则获取缓存的jsapi_ticket
  41. //如果过期了则请求接口生成新的jsapi_ticket并且缓存jsapi_ticket.json
  42. if (time() > $result['expires']){
  43. $data = array();
  44. $data['jsapi_ticket'] = getNewTicket();
  45. $data['expires'] = time()+7000;
  46. $jsonStr = json_encode($data);
  47. $fp = fopen("jsapi_ticket.json", "w");
  48. fwrite($fp, $jsonStr);
  49. fclose($fp);
  50. return $data['jsapi_ticket'];
  51. }else{
  52. return $result['jsapi_ticket'];
  53. }
  54. }
  55. //获取新的access_token
  56. function getNewTicket($appid,$appsecret){
  57. global $appid;
  58. global $appsecret;
  59. $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".getToken()."";
  60. $jsapi_ticket_Arr = file_get_contents($url);
  61. $ticket_jsonarr = json_decode($jsapi_ticket_Arr, true);
  62. return $ticket_jsonarr["ticket"];
  63. }
  64. $jsapiTicket = getTicket();
  65. // 动态获取URL
  66. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
  67. $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
  68. // 生成时间戳
  69. $timestamp = time();
  70. // 生成nonceStr
  71. $createNonceStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  72. str_shuffle($createNonceStr);
  73. $nonceStr = substr(str_shuffle($createNonceStr),0,16);
  74. // 按照 key 值 ASCII 码升序排序
  75. $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
  76. // 按顺序排列按sha1加密生成字符串
  77. $signature = sha1($string);
  78. ?>
  79. <!DOCTYPE html>
  80. <html lang="zh_cn">
  81. <head>
  82. <meta charset="UTF-8">
  83. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  84. <title>要分享的index模板页面</title>
  85. </head>
  86. <body>
  87. <h3>已获得updateAppMessageShareData</h3>
  88. <h3>已获得updateTimelineShareData</h3>
  89. <h3>这两个API权限</h3>
  90. <h3>请点击右上角[···]体验</h3>
  91. </body>
  92. </html>
  93. <!-- 引入微信分享js-->
  94. <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  95. <script type="text/javascript">
  96. // 初始化配置
  97. wx.config({
  98. debug: true, // 正式上线后改成false不在弹出调试信息
  99. appId: '<?php echo $appid;?>',
  100. timestamp: '<?php echo $timestamp;?>',
  101. nonceStr: '<?php echo $nonceStr;?>',
  102. signature: '<?php echo $signature;?>',
  103. jsApiList: [
  104. // 所有要调用的 API 都要加到这个列表中
  105. 'updateAppMessageShareData', //分享到朋友圈
  106. 'updateTimelineShareData',//分享给朋友
  107. ]
  108. });
  109. // 配置完成后会调用ready函数
  110. wx.ready(function (res) {
  111. //分享到朋友圈
  112. wx.updateTimelineShareData({
  113. title: '调用成功!分享到朋友圈!', // 分享标题
  114. link: 'http://www.liketube.cn/res/share.php', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  115. imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享图标
  116. success: function (res) {
  117. // 分享成功
  118. }
  119. })
  120. wx.updateAppMessageShareData({
  121. title: '调用成功!分享给好友!', // 分享标题
  122. desc: '微信JSSDK1.6新版分享接口成功调用!', // 分享描述
  123. link: 'http://www.liketube.cn/res/share.php', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  124. imgUrl: 'http://www.liketube.cn/res/1.jpg', // 分享图标
  125. success: function (res) {
  126. // 分享成功
  127. }
  128. })
  129. });
  130. //错误返回信息
  131. wx.error(function(res){
  132. // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  133. alert(res);
  134. });
  135. </script>

代码说明

1、在使用这个代码之前,请把您的域名添加到已认证的公众号的JS安全域名当中,具体到文件夹,例如你的程序代码在page文件夹,那么JS安全域名为 www.xxx.com/page

2、wx.config,debug: true打开可以看到调试信息,如果返回config:ok 则代表成功。如果返回其他的,请在开发者工具根据错误码进行调试。看下图,三连弹。

意思是我们的配置信息OK、分享朋友圈API也OK、分享给好友API也OK。

这是在开发的时候应该开启的dubug,如果都OK,到时候上线使用,直接debug: false就不会弹出来了!

3、因为涉及到生成access_token和jsapi_ticket,并且这两个东西每天请求量有限,并且这两个东西有效期为2小时,所以这两个东西我都是缓存到服务器的,所以会在服务器生成access_token.json、jsapi_ticket.json这两个文件,每次访问页面,都会访问这两个文件,判断是否超时,如果超时,则重新获取并且缓存,如果还没超时,那就直接调用缓存。

分享朋友圈

分享给好友

体验Demo

应用

如果你的博客、论坛、以及自建页面、网站、活动页面等没有自带这方面的功能,你只需要把上面代码配置到你网站的页面上,就能轻松实现微信分享了!高档很多呢!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议
TANKING2020-03-17 11:30:031楼
学习交流WeChat:face6009