微信：JSSDK開發
阿新 • • 發佈：2019-01-22
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>微信JS-SDK Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> <link rel="stylesheet" href="http://demo.open.weixin.qq.com/jssdk/css/style.css?ts=1420774989"> </head> <body> <div class="wxapi_container"> <div class="wxapi_index_container"> <ul class="label_box lbox_close wxapi_index_list"> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-basic">基礎介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-share">分享介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-image">影象介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-voice">音訊介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-smart">智慧介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-device">裝置資訊介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-location">地理位置介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-webview">介面操作介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-scan">微信掃一掃介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-shopping">微信小店介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-card">微信卡券介面</a></li> <li class="label_item wxapi_index_item"><a class="label_inner" href="#menu-pay">微信支付介面</a></li> </ul> </div> <div class="lbox_close wxapi_form"> <h3 id="menu-basic">基礎介面</h3> 判斷當前客戶端是否支援指定JS介面 <button class="btn btn_primary" id="checkJsApi">checkJsApi</button> <h3 id="menu-share">分享介面</h3> 獲取“分享到朋友圈”按鈕點選狀態及自定義分享內容介面 <button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button> 獲取“分享給朋友”按鈕點選狀態及自定義分享內容介面 <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button> 獲取“分享到QQ”按鈕點選狀態及自定義分享內容介面 <button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button> 獲取“分享到騰訊微博”按鈕點選狀態及自定義分享內容介面 <button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button> <h3 id="menu-image">影象介面</h3> 拍照或從手機相簿中選圖介面 <button class="btn btn_primary" id="chooseImage">chooseImage</button> 預覽圖片介面 <button class="btn btn_primary" id="previewImage">previewImage</button> 上傳圖片介面 <button class="btn btn_primary" id="uploadImage">uploadImage</button> 下載圖片介面 <button class="btn btn_primary" id="downloadImage">downloadImage</button> <h3 id="menu-voice">音訊介面</h3> 開始錄音介面 <button class="btn btn_primary" id="startRecord">startRecord</button> 停止錄音介面 <button class="btn btn_primary" id="stopRecord">stopRecord</button> 播放語音介面 <button class="btn btn_primary" id="playVoice">playVoice</button> 暫停播放介面 <button class="btn btn_primary" id="pauseVoice">pauseVoice</button> 停止播放介面 <button class="btn btn_primary" id="stopVoice">stopVoice</button> 上傳語音介面 <button class="btn btn_primary" id="uploadVoice">uploadVoice</button> 下載語音介面 <button class="btn btn_primary" id="downloadVoice">downloadVoice</button> <h3 id="menu-smart">智慧介面</h3> 識別音訊並返回識別結果介面 <button class="btn btn_primary" id="translateVoice">translateVoice</button> <h3 id="menu-device">裝置資訊介面</h3> 獲取網路狀態介面 <button class="btn btn_primary" id="getNetworkType">getNetworkType</button> <h3 id="menu-location">地理位置介面</h3> 使用微信內建地圖檢視位置介面 <button class="btn btn_primary" id="openLocation">openLocation</button> 獲取地理位置介面 <button class="btn btn_primary" id="getLocation">getLocation</button> <h3 id="menu-webview">介面操作介面</h3> 隱藏右上角選單介面 <button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button> 顯示右上角選單介面 <button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button> 關閉當前網頁視窗介面 <button class="btn btn_primary" id="closeWindow">closeWindow</button> 批量隱藏功能按鈕介面 <button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button> 批量顯示功能按鈕介面 <button class="btn btn_primary" id="showMenuItems">showMenuItems</button> 隱藏所有非基礎按鈕介面 <button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button> 顯示所有功能按鈕介面 <button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button> <h3 id="menu-scan">微信掃一掃</h3> 調起微信掃一掃介面 <button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信處理結果)</button> <button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回結果)</button> <h3 id="menu-shopping">微信小店介面</h3> 跳轉微信商品頁介面 <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button> <h3 id="menu-card">微信卡券介面</h3> 批量新增卡券介面 <button class="btn btn_primary" id="addCard">addCard</button> 調起適用於門店的卡券列表並獲取使用者選擇列表 <button class="btn btn_primary" id="chooseCard">chooseCard</button> 檢視微信卡包中的卡券介面 <button class="btn btn_primary" id="openCard">openCard</button> <h3 id="menu-pay">微信支付介面</h3> 發起一個微信支付請求 <button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button> </div> </div> </body> <!--步驟二：引入JS檔案 --> <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //步驟三：通過config介面注入許可權驗證配置 wx.config({ debug: false, appId: '<?php echo $signPackage["appId"];?>', timestamp: <?php echo $signPackage["timestamp"];?>, nonceStr: '<?php echo $signPackage["nonceStr"];?>', signature: '<?php echo $signPackage["signature"];?>', jsApiList: [ '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' ] }); </script> <script> //步驟四：通過ready介面處理成功驗證 wx.ready(function () { // 1 判斷當前版本是否支援指定 JS 介面，支援批量判斷 document.querySelector('#checkJsApi').onclick = function () { wx.checkJsApi({ jsApiList: [ 'getNetworkType', 'previewImage' ], success: function (res) { alert(JSON.stringify(res)); } }); }; // 2. 分享介面 // 2.1 監聽“分享給朋友”，按鈕點選、自定義分享內容及分享結果介面 document.querySelector('#onMenuShareAppMessage').onclick = function () { wx.onMenuShareAppMessage({ title: '<a href="http://www.it165.net/news/nhlw/" target="_blank" class="keylink">網際網路</a>之子', desc: '在長大的過程中，我才慢慢發現，我身邊的所有事，別人跟我說的所有事，那些所謂本來如此，註定如此的事，它們其實沒有非得如此，事情是可以改變的。更重要的是，有些事既然錯了，那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg', trigger: function (res) { // 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回 alert('使用者點擊發送給朋友'); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已註冊獲取“傳送給朋友”狀態事件'); }; // 2.2 監聽“分享到朋友圈”按鈕點選、自定義分享內容及分享結果介面 document.querySelector('#onMenuShareTimeline').onclick = function () { wx.onMenuShareTimeline({ title: '<a href="http://www.it165.net/news/nhlw/" target="_blank" class="keylink">網際網路</a>之子', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://demo.open.weixin.<a href="http://www.it165.net/qq/" target="_blank" class="keylink">qq</a>.com/jssdk/images/p2166127561.jpg', trigger: function (res) { // 不要嘗試在trigger中使用ajax非同步請求修改本次分享的內容，因為客戶端分享操作是一個同步操作，這時候使用ajax的回包會還沒有返回 alert('使用者點選分享到朋友圈'); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已註冊獲取“分享到朋友圈”狀態事件'); }; // 2.3 監聽“分享到QQ”按鈕點選、自定義分享內容及分享結果介面 document.querySelector('#onMenuShareQQ').onclick = function () { wx.onMenuShareQQ({ title: '網際網路之子', desc: '在長大的過程中，我才慢慢發現，我身邊的所有事，別人跟我說的所有事，那些所謂本來如此，註定如此的事，它們其實沒有非得如此，事情是可以改變的。更重要的是，有些事既然錯了，那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { alert('使用者點選分享到QQ'); }, complete: function (res) { alert(JSON.stringify(res)); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已註冊獲取“分享到 QQ”狀態事件'); }; // 2.4 監聽“分享到微博”按鈕點選、自定義分享內容及分享結果介面 document.querySelector('#onMenuShareWeibo').onclick = function () { wx.onMenuShareWeibo({ title: '網際網路之子', desc: '在長大的過程中，我才慢慢發現，我身邊的所有事，別人跟我說的所有事，那些所謂本來如此，註定如此的事，它們其實沒有非得如此，事情是可以改變的。更重要的是，有些事既然錯了，那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { alert('使用者點選分享到微博'); }, complete: function (res) { alert(JSON.stringify(res)); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已註冊獲取“分享到微博”狀態事件'); }; // 3 智慧介面 var voice = { localId: '', serverId: '' }; // 3.1 識別音訊並返回識別結果 document.querySelector('#translateVoice').onclick = function () { if (voice.localId == '') { alert('請先使用 startRecord 介面錄製一段聲音'); return; } wx.translateVoice({ localId: voice.localId, complete: function (res) { if (res.hasOwnProperty('translateResult')) { alert('識別結果：' + res.translateResult); } else { alert('無法識別'); } } }); }; // 4 音訊介面 // 4.2 開始錄音 document.querySelector('#startRecord').onclick = function () { wx.startRecord({ cancel: function () { alert('使用者拒絕授權錄音'); } }); }; // 4.3 停止錄音 document.querySelector('#stopRecord').onclick = function () { wx.stopRecord({ success: function (res) { voice.localId = res.localId; }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 4.4 監聽錄音自動停止 wx.onVoiceRecordEnd({ complete: function (res) { voice.localId = res.localId; alert('錄音時間已超過一分鐘'); } }); // 4.5 播放音訊 document.querySelector('#playVoice').onclick = function () { if (voice.localId == '') { alert('請先使用 startRecord 介面錄製一段聲音'); return; } wx.playVoice({ localId: voice.localId }); }; // 4.6 暫停播放音訊 document.querySelector('#pauseVoice').onclick = function () { wx.pauseVoice({ localId: voice.localId }); }; // 4.7 停止播放音訊 document.querySelector('#stopVoice').onclick = function () { wx.stopVoice({ localId: voice.localId }); }; // 4.8 監聽錄音播放停止 wx.onVoicePlayEnd({ complete: function (res) { alert('錄音（' + res.localId + '）播放結束'); } }); // 4.8 上傳語音 document.querySelector('#uploadVoice').onclick = function () { if (voice.localId == '') { alert('請先使用 startRecord 介面錄製一段聲音'); return; } wx.uploadVoice({ localId: voice.localId, success: function (res) { alert('上傳語音成功，serverId 為' + res.serverId); voice.serverId = res.serverId; } }); }; // 4.9 下載語音 document.querySelector('#downloadVoice').onclick = function () { if (voice.serverId == '') { alert('請先使用 uploadVoice 上傳聲音'); return; } wx.downloadVoice({ serverId: voice.serverId, success: function (res) { alert('下載語音成功，localId 為' + res.localId); voice.localId = res.localId; } }); }; // 5 圖片介面 // 5.1 拍照、本地選圖 var images = { localId: [], serverId: [] }; document.querySelector('#chooseImage').onclick = function () { wx.chooseImage({ success: function (res) { images.localId = res.localIds; alert('已選擇 ' + res.localIds.length + ' 張圖片'); } }); }; // 5.2 圖片預覽 document.querySelector('#previewImage').onclick = function () { wx.previewImage({ current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', urls: [ 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg', 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg' ] }); }; // 5.3 上傳圖片 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); if (i < length) { upload(); } }, fail: function (res) { alert(JSON.stringify(res)); } }); } upload(); }; // 5.4 下載圖片 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(); }; // 6 裝置資訊介面 // 6.1 獲取當前網路狀態 document.querySelector('#getNetworkType').onclick = function () { wx.getNetworkType({ success: function (res) { alert(res.networkType); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 7 地理位置介面 // 7.1 檢視地理位置 document.querySelector('#openLocation').onclick = function () { wx.openLocation({ latitude: 23.099994, longitude: 113.324520, name: 'TIT 創意園', address: '廣州市海珠區新港中路 397 號', scale: 14, infoUrl: 'http://weixin.<a href="http://www.it165.net/qq/" target="_blank" class="keylink">qq</a>.com' }); }; // 7.2 獲取當前地理位置 document.querySelector('#getLocation').onclick = function () { wx.getLocation({ success: function (res) { alert(JSON.stringify(res)); }, cancel: function (res) { alert('使用者拒絕授權獲取地理位置'); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8 介面操作介面 // 8.1 隱藏右上角選單 document.querySelector('#hideOptionMenu').onclick = function () { wx.hideOptionMenu(); }; // 8.2 顯示右上角選單 document.querySelector('#showOptionMenu').onclick = function () { wx.showOptionMenu(); }; // 8.3 批量隱藏選單項 document.querySelector('#hideMenuItems').onclick = function () { wx.hideMenuItems({ menuList: [ 'menuItem:readMode', // 閱讀模式 'menuItem:share:timeline', // 分享到朋友圈 'menuItem:copyUrl' // 複製連結 ], success: function (res) { alert('已隱藏“閱讀模式”，“分享到朋友圈”，“複製連結”等按鈕'); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8.4 批量顯示選單項 document.querySelector('#showMenuItems').onclick = function () { wx.showMenuItems({ menuList: [ 'menuItem:readMode', // 閱讀模式 'menuItem:share:timeline', // 分享到朋友圈 'menuItem:copyUrl' // 複製連結 ], success: function (res) { alert('已顯示“閱讀模式”，“分享到朋友圈”，“複製連結”等按鈕'); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8.5 隱藏所有非基本選單項 document.querySelector('#hideAllNonBaseMenuItem').onclick = function () { wx.hideAllNonBaseMenuItem({ success: function () { alert('已隱藏所有非基本選單項'); } }); }; // 8.6 顯示所有被隱藏的非基本選單項 document.querySelector('#showAllNonBaseMenuItem').onclick = function () { wx.showAllNonBaseMenuItem({ success: function () { alert('已顯示所有非基本選單項'); } }); }; // 8.7 關閉當前視窗 document.querySelector('#closeWindow').onclick = function () { wx.closeWindow(); }; // 9 微信原生介面 // 9.1.1 掃描二維碼並返回結果 document.querySelector('#scanQRCode0').onclick = function () { wx.scanQRCode(); }; // 9.1.2 掃描二維碼並返回結果 document.querySelector('#scanQRCode1').onclick = function () { wx.scanQRCode({ needResult: 1, desc: 'scanQRCode desc', success: function (res) { alert(JSON.stringify(res)); } }); }; // 10 微信支付介面 // 10.1 發起一個支付請求 document.querySelector('#chooseWXPay').onclick = function () { // 注意：此 Demo 使用 2.7 版本支付介面實現，建議使用此介面時參考微信支付相關最新文件。 wx.chooseWXPay({ timestamp: 1414723227, nonceStr: 'noncestr', package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK¬ify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D', signType: 'SHA1', // 注意：新版支付介面使用 MD5 加密 paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69' }); }; // 11.3 跳轉微信商品頁 document.querySelector('#openProductSpecificView').onclick = function () { wx.openProductSpecificView({ productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw' }); }; // 12 微信卡券介面 // 12.1 新增卡券 document.querySelector('#addCard').onclick = function () { wx.addCard({ cardList: [ { cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo', cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}' }, { cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo', cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750"}' } ], success: function (res) { alert('已新增卡券：' + JSON.stringify(res.cardList)); } }); }; // 12.2 選擇卡券 document.querySelector('#chooseCard').onclick = function () { wx.chooseCard({ cardSign: '97e9c5e58aab3bdf6fd6150e599d7e5806e5cb91', timestamp: 1417504553, nonceStr: 'k0hGdSXKZEj3Min5', success: function (res) { alert('已選擇卡券：' + JSON.stringify(res.cardList)); } }); }; // 12.3 檢視卡券 document.querySelector('#openCard').onclick = function () { alert('您沒有該公眾號的卡券無法開啟卡券。'); wx.openCard({ cardList: [ ] }); }; var shareData = { title: '微信JS-SDK Demo', desc: '微信JS-SDK,幫助第三方為使用者提供更優質的移動web服務', link: 'http://demo.open.weixin.qq.com/jssdk/', imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0' }; wx.onMenuShareAppMessage(shareData); wx.onMenuShareTimeline(shareData); }); wx.error(function (res) { alert(res.errMsg); }); </script> </html>