微信JS-SDK 配置(扫一扫 / 自定义分享简介..)

根据官方的开发文档可以把步骤分为以下3步:

1.引入官方JS文件 (建议去官方文档引入最新的版本 : http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.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)

2.准备参数(最好服务器端准备),根据官方文档要求准备一下参数:

 1 <script>
 2 wx.config({
 3     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 4     appId: '', // 必填,公众号的唯一标识,必须先开通微信商户(微信提供)
 5     timestamp: , // 必填,生成签名的时间戳 (自己准备)
 6     nonceStr: '', // 必填,生成签名的随机串 (自己准备)
 7     signature: '',// 必填,签名,见附录1 (自己准备,但需要通过微信提供的 token / ticket 等参数才能请求到)
 8     jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见官方文档的附录2
 9 });
10 </script>

服务器端的参数准备如下:(实际代码根据实际情况调整)

请事先准备好 appid 和 secret (请自行至微信公众平台申请)

 1     $WeChatToken = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$Appid."&secret=".$Secret);    
 2     $arr_WeChatToken = json_decode($WeChatToken,true);
 3     $JSAPI_TICKET = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$arr_WeChatToken['access_token']."&type=jsapi");
 4     $arr_JSAPI_TICKET = json_decode($JSAPI_TICKET,true);
 5     $Ticket = $arr_JSAPI_TICKET['ticket'];
 6     ##-- 2.生成随机签名 noncestr
 7     $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 8     for ($i = 0; $i < 16; $i++) 
 9     {
10         $NonceStr .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
11     }
12     $TimeStamp = $NowTimeStamp;
13     $Url = '请自行填写当前文件完整路径';
14     $SigNature = sha1('jsapi_ticket='.$Ticket.'&noncestr='.$NonceStr.'&timestamp='.$TimeStamp.'&url='.$Url);

3.调用接口 (本实例为 自定义 微信分享时的插图 / 标题 / 摘要)

 1 <script>
 2 wx.ready(function(){
 3     /*    测试时调用,如果调用成功则会弹出提示
 4     wx.checkJsApi({
 5         jsApiList: [
 6             'onMenuShareTimeline',
 7             'onMenuShareAppMessage'
 8         ]
 9     });
10     */
11     wx.onMenuShareTimeline({
12         title: 'JSSDK调用测试', // 分享标题
13         link: 'http://i.cnblogs.com/EditPosts.aspx?opt=1', // 分享链接
14         imgUrl: 'http://i.cnblogs.com/EditPosts.aspx?opt=1', // 分享图标
15         success: function (res) { 
16             // 用户确认分享后执行的回调函数
17         },
18         cancel: function (res) { 
19             // 用户取消分享后执行的回调函数
20         }
21     });
22     wx.onMenuShareAppMessage({
23         title: 'JSSDK调用测试', // 分享标题
24         desc: '描述', // 分享描述
25         link: 'http://i.cnblogs.com/EditPosts.aspx?opt=1', // 分享链接
26         imgUrl: 'http://i.cnblogs.com/EditPosts.aspx?opt=1', // 分享图标
27         type: '', // 分享类型,music、video或link,不填默认为link
28         dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
29         success: function () { 
30             // 用户确认分享后执行的回调函数
31         },
32         cancel: function () { 
33             // 用户取消分享后执行的回调函数
34         }
35     });
36 });
37 </script>

注意 : 所有参数都必须保证 服务器端与 客户端所使用的是一致的!否则无法调用!

posted @ 2016-01-15 14:41  防战  阅读(454)  评论(0)    收藏  举报