<div class="lbox_close wxapi_form"><h3 id="menu-basic">基礎接口</h3><span class="desc">判斷當前客戶端是否支持指定JS接口</span><button class="btn btn_primary" id="checkJsApi">checkJsApi</button><h3 id="menu-share">分享接口</h3><span class="desc">獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容接口</span><button class="btn btn_primary" id="onMenuShareTimeline">onMenuShareTimeline</button><span class="desc">獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口</span><button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button><span class="desc">獲取“分享到QQ”按鈕點擊狀態及自定義分享內容接口</span><button class="btn btn_primary" id="onMenuShareQQ">onMenuShareQQ</button><span class="desc">獲取“分享到騰訊微博”按鈕點擊狀態及自定義分享內容接口</span><button class="btn btn_primary" id="onMenuShareWeibo">onMenuShareWeibo</button><h3 id="menu-image">圖像接口</h3><span class="desc">拍照或從手機相冊中選圖接口</span><button class="btn btn_primary" id="chooseImage">chooseImage</button><span class="desc">預覽圖片接口</span><button class="btn btn_primary" id="previewImage">previewImage</button><span class="desc">上傳圖片接口</span><button class="btn btn_primary" id="uploadImage">uploadImage</button><span class="desc">下載圖片接口</span><button class="btn btn_primary" id="downloadImage">downloadImage</button><h3 id="menu-voice">音頻接口</h3><span class="desc">開始錄音接口</span><button class="btn btn_primary" id="startRecord">startRecord</button><span class="desc">停止錄音接口</span><button class="btn btn_primary" id="stopRecord">stopRecord</button><span class="desc">播放語音接口</span><button class="btn btn_primary" id="playVoice">playVoice</button><span class="desc">暫停播放接口</span><button class="btn btn_primary" id="pauseVoice">pauseVoice</button><span class="desc">停止播放接口</span><button class="btn btn_primary" id="stopVoice">stopVoice</button><span class="desc">上傳語音接口</span><button class="btn btn_primary" id="uploadVoice">uploadVoice</button><span class="desc">下載語音接口</span><button class="btn btn_primary" id="downloadVoice">downloadVoice</button><h3 id="menu-smart">智能接口</h3><span class="desc">識別音頻并返回識別結果接口</span><button class="btn btn_primary" id="translateVoice">translateVoice</button><h3 id="menu-device">設備信息接口</h3><span class="desc">獲取網絡狀態接口</span><button class="btn btn_primary" id="getNetworkType">getNetworkType</button><h3 id="menu-location">地理位置接口</h3><span class="desc">使用微信內置地圖查看位置接口</span><button class="btn btn_primary" id="openLocation">openLocation</button><span class="desc">獲取地理位置接口</span><button class="btn btn_primary" id="getLocation">getLocation</button><h3 id="menu-webview">界面操作接口</h3><span class="desc">隱藏右上角菜單接口</span><button class="btn btn_primary" id="hideOptionMenu">hideOptionMenu</button><span class="desc">顯示右上角菜單接口</span><button class="btn btn_primary" id="showOptionMenu">showOptionMenu</button><span class="desc">關閉當前網頁窗口接口</span><button class="btn btn_primary" id="closeWindow">closeWindow</button><span class="desc">批量隱藏功能按鈕接口</span><button class="btn btn_primary" id="hideMenuItems">hideMenuItems</button><span class="desc">批量顯示功能按鈕接口</span><button class="btn btn_primary" id="showMenuItems">showMenuItems</button><span class="desc">隱藏所有非基礎按鈕接口</span><button class="btn btn_primary" id="hideAllNonBaseMenuItem">hideAllNonBaseMenuItem</button><span class="desc">顯示所有功能按鈕接口</span><button class="btn btn_primary" id="showAllNonBaseMenuItem">showAllNonBaseMenuItem</button><h3 id="menu-scan">微信掃一掃</h3><span class="desc">調起微信掃一掃接口</span><button class="btn btn_primary" id="scanQRCode0">scanQRCode(微信處理結果)</button><button class="btn btn_primary" id="scanQRCode1">scanQRCode(直接返回結果)</button><h3 id="menu-shopping">微信小店接口</h3><span class="desc">跳轉微信商品頁接口</span><button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button><h3 id="menu-card">微信卡券接口</h3><span class="desc">批量添加卡券接口</span><button class="btn btn_primary" id="addCard">addCard</button><span class="desc">調起適用于門店的卡券列表并獲取用戶選擇列表</span><button class="btn btn_primary" id="chooseCard">chooseCard</button><span class="desc">查看微信卡包中的卡券接口</span><button class="btn btn_primary" id="openCard">openCard</button><h3 id="menu-pay">微信支付接口</h3><span class="desc">發起一個微信支付請求</span><button class="btn btn_primary" id="chooseWXPay">chooseWXPay</button></div>

/*
?? * 注意：
?? * 1. 所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
?? * 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。
?? * 3. 常見問題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
?? *
?? * 開發中遇到問題詳見文檔“附錄5-常見錯誤及解決辦法”解決，如仍未能解決可通過以下渠道反饋：
?? * 郵箱地址：weixin-open@qq.com
?? * 郵件主題：【微信JS-SDK反饋】具體問題
?? * 郵件內容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。
?? */

wx.config({debug: false,appId: 'wxf8b4f85f3a794e77',timestamp: 1431058506,nonceStr: 'iXifhx7UzDl5oh32',signature: 'b634291d393a2df268b1654810d68f4f8459e682',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']}); /** 注意：* 1. 所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。* 2. 如果發現在 Android 不能分享自定義內容，請到官網下載最新的包覆蓋安裝，Android 自定義分享接口需升級至 6.0.2.58 版本及以上。* 3. 完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html** 如有問題請通過以下渠道反饋：* 郵箱地址：weixin-open@qq.com* 郵件主題：【微信JS-SDK反饋】具體問題* 郵件內容說明：用簡明的語言描述問題所在，并交代清楚遇到該問題的場景，可附上截屏圖片，微信團隊會盡快處理你的反饋。*/ 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://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: '互聯網之子',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.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.qq.com'});};// 7.2 獲取當前地理位置document.querySelector('#getLocation').onclick = function () {wx.getLocation({success: function (res) {alert(JSON.stringify(res));},cancel: function (res) {alert('用戶拒絕授權獲取地理位置');}});};// 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&notify_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); });

?

轉載于:https://www.cnblogs.com/LoveOrHate/p/4487329.html

總結

以上是生活随笔為你收集整理的微信JS-SDK的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。