微平臺開發之（JS-SDK開發影象介面例項）
本文並非是對微信JS-SDK說明文件的複製，而是通過一個簡單的例子來更深入的瞭解使用微信JS-SDK，具體文件請參考官方說明文件《微信JS-SDK說明文件》。微信公眾平臺面向開發者開放微信內網頁開發工具包（微信JS-SDK），通過微信JS-SDK提供的11類介面集，開發者不僅能夠在網頁上使用微信本身的拍照、選圖、語音、位置等基本能力，還可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。微信JS-SDK提供的11類介面（分享介面、影象介面、音訊介面、智慧介面、裝置資訊、介面操作、地理位置、微信掃一掃、微信小店、微信卡券、微信支付）在使用方式上完全相同，唯一需要注意的是，這11類介面並不是都開放的，有些介面非認證使用者是沒有許可權的，比如分享介面，小店介面、卡券介面、支付介面則必須通過微信認證後才能使用。具體許可權問題可參考你的
開放必須項
- 開發者ID (應用ID和應用密匙)
- 在公眾號（服務號）設定——功能設定（JS介面安全域名）中填寫已備案的域名
- 伺服器環境
- 簡單的後臺知識，如PHP
本文將通過PHP（只會PHP）來演示影象介面（其他介面使用方式相似）
首先在微信開發者平臺下載它的示例程式碼，連結中包含php、java、nodejs以及python的示例程式碼供第三方參考，這裡使用php包。我把php資料夾重新命名為weixin放在網站根目錄下，如圖：
這裡我們只修改sample.php.程式碼如下：
<?php
//設定報錯級別，忽略警告，設定字元
error_reporting(E_ALL || ~E_NOTICE);
header("Content-type:text/html; charset=utf-8");
require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang 然後將weixin目錄上傳到你的伺服器上，該伺服器域名必須和你在微信設定中的域名一致。我上傳到了根目錄，通過firefox提供的頁面二維碼功能，在微信上掃一掃即可測試。截圖如下：
圖1-4分別為一進去（因為開啟了debug），所以會顯示你成功呼叫介面；圖二表示點選了按鈕後，將彈出微信拍照或者從照片中選擇；圖三是我點選了從手機相簿中選擇後調出你的手機相簿列表；圖四是我選擇了其中某一張照片，點選完成後返回的該照片資訊（圖片的本地ID）
接著，來測試一下上傳介面，修改HTML程式碼如下：
<button id="weixin" style="display: block;margin: 2em auto">微信介面測試</button>
<button id="upload" style="display: block;margin: 2em auto">上傳介面測試</button>
<button id="getServices" style="display: block;margin: 2em auto">獲取已上傳的圖片</button>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: true, //除錯階段建議開啟
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
/*
* 所有要呼叫的 API 都要加到這個列表中
* 這裡以影象介面為例
*/
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"
]
});
var btn = document.getElementById('weixin');
//定義images用來儲存選擇的本地圖片ID，和上傳後的伺服器圖片ID
var images = {
localId: [],
serverId: []
};
wx.ready(function () {
// 在這裡呼叫 API
btn.onclick = function(){
wx.chooseImage ({
success : function(res){
images.localId = res.localIds; //儲存到images
// 返回選定照片的本地ID列表，localId可以作為img標籤的src屬性顯示圖片
}
});
}
document.getElementById('upload').onclick = function(){
var i = 0, len = images.localId.length;
function wxUpload(){
wx.uploadImage({
localId: images.localId[i], // 需要上傳的圖片的本地ID，由chooseImage介面獲得
isShowProgressTips: 1, // 預設為1，顯示進度提示
success: function (res) {
i++;
//將上傳成功後的serverId儲存到serverid
images.serverId.push(res.serverId);
if(i < len){
wxUpload();
}
}
});
}
wxUpload();
}
document.getElementById('getServices').onclick = function(){
alert(images.serverId);
}
});
</script>重新上傳到伺服器，重新整理Firefox，生成新二維碼，微信掃描，截圖如下
圖1是修改後的頁面；圖2是點選上傳按鈕後的loading提示（isShowProgressTips: 1, // 預設為1，顯示進度提示）；圖3是上傳成功後返回的該圖片的serverId；圖4是點選獲取已上傳的圖片按鈕後返回的已上傳的圖片的資訊；上傳圖片有效期3天，可用微信多媒體介面下載圖片到自己的伺服器，此處獲得的 serverId 即 media_id
通過以上兩個簡單的例子，基本可以掌握微信JS-SDK的使用方法。11個介面使用方式基本相同，你可以一一嘗試。官方的說明是：
通過ready介面處理成功驗證
通過error介面處理失敗驗證
所有介面通過wx物件(也可使用jWeixin物件)來呼叫，引數是一個物件，除了每個介面本身需要傳的引數之外，還有以下通用引數：
- success：介面呼叫成功時執行的回撥函式。
- fail：介面呼叫失敗時執行的回撥函式。
- complete：介面呼叫完成時執行的回撥函式，無論成功或失敗都會執行。
- cancel：使用者點選取消時的回撥函式，僅部分有使用者取消操作的api才會用到。
- trigger: 監聽Menu中的按鈕點選時觸發的方法，該方法僅支援Menu中的相關介面。
具體可參考官方API。
經過測試需要修改httpGet函式為：
private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}