微信JSSDK分享功能详解

傷城~ 2022-06-05 00:24 524阅读 0赞

本文以微信分享到朋友圈，分享给微信好友为例为参考，进行调用测试，想添加其他的功能，自行查看[开发人员文档][Link 1]即可

工欲善其事，必先利其器，好好利用下边的帮助工具，都是腾讯给开发人员的工具

1.微信开发者说明文档：[点击查看][Link 2]

2.微信WEB开发者工具：

Windows 64位版本：[下载地址][Link 3]

Windows 32位版本：[下载地址][Link 4]

Mac版本：[下载地址][Link 5]

3.微信JSSDK分享sample：[点击下载][Link 6]

4.在线DEMO：[http://203.195.235.76/jssdk/][http_203.195.235.76_jssdk]

微信版本6.0以后，原有的WeixinJSBridge.on('menu:share:timeline', function (argv) \{\}不再可在以使用，那如何在使用微信的其他功能呢？官方给出了JSSDK的使用，帮助我们解决~

前言：

虽然微信提供了JSSDK，但是这不意味着你可以用自定义的按钮来直接打开微信的分享界面，这套JSSDK只是把微信分享接口的内容定义好了，实际还是需要用户点击右上角的菜单按钮进行主动的分享，用户点开分享界面之后，出现的内容就会是你定义的分享标题、图片和链接。

*  1.[JSSDK使用步骤][JSSDK]
 *   *  [1.1.1 步骤一：绑定域名][1.1.1]
     *  ![Center][]
     *  
     *  [1.1.2 步骤二：引入JS文件][1.1.2 _JS]
     *  ![Center 1][]
     *  
     *  [1.1.3 步骤三：通过config接口注入权限验证配置][1.1.3 _config]
     *  ![Center 2][]（$tpl\['appid'\] $tpl\['appsercret'\]换成你自己！）
     *  ![SouthEast][]
     *  
     *  [1.1.4 步骤四：通过ready接口处理成功验证][1.1.4 _ready]
     *  ![SouthEast 1][]
     *  
     *  [1.1.5 步骤五：通过error接口处理失败验证][1.1.5 _error]

![SouthEast 2][]

*  2.实测图解：
 *  
 *  2.1 测试页面：
 *  ![Center 3][]

2.2分享到朋友圈：

![SouthEast 3][]

![SouthEast 4][]

![SouthEast 5][]

![Center 4][]

2.3分享到朋友圈：

![SouthEast 6][]

![SouthEast 7][]（这个是触发success的效果,配图描述写错了，抱歉)

![SouthEast 8][]（这个是触发cancel的效果)

![Center 5][]

2.3调试界面：

![Center 6][]

*  3.实测[代码][JSSDK]样例：

后台代码(jssdk.php见后边)：

\[php\] [view plain][] [copy][view plain]

1.  //获取apptoken
2.  **require\_once** "jssdk.php"; 
3.  $jssdk = **new** JSSDK($appid,$appsecret);//这里填写自己的appid 和secret
4.  $signPackage = $jssdk\->GetSignPackage(); 
5.  $this\->assign("signPackage",$signPackage);

JS配置代码

\[javascript\] [view plain][] [copy][view plain]

1.  <script type="text/javascript" src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script> 
2.   <script type="text/javascript"> 
3.   wx.config(\{ 
4.   debug: **false**, 
5.   appId: '\{$signPackage\["appId"\]\}', 
6.   timestamp: '\{$signPackage\["timestamp"\]\}', 
7.   nonceStr: '\{$signPackage\["nonceStr"\]\}', 
8.   signature: '\{$signPackage\["signature"\]\}', 
9.   jsApiList: \[ 
10. // 所有要调用的 API 都要加到这个列表中
11. 'checkJsApi', 
12. 'onMenuShareTimeline', 
13. 'onMenuShareAppMessage', 
14. 'onMenuShareQQ', 
15. 'onMenuShareWeibo', 
16. 'onMenuShareQZone'
17.  \] 
18.  \}); 
19.  </script> 
20.  <script type="text/javascript" src='http://203.195.235.76/jssdk/js/zepto.min.js'></script>

JS分享代码：

\[javascript\] [view plain][] [copy][view plain]

1.  <script type="text/javascript"> 
2.  //完成wx.config，执行这里
3.   wx.ready(**function** () \{ 
4.  //分享到朋友圈
5.   wx.onMenuShareTimeline(\{ 
6.   title: '1111111', // 分享标题
7.   link:window.location.href, 
8.   imgUrl: "\{pigcms:$res\['pic'\]\}", // 分享图标
9.   success: **function** () \{ 
10. // 分享成功执行此回调函数
11.  alert('success'); 
12.  \}, 
13.  cancel: **function** () \{ 
14.  alert('cancel'); 
15.  \} 
16.  \}); 
17. 
18. //分享给朋友
19.  wx.onMenuShareAppMessage(\{ 
20.  title: '22222', // 分享标题
21.  desc: '22222', 
22.  link:window.location.href, 
23.  imgUrl: "\{pigcms:$res\['pic'\]\}", // 分享图标
24.  trigger: **function** (res) \{ 
25. // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
26.  \}, 
27.  success: **function** (res) \{ 
28. // 分享成功执行此回调函数
29.  alert('已分享'); 
30.  \}, 
31.  cancel: **function** (res) \{ 
32.  alert('已取消'); 
33.  \}, 
34.  fail: **function** (res) \{ 
35.  alert(JSON.stringify(res)); 
36.  \} 
37.  \}); 
38.  \}); 
39. 
40. </script>

JSSDK类

jssdk.php

\[php\] [view plain][] [copy][view plain]

1.  <?php 
2.  **class** JSSDK \{ 
3.  **private** $appId; 
4.  **private** $appSecret; 
5.  
6.  **public** **function** \_\_construct($appId, $appSecret) \{ 
7.  $this\->appId = $appId; 
8.  $this\->appSecret = $appSecret; 
9.   \} 
10. 
11. **public** **function** getSignPackage() \{ 
12. $jsapiTicket = $this\->getJsApiTicket(); 
13. 
14. // 注意 URL 一定要动态获取，不能 hardcode.
15. $protocol = (!empty($\_SERVER\['HTTPS'\]) && $\_SERVER\['HTTPS'\] !== 'off' || $\_SERVER\['SERVER\_PORT'\] == 443) ? "https://" : "http://"; 
16. $url = "$protocol$\_SERVER\[HTTP\_HOST\]$\_SERVER\[REQUEST\_URI\]"; 
17. 
18. $timestamp = time(); 
19. $nonceStr = $this\->createNonceStr(); 
20. 
21. // 这里参数的顺序要按照 key 值 ASCII 码升序排序
22. $string = "jsapi\_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url"; 
23. 
24. $signature = sha1($string); 
25. 
26. $signPackage = **array**( 
27. "appId" => $this\->appId, 
28. "nonceStr" => $nonceStr, 
29. "timestamp" => $timestamp, 
30. "url" => $url, 
31. "signature" => $signature, 
32. "rawString" => $string
33.  ); 
34. **return** $signPackage; 
35.  \} 
36. 
37. **private** **function** createNonceStr($length = 16) \{ 
38. $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; 
39. $str = ""; 
40. **for** ($i = 0; $i < $length; $i\++) \{ 
41. $str .= substr($chars, mt\_rand(0, strlen($chars) - 1), 1); 
42.  \} 
43. **return** $str; 
44.  \} 
45. 
46. **private** **function** getJsApiTicket() \{ 
47. 
48. $accessToken = $this\->getAccessToken(); 
49. 
50. // 如果是企业号用以下 URL 获取 ticket
51. // $url = "https://qyapi.weixin.qq.com/cgi-bin/get\_jsapi\_ticket?access\_token=$accessToken";
52. $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access\_token=$accessToken"; 
53. $res = json\_decode($this\->httpGet($url)); 
54. 
55. $ticket = $res\->ticket; 
56. 
57. **return** $ticket; 
58.  \} 
59. 
60. **private** **function** getAccessToken() \{ 
61. // access\_token 应该全局存储与更新，以下代码以写入到文件中做示例
62. // 如果是企业号用以下URL获取access\_token
63. // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
64. $url = "https://api.weixin.qq.com/cgi-bin/token?grant\_type=client\_credential&appid=$this->appId&secret=$this->appSecret"; 
65. $res = json\_decode($this\->httpGet($url)); 
66. $access\_token = $res\->access\_token; 
67. 
68. **return** $access\_token; 
69.  \} 
70. 
71. **private** **function** httpGet($url) \{ 
72. $curl = curl\_init(); 
73.  curl\_setopt($curl, CURLOPT\_RETURNTRANSFER, true); 
74.  curl\_setopt($curl, CURLOPT\_TIMEOUT, 500); 
75.  curl\_setopt($curl, CURLOPT\_SSL\_VERIFYPEER, false); 
76.  curl\_setopt($curl, CURLOPT\_SSL\_VERIFYHOST, false); 
77.  curl\_setopt($curl, CURLOPT\_URL, $url); 
78. 
79. $res = curl\_exec($curl); 
80.  curl\_close($curl); 
81. 
82. **return** $res; 
83.  \} 
84. \}

[Link 1]: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
[Link 2]: http://mp.weixin.qq.com/wiki/home/index.html
[Link 3]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x64
[Link 4]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=x86
[Link 5]: https://mp.weixin.qq.com/debug/cgi-bin/webdebugger/download?from=mpwiki&os=darwin
[Link 6]: http://download.csdn.net/detail/ty_hf/9485731
[http_203.195.235.76_jssdk]: http://203.195.235.76/jssdk/
[JSSDK]: http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#JSSDK.E4.BD.BF.E7.94.A8.E6.AD.A5.E9.AA.A4
[1.1.1]: http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E7.BB.91.E5.AE.9A.E5.9F.9F.E5.90.8D
[Center]: /images/20220605/b066b03b4b254214868edd9044a0d64d.png
[1.1.2 _JS]: http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E6.AD.A5.E9.AA.A4.E4.BA.8C.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6
[Center 1]: /images/20220605/ed27e4685e3e45218919b9e6442577ff.png
[1.1.3 _config]: http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E6.AD.A5.E9.AA.A4.E4.B8.89.EF.BC.9A.E9.80.9A.E8.BF.87config.E6.8E.A5.E5.8F.A3.E6.B3.A8.E5.85.A5.E6.9D.83.E9.99.90.E9.AA.8C.E8.AF.81.E9.85.8D.E7.BD.AE
[Center 2]: /images/20220605/55faf3048bf248c0b5c3779538c8ebd8.png
[SouthEast]: /images/20220605/16657820ab7f4e98ab35a7cb404a65d3.png
[1.1.4 _ready]: http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E6.AD.A5.E9.AA.A4.E5.9B.9B.EF.BC.9A.E9.80.9A.E8.BF.87ready.E6.8E.A5.E5.8F.A3.E5.A4.84.E7.90.86.E6.88.90.E5.8A.9F.E9.AA.8C.E8.AF.81
[SouthEast 1]: /images/20220605/ae080b05e44e4763913d5f32f68c3b54.png
[1.1.5 _error]: http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E6.AD.A5.E9.AA.A4.E4.BA.94.EF.BC.9A.E9.80.9A.E8.BF.87error.E6.8E.A5.E5.8F.A3.E5.A4.84.E7.90.86.E5.A4.B1.E8.B4.A5.E9.AA.8C.E8.AF.81
[SouthEast 2]: /images/20220605/79cf3808b435490cac1f918b49081d72.png
[Center 3]: /images/20220605/77f0ad1e0857443bbee210bb68f05759.png
[SouthEast 3]: /images/20220605/20278be6cd864b7ea623414b4d050b89.png
[SouthEast 4]: /images/20220605/2502e3dad0ee4c699089b72cfa1ccdcc.png
[SouthEast 5]: /images/20220605/2f6bf5e0315f48d4a330cac321b3b867.png
[Center 4]: /images/20220605/347bfa83f71245fd8188bd07a8a9668b.png
[SouthEast 6]: /images/20220605/bf29f45fae2f47c199f4c93a27159288.png
[SouthEast 7]: /images/20220605/14ca18aa1f534a3fa1821a2b61bee4f3.png
[SouthEast 8]: /images/20220605/7e14ddcfa66248408919f8622eb55814.png
[Center 5]: /images/20220605/5d6cc08f251d481885b33cff65d3c9a6.png
[Center 6]: /images/20220605/87a2515a85b3485d9919aa8cc22cd09b.png
[view plain]: http://blog.csdn.net/ty_hf/article/details/50585727#