微信公衆号js-sdk使用步驟總結
1. 域名綁定
先登入微信公衆平台進入“公衆号設定”的“功能設定”裡填寫“JS接口安全域名”。
- 可填寫三個域名或路徑（例：wx.qq.com或wx.qq.com/mp），需使用字母、數字及“-”的組合，不支援IP位址、端口号及短鍊域名。
- 填寫的域名須通過ICP備案的驗證。
- 将檔案MP_verify_UhBvKrxosbLJmeos.txt（點選下載下傳）上傳至填寫域名或路徑指向的web伺服器（或虛拟主機）的目錄（若填寫域名，将檔案放置在域名根目錄下，例如wx.qq.com/MP_verify_UhBvKrxosbLJmeos.txt；若填寫路徑，将檔案放置在路徑目錄下，例如wx.qq.com/mp/MP_verify_UhBvKrxosbLJmeos.txt），并確定可以通路。
- 一個自然月内最多可修改并儲存三次
2.引入檔案
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
3.通過config接口注入權限驗證配置
wx.config({
debug: true, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來，若要檢視傳入的參數，可以在pc端打開，參數資訊會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公衆号的唯一辨別
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的随機串
signature: '',// 必填，簽名，簽名生成算法見附錄1
jsApiList: [] // 必填，需要使用的JS接口清單，所有JS接口清單見附錄2
});
4.通過ready接口處理成功驗證
wx.ready(function(){
// 在這裡就可以使用微信sdk提供的錄音、拍照等功能
// config資訊驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，config是一個用戶端的異步操作，是以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確定正确執行。對于使用者觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。
});
5.通過error接口處理失敗驗證
wx.error(function(res){
// config資訊驗證失敗會執行error函數，如簽名過期導緻驗證失敗，具體錯誤資訊可以打開config的debug模式檢視，也可以在傳回的res參數中檢視，對于SPA可以在這裡更新簽名。
});
6.擴充signature簽名的配置
想生成簽名，必須要有jsapi_ticket,也就是想調用微信js接口，他就是門票，那麼jsapi_ticket怎麼來？可以用access_token擷取，那access_token又是什麼，是進行授權後接口調用的令牌，那access_token又怎麼得來？
公衆号可以使用
AppID
和
AppSecret
調用本接口來擷取
access_token
舉個栗子：
比如你要坐飛機（使用微信jssdk），需要機票（jsapi_tiket），機票怎麼來？ 如果你想買機票必須要有身份證，身份證（access_token,）怎麼來？ 身份證是不是通過我們去警察局告訴警察局一些基本資訊（AppID，AppSecret，類似于個人的基本資訊）
- 是以第一步先擷取appid和appsecret，在公衆号号裡可以直接看見
- 然後通過appid和appsecret擷取access_token
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=appsecret - 然後通過上個接口得到的access_token在擷取jsapi_ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=access_token&type=jsapi - 最終得到jsapi_ticket
- 最終利用jsapi_ticket、noncestr、timestamp、url生成了 signature
最後代碼示例
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn-record">錄音</button>
<button id="btn-stop-record">停止錄音</button>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="./node_modules/js-sha1/build/sha1.min.js"></script>
<script>
var signature = res.data. signature ;
wx.config({
debug: true, // 開啟調試模式,調用的所有api的傳回值會在用戶端alert出來，若要檢視傳入的參數，可以在pc端打開，參數資訊會通過log打出，僅在pc端時才會列印。
appId: 'wx20397873b70ac874', // 必填，公衆号的唯一辨別
timestamp: option.timestamp, // 必填，生成簽名的時間戳
nonceStr: option.noncestr, // 必填，生成簽名的随機串
signature: signature,// 必填，簽名，簽名生成算法見附錄1
jsApiList: ['checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'onVoicePlayEnd',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard']
});
wx.ready(function () {
//錄音接口的使用
document.getElementById("btn-record").onclick = function () {
wx.startRecord();
}
document.getElementById("btn-stop-record").onclick = function () {
wx.stopRecord({
success: function (res) {
// res.localId 就是你剛才錄音的辨別
var localId = res.localId;
//停止錄音之後，直接播放
wx.playVoice({
localId:localId // 需要播放的音頻的本地ID
});
}
});
}
//設定分享給朋友的内容
wx.onMenuShareAppMessage({
title: '測試', // 分享标題
desc: '測試', // 分享描述
link: 'http://xxxxx', // 分享連結，該連結域名或路徑必須與目前頁面對應的公衆号JS安全域名一緻
imgUrl: 'http://0.jpg', // 分享圖示
type: 'link', // 分享類型,music、video或link，不填預設為link
dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
success: function () {
// 使用者确認分享後執行的回調函數
},
cancel: function () {
// 使用者取消分享後執行的回調函數
}
});
});
wx.error(function (res) {
// config資訊驗證失敗會執行error函數，如簽名過期導緻驗證失敗，具體錯誤資訊可以打開config的debug模式檢視，也可以在傳回的res參數中檢視，對于SPA可以在這裡更新簽名。
});
</script>
</body>
</html>
![微信企業号--回調模式開啟php[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)