第一章：微信项目 JSJDK环境部署 (html,js,php)
配置微信环境：
1.注册账号（订阅号）
2.绑定域名
a.设置JS接口安全域名
b.下载MP_cerify_************.txt
c.上传至主机
d.域名填写文件上传的位置
3.从开发者中心获取 AppID 和 AppServer
应用ID：appid(固定不变)
应用密钥：appserver(生成)
代码中需要用到
首先我们看下要开发这个项目都需要哪些文件：
（项目）
wx1.0--API(接口)--cache(缓存)
--js
--index.html
(接口)
API--wx_get_jsapi_ticket.php(获取动态临时签名--票据的后台文件)
--wx_get_signature.php(获取动态签名的后台文件)
--wx_get_token.php(获取动态令牌的后台文件)
（缓存）
cache--access_token.txt(内容为空)
--access_tokenTime.txt(内容为0)
--ticket.txt(内容为空)
--ticketTime.txt(内容为0)
（这个就不做解释了）
js--cookie.js（这个代码下面会放）
--jquery.js(jquery库,可在官网直接下载)
--wxJSJDK.js(这个代码下面也会放)
接下来讲一下逻辑思路
第一步：创建全局变量wxJSJDK，将所有JSJDK相关模块放入其中
第二步：做初始化，获取令牌，票据，签名
第三步：将获取到的数据信息（令牌，票据，签名）配置config，用以初始话wx
第四步：若wx的初始化状态成功，就可以使用微信的JSJDK
接下来我就分享下我调试成功的代码：（wxJSJDK.js）
var wxJSJDK = {
cersion:"1.0", //版本号
appName:"zzl", //配置应用名称
isReady:false, //微信JSJDK是否初始化完成
access_token:"", //令牌
ticket:"", //临时票据
config:{
debug: true, //开启调试模式
appid: 'wx24f91d691edb3b55', //公众号唯一标识
timestamp: Math.ceil(new Date().getTime()/1000).toString(), //时间戳
nonceStr: 'htmlzzl_wxJSJDK', //生成签名的随机串
signature: '',
jsApiList: [ //使用的JS接口列表
"onMenuShareTimeLine"
]
},
init:function() { //函数功能：初始化
if (!wx) { //验证是否存在微信的js组
alert("微信接口调用失败，请检查是否引入微信JS！");
return;
}
var that = this; //保存当前作用域，方便回调
console.log("1.调用微信接口成功，获取当前对象的所有属性，并用一个变量接收：");
console.log(that);
//获取令牌
this.wx_get_token(function(data) {
if (data.access_token) {
Cookie.Set("access_token", data.access_token, 3600);
that.access_token = data.access_token;
console.log(that.access_token);
}
//获取票据
that.wx_get_ticket(function(data) {
if (data.ticket) {
Cookie.Set("ticket", data.ticket, 3600);
that.ticket = data.ticket;
}
//获取签名
that.wx_get_signature(function(data) {
that.config.signature = data;
that.initWx(function() { //初始化微信接口
//初始化完成后执行
});
});
});
});
},
//获取令牌
wx_get_token: function(call) {
this.access_token = Cookie.Get("access_token");
console.log("2.利用cookie获取当前令牌:"+Cookie.Get("access_token"));
if (!Cookie.Get("access_token")) {
console.log("cookie中不存在access_token：利用ajax向php后台-（wx_get_token.php）文件发起请求获取动态令牌！");
$.get("./API/wx_get_token.php", {},
function(data){
call && call(data);
}, "json");
}
call && call({});
},
//获取票据
wx_get_ticket: function(call) {
this.ticket = Cookie.Get("ticket");
if (!this.ticket) {
$.get("./API/wx_get_jsapi_ticket.php",
{access_token:this.access_token},
function (data) {
call && call(data);
}, "json");
}
call && call({});
},
//获取签名
wx_get_signature: function (call) {
$.get("./API/wx_get_signature.php",{
ticket:this.ticket, //生成签名的时间戳
timestamp:this.timestamp, //生成签名的时间戳
nonceStr:this.nonceStr, //生成签名的随机串
url:window.location.href //生成签名的随机串
},
function (data) {
call && call(data);
});
},
//初始化微信接口
initWx:function(call, errorCall){
var that = this;
wx.config(this.config); //初始化配置
wx.ready(function(){
that.isReady = true;
console.log("初始化成功！");
call && call();
});
wx.error(function(){
that.isReady = "false";
errorCall && errorCall();
});
}
}
//执行初始化
wxJSJDK.init();
cookie.js
/**
************************************************************
*@project Cookie
*@author xlxi
*@Mail 939898101@qq.com
*@ver version 1.0
*@time 2013-01-16
************************************************************
*/
var Cookie ={
/**//*
函数名称：Cookie.Get([string name])
函数功能：得到Cookie
参数：name 可选项，要取得的Cookie名称
说明：name为空时将通过数组形式返回全部Cookie，name不为空时返回此Cookie名称的值，没有任何值时返回undefined
*/
Get : function(name){
var cv = document.cookie.split("; ");//使用"; "分割Cookie
var cva = [], temp;
/**//*循环的得到Cookie名称与值*/
for(i=0; i<cv.length; i++){
temp = cv[i].split("=");//用"="分割Cookie的名称与值
cva[temp[0]] = unescape(temp[1]);
}
if(name) return cva[name];//如果有name则输出这个name的Cookie值
else return cva;//如果没有name则输出以名称为key，值为Value的数组
},
/**//*
函数名称：Cookie.Set(string name, string value[, int expires[, string path[, string domain[, string secure]]]])
函数功能：存入Cookie
参数：name 必要项，要存入的Cookie名称
value 必要项，要存入的Cookie名称对应的值
expires 可选项，Cookie的过期时间，可以填入以秒为单位的保存时间，也可以填入日期格式（wdy, DD-Mon-YYYY HH:MM:SS GMT）的到期时间
path 可选项，Cookie在服务器端的有效路径
domain 可选项，该Cookie的有效域名
secure 可选项， 指明Cookie 是否仅通过安全的 HTTPS 连接传送，0或false或空时为假
说明：保存成功则返回true，保存失败返回false
*/
Set : function(name, value, expires, path, domain, secure){
if(!name || !value) return false;//如果没有name和value则返回false
if(name == "" || value == "") return false;//如果name和value为空则返回false
/**//*对于过期时间的处理*/
if(expires){
/**//*如果是数字则换算成GMT时间，当前时间加上以秒为单位的expires*/
if(/^[0-9]+$/.test(expires)){
var today = new Date();
expires = new Date(today.getTime()+expires*1000).toGMTString();
/**//*判断expires格式是否正确，不正确则赋值为undefined*/
}else if(!/^wed, d...{2} w...{3} d...{4} d...{2}:d...{2}:d...{2} GMT$/.test(expires)){
expires = undefined;
}
}
/**//*合并cookie的相关值*/
var cv = name+"="+escape(value)+";"
+ ((expires) ? " expires="+expires+";" : "")
+ ((path) ? "path="+path+";" : "")
+ ((domain) ? "domain="+domain+";" : "")
+ ((secure && secure != 0) ? "secure" : "");
/**//*判断Cookie总长度是否大于4K*/
if(cv.length < 4096){
document.cookie = cv;//写入cookie
return true;
}else{
return false;
}
},
/**//*
函数名称：Cookie.Del(string name[, string path[, string domain]])
函数功能：删除Cookie
参数：name 必要项，要删除的Cookie名称
path 可选项，要删除的Cookie在服务器端的有效路径
domain 可选项，要删除的Cookie的有效域名
说明：删除成功返回true，删除失败返回false
*/
Del : function(name, path, domain){
if(!name) return false;//如果没有name则返回false
if(name == "") return false;//如果name为空则返回false
if(!this.Get(name)) return false;//如果要删除的name值不存在则返回false
/**//*合并Cookie的相关值*/
document.cookie = name+"=;"
+ ((path) ? "path="+path+";" : "")
+ ((domain) ? "domain="+domain+";" : "")
+ "expires=Thu, 01-Jan-1970 00:00:01 GMT;";
return true;
}
}
接下来是后台文件（PHP）
wx_get_token.php(动态获取令牌的后台文件)
<?php
$token = fopen("./cache/access_token.txt"); //打开文件流 access_token.txt
$token = fread($token,1023); //获取token 结果null
$tokenTime = fopen("./cache/access_tokenTime.txt");
$prevTime = intval(fread($tokenTime,1023)); //获取上次缓存文件时间
$nowTime = time()-$prevTime; //计算时间差
if($nowTime >= 3600){ //如果时间超过3600秒，将重新获取accsee_token
$res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="这个是你的appid&server=这个是你的appserver');
//PHP无法请求https协议 解决办法：1.找到php.ini 删掉；extension = php_openssl.dll 前面的分号
//2.线上的不需要修改
$res = json_decode($res,true);
$token = $res['access_token'];
//缓存token码
$myfile = fopen("./cache/access_token.txt","w")or die("Unable to open file!");
fwrite($myfile,$token);
fclose($myfile);
//最后缓存时间
$myfileTime = fopen("./cache/access_tokenTime.txt","w")or die("Unable to open file!");
fwrite($myfileTime,time());
fclose($myfileTime);
echo json_encode($res);
}else{
echo '{"access_token":"'.$token.'"}';
}
?>
wx_get_jsapi_ticket.php(动态获取票据)
<?php
$ticket = fopen("./cache/ticket.txt","r"); //打开ticket文件流
$ticket = fread($ticket,1023); //获取ticket
$ticketTime = fopen("./cache/ticketTime.txt","r"); //打开ticketTime文件流
$prevTime = intval(fread($ticketTime,1023)); //获取上次缓存时间
$nowTime = time()-$prevTime; //计算时间差
if($nowTime >= 3600){ //超过3600秒，重新获取ticket
do{
$token = $_GET["access_token"];
$url2 = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi",$token);
$res = file_get_contents($url2);
$res = json_decode($res,true);
$ticket = $res['ticket'];
}while(0);
//缓存临时票据
$myfile_ = fopen("./cache/ticket.txt","w")or die("Unable to open file!");
fwrite($myfile_,$ticket);
fclose($myfile_);
//缓存时间
$myfile_Time = fopen("./cache/ticketTime.txt","w")or die("Unable to open file!");
fwrite($myfile_Time);
echo json_encode($res);
}else{
echo '{"ticket":"'.$ticket.'"}';
}
?>
wx_get_signature.php(动态获取签名)
<?php
$timestamp = $_GET['$timestamp'];
$wxnonceStr = $_GET['nonceStr'];
$wxticket = $_GET['ticket'];
//生成sha1签名（将timestamp,noncestr,ticket）
$wxOri = sprintf("jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s",$wxticket,$wxnonceStr,$timestamp,$_GET['url']);
$wxSha1 = sha1($wxOri);
echo $wxSha1;
?>
最后就是html代码：
index.html(页面)
四个掉用
<!--引入jquery库-->
<script src="js/jquery-3.2.1.js"></script>
<!--引入微信js-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<!--引入cookie-->
<script src="js/cookie.js"></script>
<!--引入wxJSJDK库-->
<script src="js/wxJSJDK.js"></script>
测试成功结果是，在电脑控制台会输出：
1.调用微信接口成功，获取当前对象的所有属性，并用一个变量接收：
Object
2.利用cookie获取当前令牌:undefined
cookie中不存在access_token：利用ajax向php后台-（wx_get_token.php）文件发起请求获取动态令牌！
"config", Object
初始化成功！
截至这里JSJDK已经部署完成，接下来就可以愉快的使用微信的JSJDK接口了！！！（祝你调试成功）
