jQuery可以幫助我們非常方便地調用微信接口,下面就來介紹一下。
首先,我們需要引入jQuery庫和微信JS-SDK:
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
然后,在頁面加載完成的事件中初始化微信JS-SDK,并配置好相關參數:
$(function() { $.ajax({ url: 'http://example.com/get_signature.php', type: 'GET', dataType: 'json', data: {url: window.location.href}, success: function(data) { wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: [ 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage' ] }); }, error: function(xhr, status, error) { console.error(error); } }); });
在上面的代碼中,我們先通過Ajax請求從后臺獲取微信JS-SDK所需的參數(包括appId、timestamp、nonceStr和signature),然后配置好其他參數(包括debug模式、需要調用的JS接口列表等),最后初始化微信JS-SDK。
接下來,就可以響應相應的微信JS-SDK事件進行相應的操作了,例如選擇圖片并上傳:
$('#chooseImage').click(function() { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function(res) { var localId = res.localIds[0]; wx.uploadImage({ localId: localId, isShowProgressTips: 1, success: function(res) { var serverId = res.serverId; // 傳給后臺進行存儲等后續操作 }, fail: function(res) { console.error(JSON.stringify(res)); } }); }, fail: function(res) { console.error(JSON.stringify(res)); } }); });
在上面的代碼中,我們先通過調用wx.chooseImage從相冊或相機選擇圖片,然后調用wx.uploadImage將圖片上傳到服務器(當然這里省略了服務器代碼)。
除了上面介紹的以外,微信JS-SDK還有很多其他的功能,例如獲取地理位置、分享等,有興趣的可以去官網了解。