微信js-sdk config配置的坑

微信js-sdk config配置的坑

次教程适合刚刚接触微信公众号js-sdk的开发人员，教程给新人一些疑惑解答。

对于刚刚接触微信的js-sdk的人来说，看官方文档可能对这个到底什么作用还是有点迷糊，官方文档都是使用的具体步骤，但是作为看文章的人，转发文章的用户具体流程不清楚。下面针对我刚开始搞这个东西的一些疑惑给刚接触的开发者解答一下。

一个用户打开了一个别的用户发的公众号文章，并且带有缩略图和标题，这是时候用户点开了文章，微信就会对文章里面的js-sdk config 进行验证，确定这篇文章是服务号或者订阅号发的，验证身份。这个时候文章展现，当用户想要转发，点击右上角发送到朋友圈的时候，微信会回调你文章里的js文件，转发到朋友圈的方法上，这个方法是js-sdk 固定的方法，点击转发就成功了，这个就是js-sdk的作用，识别你文章的身份，转发文章回调固定的函数，告知你结果。（在此不得不佩服微信的开发人员，把一个软件，做体验做市场，还能在软件基础上再做开发市场，牛逼啊）

下面上代码：你需要做的东西有一个文章的html页面，在页面导入微信下载的js-sdk的包，

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title><script language="javascript" type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script language="javascript" type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>

<script language="javascript" type="text/javascript" src="__PUBLIC__/js/sha1.js"></script>
<script language="javascript" type="text/javascript" src="__PUBLIC__/js/weixinjsdata.js"></script>

导入有顺序，先js-sdk，再jquery，再sha1用来生成加密的文件，自己写的微信生成验证信息各种函数的js文件

下面是weixinjsdata.js文件，这里感谢一位程序员分享的代码，我照搬他的，针对我的修改了一点

var wxdata={
	wx_account:new Array(4),
	wx_share:new Array(4),
	wx_myuser:new Array("wxxxxxxx3e856e","22851xxxxxxxxxxxxxxxx5121dcd"),
	
	
	
	access_token:"", //凭证
	token_expires_in:"",  //凭证过期时间单位s
	jsapi_ticket:"",  //凭证
	ticket_expires_in:"",    //凭证过期时间

	//获取jsapi_ticket 
	//url:"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+wxdata.access_token+"&type=jsapi",
	get_jsapi_ticket:function(){
		
		$.ajax({
			type:"GET",
			url:"/index.php/get_ticket",
			dataType:"json",
			cache:false,
			async:false,
			success:function(msg){
				 /*  
                { 
                    "errcode":0, 
                    "errmsg":"ok", 
                    "ticket":"e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", 
                    "expires_in":7200 
                }  
            */  
			
			if(msg.errcode==0){
				wxdata.jsapi_ticket=msg.ticket;  //需要缓存，存活时间为ticket_expires_in
				//wxdata.ticket_expires_in=msg.expires_in;
				//wxdata.timestamp=msg.timestam;
				console.log("get jsapi_ticket success");
			}else{
				console.log("get jsapi_ticket fail");
			}
			
			},
			error:function(msg){
				alert("get jsapi_ticket error!!");
			}
			
			
		});
	},
	//数据签名
	create_signature:function(noncestr,ticket,timestamp,url){
		var signature="";
		//这里参数的顺序要按照key值ascii 码升序排序
	var s="jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
	//console.log();
	return hex_sha1(s);
	},
	//自定义创建随机串
	create_noncestr:function(){
		var str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
		var val="";
		for(var i=0;i<16;i++){
			val+=str.substr(Math.round((Math.random()*10)),1);
		}
		return val;
	},
	//自定义创建时间戳
	create_timestamp:function(){
		//return new Date().getSeconds();
		return Date.parse(new Date()).toString().substr(0,10);
		
	}
	
	
}

wxdata.get_jsapi_ticket();
var timestamp=wxdata.create_timestamp();
var noncestr=wxdata.create_noncestr();
var url=window.location.href.split('#').toString();


wxdata.wx_account[0]=wxdata.wx_myuser[0];
wxdata.wx_account[1]=timestamp;
wxdata.wx_account[2]=noncestr;
wxdata.wx_account[3]=wxdata.create_signature(noncestr,wxdata.jsapi_ticket,timestamp,url);
wxdata.wx_share[0]="http://xxxxxxxxxm/Public/images/zhuanshare.png";
wxdata.wx_share[1]="http://wxxxx/index.php";

wxdata.wx_share[2]="";  //share_desc
wxdata.wx_share[3]="";  //share_tilte

这里说一下，上面是定义变量用来保存一些数据，后面html使用，中间是一些函数，因为要实现js-sdk的功能要获得微信的ticket凭证才行，这是条件之一，先获取token，再获取ticket，我写了一个js的ajax，连接服务器的一个方法，先获取token，再通过token获取ticket一个方法搞定，如果你的转发多，怕ticket使用次数问题，可以用数据库存一下，判断秒数，重用，

下面是服务器端代码

//返回token
		public function get_ticket(){
			
			$appid="wXXXXXXXXXXX8f73e856e";
			$secret="2285XXXXXXXXXXXXXXc9512XXXXXX";
			
			$url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$secret;
			
			$ch=curl_init();
			curl_setopt($ch,CURLOPT_URL,$url);
			curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
			curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);
			curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false);
			$dd=curl_exec($ch);
			curl_close($ch);
			
			$access=json_decode($dd,true);
$url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access['access_token']."&type=jsapi";
			$ca=curl_init();
			curl_setopt($ca,CURLOPT_URL,$url);
			curl_setopt($ca,CURLOPT_RETURNTRANSFER,1);
			curl_setopt($ca,CURLOPT_SSL_VERIFYPEER,false);
			curl_setopt($ca,CURLOPT_SSL_VERIFYHOST,false);
			$da=curl_exec($ca);
			curl_close($ca);
			
			$ticket=json_decode($da,true);
			//$ticket['timestam']=time();
			$a->where("category='ticket'")->setField("token",$ticket['ticket']);
			$a->where("category='ticket'")->setField("expires",$atime);
			
		}else{
			$ticket['errcode']=0;
			$ticket['ticket']=$da['token'];
		}
			$this->ajaxReturn($ticket);
			
		}

所有具备上最后的验证，

var $wx_account=wxdata.wx_account,
	$wx_share=wxdata.wx_share;



 wx.config({
	
	 debug:false, //开启调试
	 appId:'wxXXXXXXXXf7XXXXXe',
	 timestamp:$wx_account[1],  //生成签名的时间戳
	 nonceStr:$wx_account[2],
	 signature:$wx_account[3],  //签名
	 jsApiList:[
	 'onMenuShareTimeline',
	  'onMenuShareAppMessage',
	 'onMenuShareQQ',
	 'onMenuShareWeibo'
	 ]  //JS接口列表
 });

本篇文章的重点开发的时候debug:true ,改成true，自己手机微信扫一扫，因为一些现实原因微信浏览器会绝对的缓存网页的文件，js,css，img都会缓存，即使你设置了它依然会缓存。这个大坑，搞得我全网搜为什么不能验证通过，其实已经通过了，但是很多人分享的都没说这个问题，这是很严重的问题，耽误了我一天的时间，所以每次修改文件了都要清微信浏览器的缓存，方法是 https://link.zhihu.com/?target=http%3A//debugx5.qq.com 这个链接复制到一些生成二维码的网站生成二维码，用微信扫一扫，打开，滑到页面下面，清空浏览器的缓存，这个浏览器打开你的页面都是新的，从新下载。不然老是以为没有验证成功。

希望文章对新人有帮助，祝大家开发的时候，遇到奇怪bug，稳住自己的血压，找原因。。

微信js-sdk config配置的坑

猜你喜欢