由于業(yè)務(wù)需要，單頁面應(yīng)用需要進行微信分享，目前要求只分享首頁

準(zhǔn)備工作：

 1.微信公眾號平臺開發(fā)者js安全域名綁定；
 2.頁面的域名必須與當(dāng)前url以及l(fā)ink域名一致；
 3.分享圖片必須為線上地址例如CDN地址，且以http://開頭

在index.vue使用：

微信jsdk引入 需要在當(dāng)前頁面如下：

最開始在main.js引入出現(xiàn)使用失敗 wx 未定義的情況，目前還沒有進一步測試；

mounted()中請求后臺接口獲取config參數(shù)

image.png

注意：一般這個地方會在wx.errror中體現(xiàn)簽名接口（錯誤/正確）；之前一直簽名失敗，原因不得而知（很疑惑很靈異），看到網(wǎng)上有碼友們分享在鏈接傳入的時候 進行轉(zhuǎn)碼encodeURI,然后后端接收再進行解碼，自測后發(fā)現(xiàn) 我所面對的這個項目 是無效的，最終直接用window.location.href.split('#')[0] ，#號后的參數(shù)不需要

打開微信web開發(fā)者工具簽名成功！

分享配置中 link必須與當(dāng)前頁面以及公眾號開發(fā)者配置js安全域名一致，否則即使上面wx.error簽名成功 真機測試也會失敗， （注意：在這個時候微信開發(fā)者工具是可以測試成功的）；

imgUrl必須http://開頭，用本地圖片和https：//同上會出現(xiàn)簽名分享失敗

至此首次分享成功，對僅僅是首次分享成功！

就在我以為成功的時候發(fā)現(xiàn)分享出去的頁面打開再次分享會出現(xiàn) 自定義配置失敗 ，又是一個灰灰的圖片加灰灰的鏈接，看的心涼涼~~~~

解決方案：

發(fā)現(xiàn)問題，微信分享之后會在鏈接后面加上一串參數(shù)from等 為了統(tǒng)計頁面來源， 當(dāng)拿到這樣的地址再請求簽名就會出現(xiàn)報錯，

我的解決方案是：

1.先提取參數(shù)判斷

image.png

2.拿到當(dāng)前頁面參數(shù)判斷window.location.href值

image.png

如果有朋友看到，有更好的方案歡迎留言哦！謝謝