微信公众号开发之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 () {
      // 设置成功
    }
  })
........

}); 

　这里调用的各种接口，需要在上面的配置信息中的　jsApiList  进行配置，并不是所有的公众号都能调用所有的接口的。比如我现在使用的公众号是个人公众号，很多接口都没有权限，分享什么的都不行。

 

四、源码

点击下载

 

五、参考资料

　　1.微信开放文档