微信的坑，哭著也要填完，
小白選手剛接觸微信公眾號網頁，產品出來個需求，要求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)多載當前頁面，不然不生效，
代碼寫的不是很好，如果錯誤請指出，或者可以優化的地方也可以告訴我哦~
記錄一下自己的填坑之路，希望可以幫到大家，謝謝前輩大佬們，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/177369.html
標籤：其他