微信invalid signature，微信IOS分享失效，微信重新整理之後IOS不能分享，spa單頁面微信分享，wx.ready不執行？
2020-10-17 11:00:25
微信的坑，哭著也要填完。
小白選手剛接觸微信公眾號網頁，產品出來個需求，要求h5網頁在任何頁面都可以分享，並且分享的內容是自定義的（B端設定），我一聽這還不簡單，微信官方檔案裡寫的明明白白，好說。
我用的是vue2版本+微信的jssdk是npm安裝的1.4.0的版本。使用的是vue-router的< history >模式。
大概有ABCD四個頁面吧。自己想的很美好，也上網查閱了前輩們說的大概意思就是：
ios頁面在根目錄下執行一次config介面注入許可權驗證設定
Android頁面每個頁面都執行以下config介面注入許可權驗證設定
我也就照著辦了，畢竟前輩們辛虧幫我們排雷總結出來的肯定差不了。
參考文獻：
記錄一次vue2.0（history模式）下微信自定義分享的坑
Vue專案history模式下微信分享爬坑總結
像這樣的路由攔截一下：
router.afterEach((to, from) => {
let authUrl = `${window.location.origin}${to.fullPath}`;
let allowShare = !!to.meta.allowShare;
if (!!window.__wxjs_is_wkwebview) {// IOS
if (window.entryUrl == "" || window.entryUrl == undefined) {
window.entryUrl = authUrl; // 將後面的引數去除
}
wechatAuth(authUrl, "ios", allowShare);
} else {
// 安卓
setTimeout(function () {
wechatAuth(authUrl, "android", allowShare);
}, 500);
}
});
可能是我抄的有問題，還有可能是我們的需求不一樣，對我而言無效。
還有一個是我參考了這位大佬的微信 jssdk 簽名錯誤invalid signature的解決方法
然後問題又出現了：
安卓沒啥問題
但是IOS問題又來了，當我進入頁面正常瀏覽，理由跳轉，分享都沒問題，但是當我點選這個操作介面的重新整理時，分享失效了！！我無論點選傳送好友，還是點選朋友圈都無效，開始以為是整個介面都失效了，於是開啟了debug，發現當我點選重新整理後，wx的debug不管對錯都沒有彈窗，沒反應！！！再重新整理一次就又可以分享了，什麼鬼。開始感覺不是我程式碼的問題，都是ios系統的問題了。但是使用者我不能控制每個人都重新整理2次吧。於是乎我就是各種面相百度程式設計，各種搜刮嘗試。
吐槽了這麼多，總結一下我的邏輯：
1.Android沒啥特殊處理，就是每個頁面都呼叫一下wx.config
2.IOS就是在首次也頁面登入的時候給url做個小標記，方便記錄第一次的url，拿著這個url去獲取簽名。
貼一下我ios和安卓可以分享的程式碼，有的是抄大佬們的。
//wxConfig.js
//獲取微信簽名
function getWxSignature(data,callback){
data = data || {};
var noncestr = randomString(8);
var timestamp = '' + Date.now();
timestamp = timestamp.substr(0, timestamp.length - 3);
let wechaturl = window.location.href.split('#')[0];
//不知道wechaturl哪裡來的點選一下面的wechaturl哪裡來的這個連結進去看一下。
if (window.wechaturl !== undefined) {
wechaturl = window.wechaturl;
}
console.log("簽名進去->" + wechaturl)
axios.post('你自己的獲取WxSignature的介面',
qs.stringify({
noncestr: noncestr,
timestamp: timestamp,
url:wechaturl,
appid: APP_ID
//介面需要的引數，我們這裡需要這4個，具體看你們自己的
})
).then(res => {
let signature = res.data.data.signature.toLowerCase();
wx.config({
debug:false,
appId: APP_ID,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline',
'updateAppMessageShareData',
'updateTimelineShareData',
'hideMenuItems',
'chooseImage'
]
});
//jsApilist裡我們主要用到微信的相機，還隱藏了賦值連結具體看檔案
wx.ready(function () {
// config資訊驗證後會執行ready方法，所有介面呼叫都必須在config介面獲得結果之後，config是一個使用者端的非同步操作，所以如果需要在頁面載入時就呼叫相關介面，則須把相關介面放在ready函數中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面，則可以直接呼叫，不需要放在ready函數中。
//自定義分享
console.log("初始化成功");
setShare(data, callback);
wx.hideMenuItems({// 要隱藏的選單項，只能隱藏「傳播類」和「保護類」按鈕，所有menu項見附錄3
menuList: ['menuItem:copyUrl','menuItem:favorite']
});
});
wx.error(function(res){
console.log(res)
// config資訊驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤資訊可以開啟config的debug模式檢視，也可以在返回的res引數中檢視，對於SPA可以在這裡更新簽名。
});
}).catch(e => {
console.log(e)
})
}
//自定義分享內容
function setShare(data, callback) {
//console.log("分享函數執行成功")
data = data || {};
let timelineTitle = ''
let appMessageTitle = ''
let shareIconUrl = ''
let messageDesc = ''
let shareUrl = ''
timelineTitle = data.timelineTitle || `預設內容`;
appMessageTitle = data.appMessageTitle || `預設內容`;
shareIconUrl = data.shareIconUrl || `預設的iconurl`;
messageDesc = data.messageDesc || '預設內容';
shareUrl = data.shareUrl || '預設連結，這裡注意一下如果url裡面中文，記得encodeURIComponent編碼記得編碼記得編碼（大佬那裡學到的）'
//下面這個老的廢棄的介面和新的我都寫死了，確保萬無一失，因為我看大佬說這裡也有坑，記得看一下jssdk的版本，我的是1.4 有的版本過高或者過低可能沒有某些api使用的時候再查一下
//朋友圈 獲取「分享到朋友圈」按鈕點選狀態及自定義分享內容介面（即將廢棄）
wx.onMenuShareTimeline({
title: timelineTitle, // 分享標題
link: shareUrl , // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: shareIconUrl, // 分享圖示
success: success
});
//發給朋友 獲取「分享給朋友」按鈕點選狀態及自定義分享內容介面（即將廢棄
wx.onMenuShareAppMessage({
title: appMessageTitle, // 分享標題
desc: messageDesc, // 分享描述
link: shareUrl, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: shareIconUrl, // 分享圖示
type: '', // 分享型別,music、video或link，不填預設為link
dataUrl: '', // 如果type是music或video，則要提供資料連結，預設為空
success: success
});
//自定義「分享給朋友」及「分享到QQ」按鈕的分享內容（1.4.0）
wx.updateAppMessageShareData({
title:appMessageTitle, // 分享標題
desc: messageDesc, // 分享描述
link: shareUrl, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: shareIconUrl, // 分享圖示
success: success
})
//自定義「分享到朋友圈」及「分享到QQ空間」按鈕的分享內容（1.4.0）
wx.updateTimelineShareData({
title:timelineTitle, // 分享標題
link: shareUrl, // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: shareIconUrl, // 分享圖示
success: success
})
function success() {
callback && callback();
}
}
//取亂數的
function randomString(len) {
len = len || 5;
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < len; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
微信獲取簽名和自定義分享封裝完成。具體看需求，如果沒有自定義分享我覺得也不用封裝這麼多。
wechaturl哪裡來的？
//路由攔截
router.beforeEach((to, from, next) => {
//UA()==2我這裡2表示ios 1是安卓 判斷機器程式碼可以自行百度
if (UA() == 2) {
//是ios的情況下
if (to.query.wechat !== undefined && to.query.wechat === '1') {
//判斷是不是首次進入 記錄一下url
window.wechaturl = window.location + '';
//然後去獲取簽名
getWxSignature();
} else {
//不是首次進入，那說明就是url沒有小標識 不知道wechaturl哪裡來的點選一下這個上面的wechaturl哪裡來的這個連結進去看一下。
if(window.wechaturl){
//我們的需求是/a頁面是活動頁面，要求分享出去帶上當前使用者的資訊，自定義分享的連結我在/a頁面下的mounted呼叫了一下setShare裡面寫上了就懶得貼了。
if(from.path == "/a"){
//其他頁面自定義分享內容設定成初始化，如果不執行這一步的話，那麼只要進過a頁面，以後的連結分享出去就都是a頁面設定的內容了。如果沒有這個需求可以直接省略，不重要。
setShare();
}
}else{
//這一步！最！最！最！重要
//當頁面被點選重新整理後wechaturl是null，這個時候就要把當前的頁面再做上小標記。記錄一下。
let url = location.href;
if (url.indexOf('?') >= 0) {
url += "&wechat=1";
}else{
url += "?wechat=1";
}
window.wechaturl = url;
setTimeout(function () {
//這一步很救命 試了location.assign(url)和location.replace(url)，最終選擇用location.replace(url)
//相當於載入一下當前介面，如果不執行這一步的話，微信只是重新渲染了dom，而不重新執行wx.config;
//之前我就getWxSignature()發現wx.ready根本不執行。只有重新載入一下才會執行。太重要了。
location.replace(url);
}, 300);
}
}
} else {
//是安卓的情況下
setTimeout(function () {
getWxSignature();
}, 300);
}
//不要忘了不然不執行了
next();
})
如果重新整理後分享自定義內容失效，或者分享無法喚起，或者簽名錯誤invalid signature，記得更新一下url再獲取一下簽名，更新的話記得用 location.replace(url)過載當前頁面，不然不生效。
程式碼寫的不是很好，如果錯誤請指出，或者可以優化的地方也可以告訴我哦~
記錄一下自己的填坑之路，希望可以幫到大家，謝謝前輩大佬們。