目錄 List

1. 那一抹淡淡的憂傷—–微信開發(fā)基礎(chǔ)
2. 用純js是不可能用純js了，這輩子都不用純js了 —– 微信JSSDK開發(fā)以及問題解答
3. 要你命3000 —— 微信支付開發(fā)系列問題解決

導(dǎo)語

微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。
通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。
本文重點(diǎn)講最新的JSSDK版本1.2，關(guān)于1.2版本的說明可以參考這里
尤其注意從1.2版本開始微信針對IOS系統(tǒng)WKWebview內(nèi)核做出了重大改變，所以廣大開發(fā)者當(dāng)以最新JSSDK1.2版本為開發(fā)源碼，否則可能造成IOS部分功能無效

---

開發(fā)前準(zhǔn)備

步驟一：綁定域名

先登錄微信公眾平臺進(jìn)入“公眾號設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。

---

步驟二：引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

---

步驟三：通過config接口注入權(quán)限驗(yàn)證配置

wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: ”, // 必填，公眾號的唯一標(biāo)識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: ”, // 必填，生成簽名的隨機(jī)串
signature: ”,// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2 });

直接用代碼演示

//加載微信JSSDK config wx.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(function(res){console.log(location.href.split('#')[0]);});

config里面所涉及到的參數(shù)我們通過JSSDK官方demo來提供數(shù)據(jù)，我對官方的demo進(jìn)行了再次封裝，直接在這里貼出來：

class Jssdk{private $appId;private $appSecret;public function __construct($appId, $appSecret) {$this->appId = $appId;$this->appSecret = $appSecret;}public function getSignPackage() {$jsapiTicket = $this->getJsApiTicket();// 注意 URL 一定要動態(tài)獲取，不能 hardcode.$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$timestamp = time();$nonceStr = $this->createNonceStr();// 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";$signature = sha1($string);$signPackage = array("appId" => $this->appId,"nonceStr" => $nonceStr,"timestamp" => $timestamp,"url" => $url,"signature" => $signature,"rawString" => $string);return $signPackage;}private function createNonceStr($length = 16) {$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";$str = "";for ($i = 0; $i < $length; $i++) {$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);}return $str;}private function getJsApiTicket() {// jsapi_ticket 應(yīng)該全局存儲與更新，以下代碼以寫入到文件中做示例$data = json_decode($this->get_php_file("jsapi_ticket.php"));if ($data->expire_time < time()) {$accessToken = $this->getAccessToken();// 如果是企業(yè)號用以下 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;if ($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;}private function getAccessToken() {// access_token 應(yīng)該全局存儲與更新，以下代碼以寫入到文件中做示例$data = json_decode($this->get_php_file("access_token.php"));if ($data->expire_time < time()) {// 如果是企業(yè)號用以下URL獲取access_token// $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";$res = json_decode($this->httpGet($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;}private function httpGet($url) {$curl = curl_init();curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);curl_setopt($curl, CURLOPT_TIMEOUT, 500);// 為保證第三方服務(wù)器與微信服務(wù)器之間數(shù)據(jù)傳輸?shù)陌踩?#xff0c;所有微信接口采用https方式調(diào)用，必須使用下面2行代碼打開ssl安全校驗(yàn)。// 如果在部署過程中代碼在此處驗(yàn)證失敗，請到 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);return $res;}private function get_php_file($filename) {return trim(substr(file_get_contents($filename), 15));}private function set_php_file($filename, $content) {$fp = fopen($filename, "w");fwrite($fp, "<?php exit();?>" . $content);fclose($fp);} }

務(wù)必先拿到數(shù)據(jù)后注冊給JSconfig，否則微信JSSDK是無效的

等你一切準(zhǔn)備得當(dāng)?shù)臅r候請打開網(wǎng)頁調(diào)試?yán)锏腸onsole來查看效果

正確調(diào)用的情況：

到這里所有的準(zhǔn)備工作就完成了

---

圖片選擇

調(diào)用JSSDK的圖片接口

wx.chooseImage({count: 1,success: function (res) {//選擇圖片成功后images.localId = res.localIds;//安卓可以直接使用localIds 預(yù)覽圖片if(res.localIds.indexOf("wxlocalresource") != -1){res.localIds = res.localIds.replace("wxlocalresource", "wxLocalResource");})}; //以下的適配IOS//先使用閱覽接口（適配IOSWKWebview版本）wx.getLocalImgData({localId: images.localId[i], // 圖片的localIDsuccess: function (res) {var localData = res.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示$("#chooseImage").parent().before("<li class='upload_action'><img src='"+localData+"'/></li>");}});

---

圖片上傳

直接采用遞歸方法來上傳多張圖片

function upload() {wx.uploadImage({localId: images.localId[i].toString(),isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示success: function (res) {i++;var media_id = res.serverId;images.serverId.push(res.serverId);//上傳到了服務(wù)器的IDif (i < length) {upload();}},fail: function (res) {alert(JSON.stringify(res));}});}

---

將上傳到服務(wù)器的圖片下載到本地項(xiàng)目

public function getmedia(){$media_id = get.sevrid;//前端返回的上傳后的媒體id$weixin = new Weixinpay(); //實(shí)例化微信類$access_token = $weixin->getToken(); //獲取token$url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;//獲取微信“獲取臨時素材”接口返回來的內(nèi)容（即剛上傳的圖片）$a = file_get_contents($url);//echo $a;$filename = date('YmdHis').rand(1000,9999).'.jpg';//以讀寫方式打開一個文件，若沒有，則自動創(chuàng)建$resource = fopen($_SERVER["DOCUMENT_ROOT"].'/Uploads/User_img/'.$filename, 'w+');//將圖片內(nèi)容寫入上述新建的文件fwrite($resource, $a);//關(guān)閉資源fclose($resource);echo '/Car/Common/Uploads/User_img/'.$filename;}

通過以上方法我們能達(dá)到 用戶用微信自帶的上傳圖片系統(tǒng)上傳到我們自己服務(wù)器上

---

完整代碼

var images = {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");}var i = 0, length = images.localId.length;function upload() {//先使用閱覽接口（適配IOSWKWebview版本）wx.getLocalImgData({localId: images.localId[i], // 圖片的localIDsuccess: function (res) {var localData = res.localData; // localData是圖片的base64數(shù)據(jù)，可以用img標(biāo)簽顯示$("#chooseImage").parent().before("<li class='upload_action'><img src='"+localData+"'/></li>");}});wx.uploadImage({localId: images.localId[i].toString(),isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示success: function (res) {i++;var media_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();}});if (i < length) {upload();}},fail: function (res) {alert(JSON.stringify(res));}});}upload();}});}

---

演示

討論和詢問可以加QQ

1577452412

總結(jié)

以上是生活随笔為你收集整理的【坑爹微信】微信JSSDK图片上传问题和解决的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。