微信JS SDK接入的几点注意事项(必看篇)
微信JSSDK接入,主要可以先参考官网说明文档,总结起来有几个步骤:
1.绑定域名:
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
2.引入JS文件:在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js,
备注:支持使用AMD/CMD标准模块加载方法加载,这里补充引入jquery.cookie.js,sha1.js,后面需要用
3.获取access_token,再获取jsapi_ticket,由于不能频繁调用获取jsapi_ticket的函数,可以保存一份全局的jsapi_ticket,存放在cookie中,如果过时了再重新获取;另外,这两个获取操作建议放到服务端确保安全性;
4.拼接noncestr(随机字符串),有效的jsapi_ticket,timestamp(时间戳),url(当前网页的URL,不包含#及其后面部分),对所有待签名参数按照字段名的ASCII码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。
5.sha1加密生成签名signature;
6.配置wx.config,wx.ready,wx.error等方法,其中wx.ready是配置成功之后的回调,建议其他方法如微信分享wx.onMenuShareTimeline,wx.onMenuShareAppMessage之类都放到ready里面,以达到同步执行的目的;
服务端接口:
//access_token是公众号的全局唯一票据 publicfunctiongetTokenForJS(){ $appid="不告诉你"; $secret="不告诉你"; $url="https://api.weixin.qq.com/cgi-bin/token?appid=".$appid."&secret=".$secret."&grant_type=client_credential"; $result=http_request($url); echo$result;exit; } //获取ticket publicfunctiongetTicket(){ $access_token=I("get.access_token"); $url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi"; //$this->ajaxJSON($url); $result=http_request($url); echo$result;exit; } functionhttp_request($url,$data=null) { $curl=curl_init(); curl_setopt($curl,CURLOPT_URL,$url); curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,false); curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,false); if(!empty($data)){ curl_setopt($curl,CURLOPT_POST,1); curl_setopt($curl,CURLOPT_POSTFIELDS,$data); } curl_setopt($curl,CURLOPT_RETURNTRANSFER,1); $info=curl_exec($curl); curl_close($curl); return$info; }
前端js:
functionsetWechatJS(){ //vartemp="jsapi_ticket=kgt8ON7yVITDhtdwci0qeRukvrGB1QLAfzCcybh4a_VMg6rgB4OhdsD4O2ruRI0OUPG5VfpKlYYWXcyEeChbBw&noncestr=4df32E3jY6YneEPNfGfs×tamp=1498120656&url=http://m.galaxy-immi.com/country/"; //alert(hex_sha1(temp));returnfalse; //生成随机字符串 varrandomString=function(len){ len=len||32; var$chars='ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';/****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/ varmaxPos=$chars.length; varpwd=''; for(vari=0;i200&&height>200){//去页面中第一张宽高都大于200的图片 imgUrl=Src; //console.log(Src); returnfalse; }else{//未在页面中取到合适的图片就选取银河的logo图 imgUrl=MyPic+"/H5/img/icon.png"; } }); showShareSetting(); //分享到朋友圈 wx.onMenuShareTimeline({ title:title,//分享标题 link:url,//分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl:imgUrl,//分享图标 success:function(){ //用户确认分享后执行的回调函数 showShareSetting(); }, cancel:function(){ //用户取消分享后执行的回调函数 } }); //分享给朋友 wx.onMenuShareAppMessage({ title:title,//分享标题 desc:description,//分享描述 link:url,//分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl:imgUrl,//分享图标 type:'',//分享类型,music、video或link,不填默认为link dataUrl:'',//如果type是music或video,则要提供数据链接,默认为空 success:function(){ //用户确认分享后执行的回调函数 showShareSetting(); }, cancel:function(){ //用户取消分享后执行的回调函数 } }); //分享到QQ wx.onMenuShareQQ({ title:title,//分享标题 desc:description,//分享描述 link:url,//分享链接 imgUrl:imgUrl,//分享图标 success:function(){ //用户确认分享后执行的回调函数 showShareSetting(); }, cancel:function(){ //用户取消分享后执行的回调函数 } }); //分享到QQ空间 wx.onMenuShareQZone({ title:title,//分享标题 desc:description,//分享描述 link:url,//分享链接 imgUrl:imgUrl,//分享图标 success:function(){ //用户确认分享后执行的回调函数 showShareSetting(); }, cancel:function(){ //用户取消分享后执行的回调函数 } }); }); wx.error(function(res){ console.log("微信JSSDK配置错误!"); //config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 }); }; //待分享生成的标题、链接、缩略图 vartitle,url,imgUrl,description; //本地cookie查找不到缓存再去请求网络 if(typeof(jsapi_ticket)=='undefined'||jsapi_ticket==''){ //alert('aaa='+jsapi_ticket); //以下步骤分别获取全局access_token、jsapi_ticket、signature $.get(MyUrl+"getTokenForJS",function(data){ varaccess_token=data['access_token']; //获取全局access_token,以及7200秒之后刷新的问题 //先出cookie中取,如果没有, $.get(MyUrl+"getTicket?access_token="+access_token,function(data){ jsapi_ticket=data['ticket']; //保存当前jsapi_ticket vardate=newDate(); date.setTime(date.getTime()+7200*1000);//只能这么写,10表示10秒钟 //?替换成分钟数如果为60分钟则为60*60*1000 $.cookie('jsapi_ticket',jsapi_ticket,{expires:date,path:'/'});//有效期7200秒 console.log("jsapi_ticket="+jsapi_ticket); //alert('ccc='+jsapi_ticket); wxConfig(); },'json'); },'json'); }else{ //alert('bbb='+jsapi_ticket); wxConfig(); } }
以上这篇微信JSSDK接入的几点注意事项(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。