微信JSSDK接入问题记录及源码

今天应客户要求，把一个html5游戏的微信分享功能从第三方库切换到官方库了，官方微信JSSDK。

这其中碰到了一些问题，记录一下（服务端环境为PHP）：

1. 开启openssl功能

Warning: file_get_contents(https://graph.qq.com/user/xxxxx) [function.file-get-contents]: failed to open stream: No error in /xxx/php.php on line 2

遇到这样的错误的，是因为没有开启openssl功能，可以在php.ini中把 extension=php_openssl.dll之前的;去掉，保存并重启（最好重启服务器）

注意：php.ini的位置是在phpinfo中找的。

2. encodeURIComponent(url)

js端的要记得把当前页面的url编码，不然送给服务器的参数可能不对，最后导致签名出错。

最后附上相关的源码，包括服务端和javascript：

• 客户端javascript

/**
 * Author: lonewolf
 * Date: 2015-02-08 13:48:43
 */
// 微信分享的数据
var wxData = {
    title : ‘好玩的游戏！‘,
    desc : ‘大家快来玩!‘,
    link : ‘http://xxx‘,
    imgUrl : ‘http://xxx.png‘,
    type: ‘‘, 
    dataUrl: ‘‘, 
    success: function () {
        //分享成功
       //do something!
    }
};
// 配置数据
wxConfigData={
    debug: true, //调试的时候最好设为true，它每一步都会alert数据出来，让你知道出了什么问题
    appId: ‘xxx‘,
    timestamp: 1423367602, //随便填写一串数字
    nonceStr: ‘sMADlDUaGt6DsEc6‘, //随便一字符串
    signature: ‘‘, //**这个要到服务器获取**
    jsApiList: [ //用到的功能，自定义
    ‘checkJsApi‘,
    ‘onMenuShareTimeline‘,
    ‘onMenuShareAppMessage‘,
    ‘onMenuShareQQ‘,
    ‘onMenuShareWeibo‘
    ] 
}
// 获取签名
function wxGetSign () {
    var data1={};
    data1["timestamp"]=wxConfigData["timestamp"];
    data1["nonceStr"]=wxConfigData["nonceStr"];
    data1["url"]=encodeURIComponent(location.href.split(‘#‘)[0]);
    // alert(data1["url"]);
    // 自己找个ajax库
    ajax.post("wxGetSign.php?ran="+Math.random(), data1, function (data) {
        // 返回{sign:xxx}
        // alert(data);
        data=eval("("+data+")");
        if(data["sign"])
        {
            // 获取签名成功，初始化分享
            wxConfigData["signature"]=data["sign"];
            wxInit();
        }
    });
}
// 初始化，已经获得签名
function wxInit () {
    // 配置参数
    wx.config(wxConfigData);
    // 分享
    wx.ready(function(){
        addWeixinShareListening();
    });
    wx.error(function(res){
        // alert(res);
    });
}
// 分享绑定
function addWeixinShareListening () {
    wx.onMenuShareTimeline(wxData);
    wx.onMenuShareAppMessage(wxData);
    wx.onMenuShareQQ(wxData);
    wx.onMenuShareWeibo(wxData);
}

//执行，获取签名
wxGetSign();

相关的参数改一改，放到页面中就可以了，也可保存为一个js文件。

• 服务端

<?php
/*
因为获取的access_token以及jsapi_ticket都有时间限制（7200秒后失效），且调用接口的次数有限制，所以我们得把得到的access_token和jsapi_ticket缓存到一个文件里，每次请求都检查是否已过期。
*/

//设置时区
date_default_timezone_set(‘Asia/ShangHai‘);
//session
session_start();
$returnObj = array("sign" => "");
// 常量
$appId="xxx";
$appSecret="xxx";

$timestamp = $_POST["timestamp"];
$nonceStr = $_POST["nonceStr"];
$url = $_POST["url"];

if ($timestamp&&$nonceStr&&$url) {
    // 获取access_token和jsapi_ticket
    $access_token="";
    $jsapi_ticket="";
    // 保存到文件sign.txt
    $filename="sign.txt";
    $time=time();
    // 先查找本地有没有保存
    if (file_exists($filename)) {
        $str=file_get_contents($filename);
        $obj=json_decode($str,true);
        if ($obj&&$obj["access_token"]&&$obj["jsapi_ticket"]&&$obj["time"]) {
            $lastTime=intval($obj["time"]);
            // 标准的是7200，要少一点
            if ($time-$lastTime<7100) {
                $access_token=$obj["access_token"];
                $jsapi_ticket=$obj["jsapi_ticket"];
            }
        }
    }
    if ($access_token=="") {
        // 如果第一次或已过期则重新获取
        $returnObj["re"]=1; //这个只是测试用，看看是不是新请求
        // 获取access_token
        $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appId}&secret={$appSecret}";
        $str=file_get_contents($tokenUrl);
        // $returnObj["token_data"]=$str;
        $obj=json_decode($str,true);
        if ($obj&&$obj["access_token"]) {
            $access_token=$obj["access_token"];
            // 获取jsapi_ticket
            $ticketUrl="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi";
            $str=file_get_contents($ticketUrl);
            // $returnObj["ticket_data"]=$str;
            $obj=json_decode($str,true);
            if ($obj&&$obj["errcode"]==0&&$obj["ticket"]) {
                $jsapi_ticket=$obj["ticket"];
                // 保存文件
                $data=array("access_token"=>$access_token,"jsapi_ticket"=>$jsapi_ticket,"time"=>$time);
                $data=json_encode($data);
                file_put_contents($filename, $data);
            }
            else
            {
                $returnObj["error"]="wrong ticket";
            }
        }
        else
        {
            $returnObj["error"]="wrong access_token";
        }
    }
    if ($access_token&&$jsapi_ticket) {
        // test
        // $returnObj["access_token"]=$access_token;
        // $returnObj["jsapi_ticket"]=$jsapi_ticket;
        // 签名算法
        $str="jsapi_ticket={$jsapi_ticket}&noncestr={$nonceStr}&timestamp={$timestamp}&url={$url}";
        // $returnObj["signstr"]=$str;
        $sign=sha1($str);
        $returnObj["sign"]=$sign;
    }
}
echo json_encode($returnObj);
?>

至此，整个过程就算完了。

微信JSSDK接入问题记录及源码

原文：http://my.oschina.net/lonewolf/blog/376558