第一章：微信项目 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&timestamp=%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接口了！！！（祝你调试成功）