微信jssdk的示例
阿新 • • 發佈：2019-01-31
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: '網際網路之子 方倍工作室', 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('使用者點擊發送給朋友'); }, 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: '網際網路之子 方倍工作室', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { 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)); } }); }; // 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({ desc: 'scanQRCode desc' }); }; // 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 () { 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', paySign: 'bd5b1933cda6e9548862944836a9b52e8c9a2b69' }); }; // 11.3 跳轉微信商品頁 document.querySelector('#openProductSpecificView').onclick = function () { wx.openProductSpecificView({ productId: 'pDF3iY0ptap-mIIPYnsM5n8VtCR0' }); }; // 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://www.cnblogs.com/txw1958/', imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0' }; wx.onMenuShareAppMessage(shareData); wx.onMenuShareTimeline(shareData); }); wx.error(function (res) { alert(res.errMsg); });