微信JSSDK分享功能详解

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

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

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

2.微信WEB开发者工具：

Windows 64位版本：下载地址

Windows 32位版本：下载地址

Mac版本：下载地址

3.微信JSSDK分享sample：点击下载

4.在线DEMO：http://203.195.235.76/jssdk/

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

前言：

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

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

• 2.实测图解：
• 2.1
  测试页面：
• 

2.2分享到朋友圈：

 

 

 

 

 

 

2.3分享到朋友圈：

 

 

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

 

（这个是触发cancel的效果)

 

 

2.3调试界面：

• 3.实测代码样例：

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

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配置代码

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分享代码：

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. wx.onMenuShareAppMessage({
19. title: '22222', // 分享标题
20. desc: '22222',
21. link:window.location.href,
22. imgUrl: "{pigcms:$res['pic']}", // 分享图标
23. trigger: function (res) {
24. // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
25. },
26. success: function (res) {
27. // 分享成功执行此回调函数
28. alert('已分享');
29. },
30. cancel: function (res) {
31. alert('已取消');
32. },
33. fail: function (res) {
34. alert(JSON.stringify(res));
35. }
36. });
37. });
38. </script>

JSSDK类

jssdk.php

1. <?php
2. class JSSDK {
3. private $appId;
4. private $appSecret;
5. public function __construct($appId, $appSecret) {
6. $this->appId = $appId;
7. $this->appSecret = $appSecret;
8. }
9. public function getSignPackage() {
10. $jsapiTicket = $this->getJsApiTicket();
11. // 注意 URL 一定要动态获取，不能 hardcode.
12. $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
13. $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
14. $timestamp = time();
15. $nonceStr = $this->createNonceStr();
16. // 这里参数的顺序要按照 key 值 ASCII 码升序排序
17. $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
18. $signature = sha1($string);
19. $signPackage = array(
20. "appId"     => $this->appId,
21. "nonceStr"  => $nonceStr,
22. "timestamp" => $timestamp,
23. "url"       => $url,
24. "signature" => $signature,
25. "rawString" => $string
26. );
27. return $signPackage;
28. }
29. private function createNonceStr($length = 16) {
30. $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
31. $str = "";
32. for ($i = 0; $i < $length; $i++) {
33. $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
34. }
35. return $str;
36. }
37. private function getJsApiTicket() {
38. $accessToken = $this->getAccessToken();
39. // 如果是企业号用以下 URL 获取 ticket
40. // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
41. $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
42. $res = json_decode($this->httpGet($url));
43. $ticket = $res->ticket;
44. return $ticket;
45. }
46. private function getAccessToken() {
47. // access_token 应该全局存储与更新，以下代码以写入到文件中做示例
48. // 如果是企业号用以下URL获取access_token
49. // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
50. $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
51. $res = json_decode($this->httpGet($url));
52. $access_token = $res->access_token;
53. return $access_token;
54. }
55. private function httpGet($url) {
56. $curl = curl_init();
57. curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
58. curl_setopt($curl, CURLOPT_TIMEOUT, 500);
59. curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
60. curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
61. curl_setopt($curl, CURLOPT_URL, $url);
62. $res = curl_exec($curl);
63. curl_close($curl);
64. return $res;
65. }
66. }