概述

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基於微信內的網頁開發工具包。

通過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信使用者提供更優質的網頁體驗。

這裡主要記錄呼叫 微信掃一掃、拍照或從手機相簿中選圖、上傳圖片的介面，其他介面呼叫方法類似，只是傳遞引數不同。

步驟一：繫結域名

先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。

備註：登入後可在“開發者中心”檢視對應的介面許可權。

步驟二：引入JS檔案

備註：支援使用 AMD/CMD 標準模組載入方法載入

步驟三：通過config介面注入許可權驗證配置

所有需要使用JS-SDK的頁面必須先注入如下的配置資訊，否則將無法呼叫介面（同一個url僅需呼叫一次，對於變化url的SPA的web app可在每次url變化時進行呼叫）。

wx.config({

    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。

    appId: '', // 必填，公眾號的唯一標識

    timestamp: , // 必填，生成簽名的時間戳

    nonceStr: ''
 
, // 必填，生成簽名的隨機串

    signature: '',// 必填，簽名，見附錄1

    jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2

});

上面的引數需要後臺寫一個介面獲取:，如

var url = window.location.href;
$.ajax({
    url: url_bjtest + "/wechat/get_signature",
    type: "post",
    data: { "url" : url },
    dataType: "json",
    success: function (data
 
) {
        wx.config({
            appId: data.data.appId,
            timestamp: data.data.timestamp,
            nonceStr: data.data.nonceStr,
            signature: data.data.signature,
            jsApiList: ['scanQRCode','chooseImage','uploadImage']
        });
    }
});

步驟四：處理驗證結果

如果呼叫微信介面的程式碼放在事件處理函式中，則可以不用進行此步驟，否則必須放在如下ready方法內。

wx.ready(function(){
    // config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。

});
wx.error(function(res){
    // config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。

});

步驟五：呼叫介面

所有介面通過wx物件(也可使用jWeixin物件)來呼叫，引數是一個物件，除了每個介面本身需要傳的引數之外，還有以下通用引數：

1.success：介面呼叫成功時執行的回撥函式。

2.fail：介面呼叫失敗時執行的回撥函式。

3.complete：介面呼叫完成時執行的回撥函式，無論成功或失敗都會執行。

4.cancel：使用者點選取消時的回撥函式，僅部分有使用者取消操作的api才會用到。

5.trigger: 監聽Menu中的按鈕點選時觸發的方法，該方法僅支援Menu中的相關介面。

注意：所有介面呼叫都必須在config介面獲得結果之後，放在wx.ready(function(){…})函式中呼叫來確保正確執行；

或者放在DOM元素的事件處理函式中呼叫來確保正確執行。

1、基礎介面

判斷當前客戶端版本是否支援指定JS介面

wx.checkJsApi({

    jsApiList: ['chooseImage'], // 需要檢測的JS介面列表

    success: function(res) {

        // 以鍵值對的形式返回，可用的api值true，不可用為false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

    }

});

2、掃一掃介面

wx.ready(function(){
    wx.scanQRCode({
        needResult: 1, // 預設為0，掃描結果由微信處理，1則直接返回掃描結果，  
        scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，預設二者都有  
        success: function (res) {
            var result = res.resultStr; // 當needResult 設定為 1 時，掃碼返回的結果
            //（result 就是一個帶有sid的網址）
        }
    })
});

3、呼叫 拍照或從手機相簿中選圖介面

這裡獲取到的是使用者選擇的圖片的 本地地址列表（res.localIds）

<button type="button" id="addImg">上傳圖片</button>
var imgFiles = [];
$("#addImg").on("click",function(){
    wx.chooseImage({
        success: function(res) {
            //res.localIds為返回的選定照片的本地ID列表（即儲存本地圖片路徑字串的陣列）
            imgFiles = imgFiles.concat(res.localIds);
        }
    });
});

4、呼叫 上傳圖片 介面

這裡獲取到的是使用者選擇圖片後 上傳到微信伺服器的伺服器端地址（res.serverId）

var serverIds = [];   //要傳到伺服器的圖片列表serverId
var i = 0, length = imgFiles.length;
function upload() {
    wx.uploadImage({
        localId: imgFiles[i],
        isShowProgressTips: 0,
        success: function(res) {
            i++;
            //alert('已上傳：' + i + '/' + length);
            serverIds.push(res.serverId);
            if (i < length) {
                upload();
            }
        },
        fail: function(res) {
            alert(JSON.stringify(res));
        }
    });
}
upload();   //通過imgFiles本地Id，上傳圖片到微信伺服器，並獲取serverId，便於傳給後臺