微信JS-SDK踩過的那些小坑坑

涼曦小公舉?發表於2018-09-18
JS

微信公眾平臺技術文件連結：mp.weixin.qq.com/wiki?t=reso…

第一步：基本配置

1、伺服器配置

url : http://外網IP/wx （http埠80 https 443埠）

示例：http://47.107.21.206/publicity/wx

token : weixin（自主設定必須由英文或數字，長度3-32字元）

2、ip白名單設定

新增伺服器出口IP

示例：47.107.81.165

第二步：呼叫介面

1、根據appid和secret獲取token

mp.weixin.qq.com/wiki?t=reso…

2、根據token獲取jsapi_ticket

（公眾號用於呼叫微信JS介面的臨時票據 由於獲取jsapi_ticket的api呼叫次數非常有限，頻繁重新整理jsapi_ticket會導致api呼叫受限，影響自身業務，開發者必須在自己的服務全域性快取jsapi_ticket 。）

3、生成並驗證簽名

官網示例程式碼：demo.open.weixin.qq.com/jssdk/sampl…

4、JSSDK使用步驟

第一步：繫結域名

將所給檔案放置根目錄下（放在路徑目錄下雖然會配置成功但會出現invalid url domain錯誤）

示例：publicity.mintechai.com

第二步：引入js檔案

res.wx.qq.com/open/js/jwe…

第三步：通過config介面注入許可權驗證配置
wx.config({
debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS介面列表（updateAppMessageShareData，updateTimelineShareData安卓最新版目前不支援這兩個介面，ios支援）

});
複製程式碼
第四步：通過ready介面處理成功驗證
wx.ready(function(){
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，
   所以如果需要在頁面載入時就呼叫相關介面，

// 則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函式中。
});
複製程式碼
第五步：通過error介面處理失敗驗證
wx.error(function(res){
// config資訊驗證失敗會執行error函式，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
});
複製程式碼
第六步：在wx.ready中新增所需介面
wx.onMenuShareAppMessage({
      title: '看過這個H5，讀懂金融科技最新趨勢！', // 分享標題
      desc: '不信你試試', // 分享描述
      link: 'http://publicity.mintechai.com', // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
      imgUrl: 'http://publicity.mintechai.com/public/imgs/minTech.png', // 分享圖示地址必須是絕對路徑
      type: '', // 分享型別,music、video或link，不填預設為link
      dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
      success: function () {
         // 使用者點選了分享後執行的回撥函式
     }
}）
複製程式碼

具體問題：

1、伺服器配置token（只需驗證一次）

微信向node伺服器發出的請求一直接收不到
複製程式碼

解決方法：注掉這兩句程式碼

import history from 'koa2-connect-history-api-fallback'

app.use(history())
複製程式碼

原因 : 這是Koa2的一箇中介軟體，用於處理vue-router使用history模式返回index.html,開發者提交資訊後，微信伺服器將傳送GET請求到填寫的伺服器地址URL上，由於是get請求，則預設返回index.html

2、獲取access-token時請求跨域的問題

解決方法：使用node做中間層向微信發出請求，再返回給前端

原因：跨域問題針對於瀏覽器訪問，伺服器直接請求伺服器不會產生跨域問題

3、簽名演算法的使用

解決方法：寫一個介面，將需要的引數傳給後端，在後端處理完畢後返回給前端

原因：簽名演算法的使用引用了一些包，不能直接在前端使用

4、安卓手機最新版本6.7.2點選分享沒有反應

解決方法：注掉最新的兩個介面，使用舊版本介面

原因：安卓不支援最新的1.4.0介面（updateAppMessageShareData , updateTimelineShareData）ios支援

5、二次分享失敗

原因：分享之後，微信會在原有地址上拼接，和設定的安全域名不同

解決方法：通過判斷當前地址是否和設定的域名相同來改變當前地址

6、invalid url domain

解決方法：繫結的域名和url保持一致

7、invalid signature

解決方法：

1.確定簽名演算法正確 可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗
2.確定url和當前頁面的location.href.split('#')[0])一致
3.確保獲取簽名的url是動態獲取的，用js獲取當前頁面除去'#'hash部分的連結（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的連結末尾加入其它引數，如果不是動態獲取當前連結，將導致分享後的頁面簽名失敗。
4.可用微信開發者工具檢視介面的返回資訊可能是未將伺服器出口IP新增至白名單

8、在iOS和Android都無法分享

（請確認公眾號已經認證，只有認證的公眾號才具有分享相關介面許可權，如果確實已經認證，則要檢查監聽介面是否在wx.ready回撥函式中觸發）

JS-SDK說明文件地址：mp.weixin.qq.com/wiki?t=reso…

相關文章