一、JS部分
* 注意: * 1. 所有的JS接口只能在公眾號(hào)綁定的域名下調(diào)用,公眾號(hào)開發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。 * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容,請(qǐng)到官網(wǎng)下載最新的包覆蓋安裝,Android 自定義分享接口需升級(jí)至 6.0.2.58 版本及以上。 * 3. 完整 JS-SDK 文檔地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd91 二、HTML調(diào)用48dd613f.htmlwx.ready(function () { // 1 判斷當(dāng)前版本是否支持指定 JS 接口,支持批量判斷 document.querySelector('#checkJsApi').onclick = function () { wx.checkJsApi({ jsApiList: [ 'getNetworkType', 'previewImage' ], success: function (res) { alert(JSON.stringify(res)); } }); }; // 2. 分享接口 // 2.1 監(jiān)聽“分享給朋友”,按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口 document.querySelector('#onMenuShareAppMessage').onclick = function () { wx.onMenuShareAppMessage({ title: '互聯(lián)網(wǎng)之子', desc: '在長(zhǎng)大的過程中,我才慢慢發(fā)現(xiàn),我身邊的所有事,別人跟我說的所有事,那些所謂本來如此,注定如此的事,它們其實(shí)沒有非得如此,事情是可以改變的。更重要的是,有些事既然錯(cuò)了,那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { alert('用戶點(diǎn)擊發(fā)送給朋友'); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已注冊(cè)獲取“發(fā)送給朋友”狀態(tài)事件'); }; // 2.2 監(jiān)聽“分享到朋友圈”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口 document.querySelector('#onMenuShareTimeline').onclick = function () { wx.onMenuShareTimeline({ title: '互聯(lián)網(wǎng)之子', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { alert('用戶點(diǎn)擊分享到朋友圈'); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已注冊(cè)獲取“分享到朋友圈”狀態(tài)事件'); }; // 2.3 監(jiān)聽“分享到QQ”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口 document.querySelector('#onMenuShareQQ').onclick = function () { wx.onMenuShareQQ({ title: '互聯(lián)網(wǎng)之子', desc: '在長(zhǎng)大的過程中,我才慢慢發(fā)現(xiàn),我身邊的所有事,別人跟我說的所有事,那些所謂本來如此,注定如此的事,它們其實(shí)沒有非得如此,事情是可以改變的。更重要的是,有些事既然錯(cuò)了,那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { alert('用戶點(diǎn)擊分享到QQ'); }, complete: function (res) { alert(JSON.stringify(res)); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已注冊(cè)獲取“分享到 QQ”狀態(tài)事件'); }; // 2.4 監(jiān)聽“分享到微博”按鈕點(diǎn)擊、自定義分享內(nèi)容及分享結(jié)果接口 document.querySelector('#onMenuShareWeibo').onclick = function () { wx.onMenuShareWeibo({ title: '互聯(lián)網(wǎng)之子', desc: '在長(zhǎng)大的過程中,我才慢慢發(fā)現(xiàn),我身邊的所有事,別人跟我說的所有事,那些所謂本來如此,注定如此的事,它們其實(shí)沒有非得如此,事情是可以改變的。更重要的是,有些事既然錯(cuò)了,那就該做出改變。', link: 'http://movie.douban.com/subject/25785114/', imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg', trigger: function (res) { alert('用戶點(diǎn)擊分享到微博'); }, complete: function (res) { alert(JSON.stringify(res)); }, success: function (res) { alert('已分享'); }, cancel: function (res) { alert('已取消'); }, fail: function (res) { alert(JSON.stringify(res)); } }); alert('已注冊(cè)獲取“分享到微博”狀態(tài)事件'); }; // 3 智能接口 var voice = { localId: '', serverId: '' }; // 3.1 識(shí)別音頻并返回識(shí)別結(jié)果 document.querySelector('#translateVoice').onclick = function () { if (voice.localId == '') { alert('請(qǐng)先使用 startRecord 接口錄制一段聲音'); return; } wx.translateVoice({ localId: voice.localId, complete: function (res) { if (res.hasOwnProperty('translateResult')) { alert('識(shí)別結(jié)果:' + res.translateResult); } else { alert('無法識(shí)別'); } } }); }; // 4 音頻接口 // 4.2 開始錄音 document.querySelector('#startRecord').onclick = function () { wx.startRecord({ cancel: function () { alert('用戶拒絕授權(quán)錄音'); } }); }; // 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 監(jiān)聽錄音自動(dòng)停止 wx.onVoiceRecordEnd({ complete: function (res) { voice.localId = res.localId; alert('錄音時(shí)間已超過一分鐘'); } }); // 4.5 播放音頻 document.querySelector('#playVoice').onclick = function () { if (voice.localId == '') { alert('請(qǐng)先使用 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 監(jiān)聽錄音播放停止 wx.onVoicePlayEnd({ complete: function (res) { alert('錄音(' + res.localId + ')播放結(jié)束'); } }); // 4.8 上傳語音 document.querySelector('#uploadVoice').onclick = function () { if (voice.localId == '') { alert('請(qǐng)先使用 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('請(qǐng)先使用 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 圖片預(yù)覽 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('請(qǐng)先使用 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('請(qǐng)先使用 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 設(shè)備信息接口 // 6.1 獲取當(dāng)前網(wǎng)絡(luò)狀態(tài) 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 創(chuàng)意園', address: '廣州市海珠區(qū)新港中路 397 號(hào)', scale: 14, infoUrl: 'http://weixin.qq.com' }); }; // 7.2 獲取當(dāng)前地理位置 document.querySelector('#getLocation').onclick = function () { wx.getLocation({ success: function (res) { alert(JSON.stringify(res)); }, cancel: function (res) { alert('用戶拒絕授權(quán)獲取地理位置'); } }); }; // 8 界面操作接口 // 8.1 隱藏右上角菜單 document.querySelector('#hideOptionMenu').onclick = function () { wx.hideOptionMenu(); }; // 8.2 顯示右上角菜單 document.querySelector('#showOptionMenu').onclick = function () { wx.showOptionMenu(); }; // 8.3 批量隱藏菜單項(xiàng) document.querySelector('#hideMenuItems').onclick = function () { wx.hideMenuItems({ menuList: [ 'menuItem:readMode', // 閱讀模式 'menuItem:share:timeline', // 分享到朋友圈 'menuItem:copyUrl' // 復(fù)制鏈接 ], success: function (res) { alert('已隱藏“閱讀模式”,“分享到朋友圈”,“復(fù)制鏈接”等按鈕'); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8.4 批量顯示菜單項(xiàng) document.querySelector('#showMenuItems').onclick = function () { wx.showMenuItems({ menuList: [ 'menuItem:readMode', // 閱讀模式 'menuItem:share:timeline', // 分享到朋友圈 'menuItem:copyUrl' // 復(fù)制鏈接 ], success: function (res) { alert('已顯示“閱讀模式”,“分享到朋友圈”,“復(fù)制鏈接”等按鈕'); }, fail: function (res) { alert(JSON.stringify(res)); } }); }; // 8.5 隱藏所有非基本菜單項(xiàng) document.querySelector('#hideAllNonBaseMenuItem').onclick = function () { wx.hideAllNonBaseMenuItem({ success: function () { alert('已隱藏所有非基本菜單項(xiàng)'); } }); }; // 8.6 顯示所有被隱藏的非基本菜單項(xiàng) document.querySelector('#showAllNonBaseMenuItem').onclick = function () { wx.showAllNonBaseMenuItem({ success: function () { alert('已顯示所有非基本菜單項(xiàng)'); } }); }; // 8.7 關(guān)閉當(dāng)前窗口 document.querySelector('#closeWindow').onclick = function () { wx.closeWindow(); }; // 9 微信原生接口 // 9.1.1 掃描二維碼并返回結(jié)果 document.querySelector('#scanQRCode0').onclick = function () { wx.scanQRCode({ desc: 'scanQRCode desc' }); }; // 9.1.2 掃描二維碼并返回結(jié)果 document.querySelector('#scanQRCode1').onclick = function () { wx.scanQRCode({ needResult: 1, desc: 'scanQRCode desc', success: function (res) { alert(JSON.stringify(res)); } }); }; // 10 微信支付接口 // 10.1 發(fā)起一個(gè)支付請(qǐng)求 document.querySelector('#chooseWXPay').onclick = function () { wx.chooseWXPay({ timestamp: 1414723227, nonceStr: 'noncestr', package: 'addition=action_id=gaby1234&limit_pay=&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK¬ify_url=http://120.204.206.246/cgi-bin/mmsupport-bin/notifypay&out_trade_no=1414723227818375338&partner=1900000109&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177C EECBEF8D', paySign: 'bd5b1933cda6e95488629448 36a9b52e8c9a2b69' }); }; // 11.3 跳轉(zhuǎn)微信商品頁 document.querySelector('#openProductSpecificView').onclick = function () { wx.openProductSpecificView({ productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw' }); }; // 12 微信卡券接口 // 12.1 添加卡券 document.querySelector('#addCard').onclick = function () { wx.addCard({ cardList: [ { cardId: 'pDF3iY9tv9zCGCj4jTXFOo1D xHdo', cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1c bef1b36e9b0f9750"}' }, { cardId: 'pDF3iY9tv9zCGCj4jTXFOo1D xHdo', cardExt: '{"code": "", "openid": "", "timestamp": "1418301401", "signature":"64e6a7cc85c6e84b726f2d1c bef1b36e9b0f9750"}' } ], success: function (res) { alert('已添加卡券:' + JSON.stringify(res.cardList)); } }); }; // 12.2 選擇卡券 document.querySelector('#chooseCard').onclick = function () { wx.chooseCard({ cardSign: '97e9c5e58aab3bdf6fd6150e 599d7e5806e5cb91', timestamp: 1417504553, nonceStr: 'k0hGdSXKZEj3Min5', success: function (res) { alert('已選擇卡券:' + JSON.stringify(res.cardList)); } }); }; // 12.3 查看卡券 document.querySelector('#openCard').onclick = function () { alert('您沒有該公眾號(hào)的卡券無法打開卡券。'); wx.openCard({ cardList: [ ] }); }; var shareData = { title: '微信JS-SDK Demo', desc: '微信JS-SDK,幫助第三方為用戶提供更優(yōu)質(zhì)的移動(dòng)web服務(wù)', link: 'http://demo.open.weixin.qq.com/jssdk/', imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M 9J1SKqKCImxJCt7j9rHYicKD I45jRPBxdzdyREWnk0ia0N5T MnMfth7SdxtzMvVgXg/0' }; wx.onMenuShareAppMessage(shareData); wx.onMenuShareTimeline(shareData);});wx.error(function (res) { alert(res.errMsg);});
charset="utf-8"> | |
微信JS-SDK Demo | |
name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"> | |
rel="stylesheet" href="css/style.css"> | |
ontouchstart=""> | |
class="wxapi_container"> | |
class="wxapi_index_container"> | |
class="label_box lbox_close wxapi_index_list"> | |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
class="lbox_close wxapi_form"> | |
id="menu-basic">基礎(chǔ)接口 | |
class="desc">判斷當(dāng)前客戶端是否支持指定JS接口 | |
checkJsApi | |
id="menu-share">分享接口 | |
class="desc">獲取“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口 | |
onMenuShareTimeline | |
class="desc">獲取“分享給朋友”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口 | |
onMenuShareAppMessage | |
class="desc">獲取“分享到QQ”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口 | |
onMenuShareQQ | |
class="desc">獲取“分享到騰訊微博”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口 | |
onMenuShareWeibo | |
id="menu-image">圖像接口 | |
class="desc">拍照或從手機(jī)相冊(cè)中選圖接口 | |
chooseImage | |
class="desc">預(yù)覽圖片接口 | |
previewImage | |
class="desc">上傳圖片接口 | |
uploadImage | |
class="desc">下載圖片接口 | |
downloadImage | |
id="menu-voice">音頻接口 | |
class="desc">開始錄音接口 | |
startRecord | |
class="desc">停止錄音接口 | |
stopRecord | |
class="desc">播放語音接口 | |
playVoice | |
class="desc">暫停播放接口 | |
pauseVoice | |
class="desc">停止播放接口 | |
stopVoice | |
class="desc">上傳語音接口 | |
uploadVoice | |
class="desc">下載語音接口 | |
downloadVoice | |
id="menu-smart">智能接口 | |
class="desc">識(shí)別音頻并返回識(shí)別結(jié)果接口 | |
translateVoice | |
id="menu-device">設(shè)備信息接口 | |
class="desc">獲取網(wǎng)絡(luò)狀態(tài)接口 | |
getNetworkType | |
id="menu-location">地理位置接口 | |
class="desc">使用微信內(nèi)置地圖查看位置接口 | |
openLocation | |
class="desc">獲取地理位置接口 | |
getLocation | |
id="menu-webview">界面操作接口 | |
class="desc">隱藏右上角菜單接口 | |
hideOptionMenu | |
class="desc">顯示右上角菜單接口 | |
showOptionMenu | |
class="desc">關(guān)閉當(dāng)前網(wǎng)頁窗口接口 | |
closeWindow | |
class="desc">批量隱藏功能按鈕接口 | |
hideMenuItems | |
class="desc">批量顯示功能按鈕接口 | |
showMenuItems | |
class="desc">隱藏所有非基礎(chǔ)按鈕接口 | |
hideAllNonBaseMenuItem | |
class="desc">顯示所有功能按鈕接口 | |
showAllNonBaseMenuItem | |
id="menu-scan">微信掃一掃 | |
class="desc">調(diào)起微信掃一掃接口 | |
scanQRCode(微信處理結(jié)果) | |
scanQRCode(直接返回結(jié)果) | |
id="menu-shopping">微信小店接口 | |
class="desc">跳轉(zhuǎn)微信商品頁接口 | |
openProductSpecificView | |
id="menu-card">微信卡券接口 | |
class="desc">批量添加卡券接口 | |
addCard | |
class="desc">調(diào)起適用于門店的卡券列表并獲取用戶選擇列表 | |
chooseCard | |
class="desc">查看微信卡包中的卡券接口 | |
openCard | |
id="menu-pay">微信支付接口 | |
class="desc">發(fā)起一個(gè)微信支付請(qǐng)求 | |
chooseWXPay | |
wx.config({ | |
debug: false, | |
appId: 'wxf8b4f85f3a794e77', | |
timestamp: 1421121219, | |
nonceStr: 'Xt6IsBK7JMECSYXO', | |
signature: '86200fbc5d850129973546e1 | |
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', | |
'sc |
聯(lián)系客服