1.添加微信js引用：
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2.Html示例代碼
<div style="margin: 200px 0px 0px 200px;">
<button id="chooseImage" class="btn btn_primary">照相一下</button>
<br />
<button id="uploadImage">上傳相片</button>
<br />
<button id="downloadImage">下載相片</button>
<br />
<button id="scanQRCode">掃一掃</button>
</div>
3.微信接口調用配置-通過config接口注入權限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用）。
wx.config({
debug: true,// 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '{$appId}',// 必填，公眾號的唯一標識
timestamp: '{$timestamp}',// 必填，生成簽名的時間戳
nonceStr: '{$nonceStr}',// 必填，生成簽名的隨機串
signature: '{$signature}',// 必填，簽名
jsApiList: [ // 必填，需要使用的js接口列表
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
]
});
// config信息驗證后會執行ready方法，所有接口調用都必須在config接口獲得結果之后，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
wx.ready(function() {
var images = {
localId: [],
serverId: []
};
4.選擇圖片
document.querySelector('#chooseImage').onclick = function() {
wx.chooseImage({
success: function(res) {
images.localId = res.localIds;
alert('已選擇 ' + res.localIds.length + ' 張圖片');
$.each(images.localId, function(key, val) {
$("#Img").append("<div><img width='150' height='150' src=" + images.localId[key] + " /></div>");
});
}
});
};
5.上傳圖片
document.querySelector('#uploadImage').onclick = function() {
if (images.localId.length == 0) {
alert('請先使用 chooseImage 接口選擇圖片');
return;
}
var i = 0,
length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function(res) {
i++;
//alert('已上傳：' + i + '/' + length);
images.serverId.push(res.serverId);
alert(images.serverId);
if (i < length) {
upload();
}
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
}
upload();
};
6.下載圖片
document.querySelector('#downloadImage').onclick = function() {
if (images.serverId.length === 0) {
alert('請先使用 uploadImage 上傳圖片');
return;
}
var i = 0,
length = images.serverId.length;
images.localId = [];
function download() {
wx.downloadImage({
serverId: images.serverId[i],
success: function(res) {
i++;
alert('已下載：' + i + '/' + length);
images.localId.push(res.localId);
if (i < length) {
download();
}
}
});
}
download();
};
7.掃一掃
document.querySelector('#scanQRCode').onclick = function() {
wx.scanQRCode({
needResult: 1, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
scanType: ["qrCode", "barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
success: function(res) {
var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
alert(result);
}
});
};