最近用vue-cli3做微信公衆號，使用了hiatory模式，其中也是波折不斷，自己也是鬱悶了好幾天才把問題解決掉。
首先先安裝微信js-sdk
npm install weixin-js-sdk --save
然後在哪個頁面裏面用到微信的js api就把包導入進去
import wx from 'weixin-js-sdk'
基本的配置都好了以後， 我們就來說說微信分享過程中遇到的坑。
1.微信分享遇到的坑1
微信官方文檔上有下面一段話：
19.目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題已在Android6.2中修復
在實際的測試和大量真實數據收集後發現，Android4.4+都是支持pushState的，也就是說，沒有遇到官方文檔所訴的問題。(此番調研後才決定採用histpry模式進行實施的，導致ios下踩了坑)
IOS下遇到的問題：
微信invalid signature簽名的問題，安卓下面不會遇到簽名的問題，因爲IOS版微信打開網頁，顯示的只是初始網址，其他網址都是從這個網址引申，相當於它提供的，就相當於從百度進其他網站產生的流量百度也要拿流量費一樣，相當於以當前網址作爲跳板，服務器差不多，這是軟件的問題，無法改變，但是並不影響你從其他地方打開這個網頁，只需要左上角選擇瀏覽器打開，網址自然會恢復當前該顯示的網址，安卓上不會有這一種問題，可以直接獲取當前的URL。
解決辦法：
就是在第一次進入的時候，把當前的URL存起來，後面每次簽名的時候都用這個URL去做簽名。這裏安卓和ios要做一下區分判斷，IOS取第一次進入頁面的URL，安卓直接取當前的URL。
getWxJsSDKInfo() {
// 權限接口
if (/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)) {
this.url = this.$store.getters.getUrl;
console.log(this.url);
} else {
this.url = window.location.href;
console.log(`url: ${this.url}`);
}
getGzhJsSign({url: this.url}).then((response) => {
const resData = response.data;
console.log(`getGzhJsSign:${JSON.stringify(resData)}`);
wx.config({
debug: false,
appId: resData.appId,
timestamp: resData.timestamp,
nonceStr: resData.noncestr,
signature: resData.signature,
jsApiList: ['updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage'],
});
});
wx.ready(() => {
this.isWxReady = true;
console.log('wx js加載成功');
// wx.checkJsApi({
// jsApiList: ['updateAppMessageShareData',
// 'updateTimelineShareData',
// 'onMenuShareTimeline',
// 'onMenuShareAppMessage'],
// success(res) {
// alert(`checkJsApi :${JSON.stringify(res)}`);
// },
// });
});
},
2.微信分享遇到的坑2
自定義的分享寫完以後，點擊分享以後，還要點擊右上角微信自己的分享功能，才能把頁面分享出去，也就是說自定義分享要兩步，當時就是因爲自己不知道還有這一步操作，開啓debug模式，又沒有報錯，微信官方又沒有明確的說明，自己也不知道什麼原因，所以也是折騰了自己好長時間，後來搞明白以後，跟產品溝通了一下，設計了一個引導頁，點擊自定義分享按鈕以後，引導用戶再點擊微信的分享功能。
3.微信分享遇到的坑3
分享鏈接傳中文參數的問題
由於微信瀏覽器對中文進行了編碼，所以對於中文參數，要進行處理，不能直接傳遞中文，要不然就會分享不成功，我這裏用的是Base64先對中文進行編碼，然後再傳參數，但是一定要記得，用參數的時候再解碼轉回來。
4.微信分享遇到的坑4
js-sdk 1.4.0以上的版本，用新的分享接口，老的分享接口也要寫上，否則分享也會報錯。
inviteSpeed() {
const userInfo = {};
userInfo.serialNo = this.serialNo;
userInfo.queryType = Base64.encodeURI(this.queryType);
userInfo.currentUserName = Base64.encodeURI(this.currentUserName);
console.log(`reportProcessDetails userInfo ${userInfo}`);
const that = this;
wx.updateAppMessageShareData({
title: `${this.currentUserName}的報告正在生成中，需要您幫加速`,
desc: '完成加速拿好禮，不容錯過哦',
link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
success() {
that.isShowfloatLayer = true;
},
fail() {
alert('分享失敗！');
},
complete() {
// alert('shareFile complete 1');
},
});
wx.updateTimelineShareData({
title: `${this.currentUserName}的報告正在生成中，需要您幫加速`,
link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
success() {
// alert('點擊右上角分享');
},
fail() {
alert('分享失敗！');
},
complete() {
// alert('shareFile complete 2');
},
});
wx.onMenuShareTimeline({
title: `${this.currentUserName}的報告正在生成中，需要您幫加速`,
link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
success(res) {
console.log(res);
},
});
wx.onMenuShareAppMessage({
title: `${this.currentUserName}的報告正在生成中，需要您幫加速`,
desc: '完成加速拿好禮，不容錯過哦',
link: `${envObject.webUrl}/ReportSpeed?applySerialNo=${userInfo.serialNo}&queryType=${userInfo.queryType}¤tUserName=${userInfo.currentUserName}`,
imgUrl: 'https://cmt.bdxiaodai.com/cmGzh/img/report_speed_erweima.8acc5583.png',
type: 'link',
dataUrl: '',
success(res) {
console.log(res);
},
});
},