「微信开发」JSSDK的配置和使用

之前的文章如下：

这篇文章主要记录jssdk的使用的注意事项

jssdk的文档：http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html

一、绑定域名

在配置服务器的时候会有绑定域名，其中接口测试号只能使用一个，而认证服务号能配置三个

注意事项如下：

配置了www.ptbird.cn之后，www.ptbird.cn开头的网页都能用，但是ptbird.cn的网页不能用。

二、jsapi_ticket

之前的文章由提到，jsapi_ticket和access_token差不多是一个意思，想要调用jssdk的接口就必须使用这个凭据。

而这个凭据是需要根据access_token来获取的。

之前的文章中我写了如何获得jssdk并保存在数据库中，以及合理刷新access_token和jsapi_ticket。

文章地址：http://www.ptbird.cn/weixin-develop-03.html

重复一下获取jsapi_ticket的函数：

//参数为access_token
//获取 js ticket
function getJsTicket($accessToken=''){
    $url='https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$accessToken.'&type=jsapi';
    $jsTicketRes=file_get_contents($url);//get
    $jsTicketRes=json_decode($jsTicketRes,true);
    return $jsTicketRes;

三、引入的js文件

一定要使用https的协议： https://res.wx.qq.com/open/js/jweixin-1.0.0.js

主要是ios9之后的系统的原因

四、配置

在使用jssdk之前是需要进行配置的

我的使用心得：

这些配置参数与signature有关，因此都应该在服务端处理好之后在通过前端调用。

配置的函数如下：

最主要的是signature的生成

//javascript的使用函数
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

五、signature的生成

首先，进行配置的时候要用到他的权限签名算法，来计算signature，只有signature符合才能够配置成功。

signature的计算就有自己的签名算法。

官方文档地址：

http://mp.weixin.qq.com/wiki/11/74ad127cc054f6b80759c40f77ec03db.html#.E9.99.84.E5.BD.951-JS-SDK.E4.BD.BF.E7.94.A8.E6.9D.83.E9.99.90.E7.AD.BE.E5.90.8D.E7.AE.97.E6.B3.95

注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

php的函数参数是需要config的页面的完整URL

//URL一定是一模一样的访问的url，否则失败
//获取token并生成signature
    //参数是url 因为要根据不同的url生成不同的signature，因此url作为参数传入
    private function getJsSignature($url=''){
        //getToken这个函数在/Core/Common/funcitons/1588行左右
        $token=getToken();
        //$token的格式是
//        array(
//            'access_token',
//            'js_ticket',
//            'time',
//            'xxx' //没用的
//        );
        //生成时间戳
        $timeStamp=time();
        //生成signature
        //1. 对参数进行ASCII码的排序使用url键值对的形式
        $str='jsapi_ticket='.$token['js_ticket'].'&noncestr='.C('TOKEN').'×tamp='.$timeStamp.'&url='.$url;
        //2. 对str进行sha1签名得到signature
        $signature=sha1($str);
        //将必要的信息返回
        $dataRes=array(
            'signature'=>$signature,
            'timeStamp'=>$timeStamp,
            'nonceStr'=>C('TOKEN'),
            'appId'=>C('APP_ID'),
            'jsapi_ticket'=>$token['js_ticket'],
            'url'=>$url
        );
//        p($dataRes);
        return $dataRes;
    }

六、使用

配置之后就能在前端页面js中使用了，我用的模板引擎输出。

注意事项：

分享接口是在微信访问页面的时候，使用微信的分享（分享到朋友圈或者发送给朋友）的时候自动调用的，不是手动调用的
只有在wx.ready()之后才能正常使用，就是只有config成功了才能使用。


$(document).ready(function(){
                wx.config({
                    debug: false,
                    appId: '<{$appId}>',
                    timestamp: '<{$timeStamp}>',
                    nonceStr: '<{$nonceStr}>',
                    signature: '<{$signature}>',
                    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
                });
                wx.ready(function(){
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    wx.onMenuShareTimeline({
                        title: '<{$nickname}> 邀请您加入5Cup星愿会员',
                        link: location.href,
                        imgUrl:'__LOGO_IMG_64__',
                        success: function () {
                        },
                        cancel: function () {
                        }
                    });
                    wx.onMenuShareAppMessage({
                        title: '<{$nickname}> 邀请您加入5Cup星愿会员',
                        desc: '欢迎加入5Cup Mini Cafe 星愿会员',
                        link: location.href,
                        imgUrl: '__LOGO_IMG_64__',
                        type: 'link',
                        dataUrl: '',
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
            });

7、效果

我的网页的标题不是这个标题，并且也没有这张图片

因此调用是成功的。

测试的时候可以config中的debug开成true，进行测试、

postbird

Postbird