目录列出一抹淡淡的忧伤---微信开发基础纯js不可能用纯js，这辈子不会用纯js---微信JSSDK开发与答疑youlife3000——微信支付开发系列问题解答简介WechatJS-SDK是微信公众平台为网页开发者提供的基于微信的网页开发工具包。通过使用微信JS-SDK，Web开发者可以通过微信高效使用手机系统的拍照、选图、语音、定位等能力，同时直接使用微信独有的分享、扫一扫、优惠券和付款。,为微信用户提供更好的网络体验。本文重点介绍最新的JSSDK1.2版本。1.2版本的说明可以参考这里。特别需要注意的是，微信从1.2版本开始对IOS系统WKWebview内核进??行了较大改动，开发者请使用最新版本的JSSDK1.2作为开发源码。否则可能导致IOS部分功能失效。开发前第一步：绑定域名。首先，登录微信公众平台，进入“公众号设置”的“功能设置”，填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看相应接口权限。第二步：导入JS文件在需要调用JS接口的页面导入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...第三步：通过config接口注入权限验证配置wx.config({debug:true,//开启调试模式，所有调用的API的返回值都会在客户端告警，如果想查看传入的参数，可以在PC端打开，参数信息会通过log打出来，只会在PC端打印出来。appId:",//required,公众号的唯一标识timestamp:,//required,生成签名的时间戳nonceStr:",//required,生成签名的随机字符串signature:",//required,signature,seeappendix1jsApiList:[]//required,需要使用的JS接口列表，所有JS接口列表见附录2});代码直接demo//加载微信JSSDKconfigwx.config({debug:false,appId:'APPID',timestamp:time,nonceStr:'NONCESTR',signature:'SIGNATURE',jsApiList:['checkJsApi','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareWeibo','onMenuShareQZone','hideMenuItems','showMenuItems','hideAllNonBaseMenuItem','showAllNonBaseMenuItem','translateVoice','startRecord','stopRecord','onVoiceRecordEnd','playVoice','onVoicePlayEnd','pauseVoice','stopVoice','uploadVoice','downloadVoice','chooseImage','previewImage','uploadImage','downloadImage','getNetworkType','openLocation','getLocation','hideOptionMenu','showOptionMenu','closeWindow','scanQRCode','chooseWXPay','openProductSpecificView','addCard','chooseCard','openCard',]});//JSSDK报错wx.error(函数(res){console.log(location.href.split('#')[0]);});config中涉及的参数我们通过JSSDK官方demo提供数据。该演示已重新打包并发布在这里：classJssdk{private$appId;private$appSecret;publicfunction__construct($appId,$appSecret){$this->appId=$appId;$this->appSecret=$appSecret;}publicfunctiongetSignPackage(){$jsapiTicket=$this->getJsApiTicket();//注意URL必须是动态获取的，不能硬编码。$protocol=(!empty($_SERVER['HTTPS'])&&$_SERVER['HTTPS']!=='off'||$_SERVER['SERVER_PORT']==443)?“https://”：“http://”；$url="$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$时间戳=时间（）；$nonceStr=$this->createNonceStr();//这里参数的顺序要按照key值的ASCII码升序排列$string="jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";$signature=sha1($string);$signPackage=array("appId"=>$this->appId,"nonceStr"=>$nonceStr,"timestamp"=>$timestamp,"url"=>$url,"signature"=>$signature,"rawString"=>$字符串);返回$signPackage;}privatefunctioncreateNonceStr($length=16){$chars="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";$str="";对于($i=0;$i<$length;$i++){$str.=substr($chars,mt_rand(0,strlen($chars)-1),1);}return$str;}privatefunctiongetJsApiTicket(){//jsapi_ticket要全局存储和更新，以下代码以写入文件为例$data=json_decode($this->get_php_file("jsapi_ticket.php"));如果($data->expire_timegetAccessToken();//如果是企业账号，使用下面的URL获取ticket//$url="https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";$url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";$res=json_decode($this->httpGet($url));$ticket=$res->ticket;如果($ticket){$data->expire_time=time()+7000;$data->jsapi_ticket=$ticket;$this->set_php_file("jsapi_ticket.php",json_encode($data));}}else{$ticket=$data->jsapi_ticket;}return$ticket;}privatefunctiongetAccessToken(){//access_token应该全局存储和更新，下面代码以写入文件为例$data=json_decode($this->get_php_file("access_token.php"));if($data->expire_timehttpGet($url));$access_token=$res->access_token;if($access_token){$data->expire_time=time()+7000;$data->access_token=$access_token;$this->set_php_file("access_token.php",json_encode($data));}}else{$access_token=$data-}>access_token;}return$access_token;}privatefunctionhttpGet($url){$curl=curl_init();curl_setopt($curl,CURLOPT_RETURNTRANSFER,true);curl_setopt($curl,CURLOPT_TIMEOUT,500);为了数据传输的安全服务器和微信服务器之间，所有微信接口都是通过https调用的，必须开启ssl安全验证，下面2行代码//如果部署过程中这里代码验证失败，请到http：//curl.haxx.se/ca/cacert.pem下载新的证书证书文件。curl_setopt($curl,CURLOPT_SSL_VERIFYPEER,true);curl_setopt($curl,CURLOPT_SSL_VERIFYHOST,true);curl_setopt($curl,CURLOPT_URL,$url);$res=curl_exec($curl);curl_close($curl);返回$res;}privatefunctionget_php_file($filename){returntrim(substr(file_get_contents($filename),15));}privatefunctionset_php_file($filename,$content){$fp=fopen($filename,"w");fwrite($fp,"".$content);fclose($fp);}}一定要先获取数据再用JSconfig注册，否则微信JSSDK会失效，等你准备好这时候请在网页调试中打开控制台查看正确调用效果：到这里所有的准备工作都完成了。选择图片调用JSSDK的图片接口wx.chooseImage({count:1,success:function(res){//图片选择成功后images.localId=res.localIds;//Android可以直接使用localIds预览图片if(res.localIds.indexOf("wxlocalresource")!=-1){res.localIds=res.localIds.replace("wxlocalresource","wxLocalResource");})};//以下均适配IOS//首先使用浏览界面（适配IOSWKWebviewversion)wx.getLocalImgData({localId:images.localId[i],//图片的localIDsuccess:function(res){varlocalData=res.localData;//localData为图片的base64数据，可以用img标签显示$("#chooseImage").parent().before("");}});直接上传图片递归方法上传多张图片functionupload(){wx.uploadImage({localId:images.localId[i].toString(),isShowProgressTips:1,//默认为1，显示进度提示success:function(res){i++;varmedia_id=res.serverId;images.serverId.push(res.serverId);//上传到服务器的Idif(igetToken();//获取token$url="https://api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;//获取微信“获取临时素材”接口返回的内容（即刚刚上传的图片）$a=file_get_contents($url);//回声$一个;$filename=date('YmdHis').rand(1000,9999).'.jpg';//以读写方式打开一个文件，如果没有则自动创建$resource=fopen($_SERVER["DOCUMENT_ROOT"].'/Uploads/User_img/'.$filename,'w+');//将图片的内容写入新建的文件中fwrite($resource,$a);//关闭资源fclose($resource);echo'/Car/Common/Uploads/User_img/'.$filename;}通过以上方法，我们可以实现用户利用微信自带的上传系统将图片上传到我们自己的服务器。完整代码varimages={localId:[],serverId:[]};choose.onclick=function(){wx.chooseImage({count:1,success:function(res){//选择图片成功后images.localId=res.localIds;if(res.localIds.indexOf("wxlocalresource")!=-1){res.localIds=res.localIds.replace("wxlocalresource","wxLocalResource");}vari=0,length=images.localId.length;functionupload(){//优先使用浏览界面（适配IOSWKWebview版本）wx.getLocalImgData({localId:images.localId[i],//图片的localIDsuccess:function(res){varlocalData=res.localData;//localData是图片的base64数据，可以用img标签显示$("#chooseImage").parent().before("");}});wx.uploadImage({localId:images.localId[i].toString(),isShowProgressTips:1,//默认为1，显示进度提示success:function(res){i++;varmedia_id=res.serverId;images.serverId.push(res.serverId);$.ajax({url:'getmedia.php',data:{'mid':res.serverId.toString()},type:'get',success:function(res){$("input[name='qu_img']").val(res);$("#chooseImage").hide();}});如果（我<长度）{上传（）；}},失败:函数(res){alert(JSON.stringify(res));}});}上传（）；}});}
