微信公众号开发之JS-SDK

一、微信公众号后台的设置

1.设置IP白名单

作用：为了提高公众平台开发者接口调用的安全性，避免一旦开发者ID和密码泄露后给帐号造成损失。我们对调用“获取access_token”接口（下文有详细介绍）增加IP白名单校验：只有将IP地址设置为公众号的IP白名单，才能成功调用该接口。
流程：开发--------基本配置--------公众号开发信息--------IP白名单

2.设置开发者密码（AppSecret）

作用：后期获取access_token（下文有介绍）需要作为参数
流程：开发--------基本配置--------公众号开发信息--------开发者密码（AppSecret）
注意点：平台查看不了，如果忘记就只能重新设置，所以最好要自己保存起来。

二、后端的书写

1.概念：

　　（1）jsapi_ticket：是公众号用于调用微信JS接口的临时票据。要通过access_token来获取。有效期7200秒，调用次数有限，最好缓存在服务器。

　　（2）access_token：是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。（我很重要，除非你不需要使用微信接口~~）长度：至少512个字符；有效期：7200秒（注意点：需要定时刷新，重复获取将导致上次获取的access_token失效。为保证平滑过渡，5分钟内，新旧access_token都可以使用）

　　（3）signature：JS-SDK权限验证的签名，前端调取微信接口需使用。

2.思路：

　　先获取access_token，再获取jsapi_ticket，再生成signature

3.过程：

　　（1）获取access_token：

　　　　　　https请求方式: GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

　　　　　参数： appid 和 secret

function get_access_token(){
    $url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$this->appId.'&secret='.$this->appSecret.'';
    $result = json_decode(file_get_contents($url),true);
    if(!isset($result['access_token'])){
        return '';
    }
    return $result['access_token'];
}

　　（2）获取jsapi_ticket：

　　　　　　https请求方式: GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

　　　　　参数： access_token

function get_jsapi_ticket(){
    $this->access_token = $this->get_access_token();
    $url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$this->access_token.'&type=jsapi';
    $result = json_decode(file_get_contents($url),true);
    if(!isset($result['ticket'])){
        return '';
    }
    return $result['ticket'];
}

　　（3）先排序，后签名：

　　　　　　ASCII 码排序：jsapi_ticket=JSAPI_TICKET&noncestr=NONCESTR&timestamp=TIMESTAMP&url=URL

　　　　　　签名：sha1(String)

　　　　　　参数：jsapi_ticket、noncestr（随机字符串）、timestamp（时间戳）和 url（需要调用接口的前端页面的路径）

function get_signature($ticket,$noncestr,$timestamp,$url){
    $url = explode('#',$url);
    $str = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'&timestamp='.$timestamp.'&url='.$url[0];
    return sha1($str);
}

　　（4）要缓存access_token，定期进行刷新

三、前端的书写

1.引入JS文件

　　在需要调用JS接口的地方添加：<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2.注入配置信息

　　通过config接口注入权限验证配置

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

前几个参数由后端传过来，最后一个的配置查 JS接口列表

3.通过ready接口处理成功验证和自定义接口

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })<br>........<br>
}); 