最近做vue項目的微信公眾號項目，涉及到微信分享，記錄一下心得，以備后用，vue路由用的是hash模式；
該項目只是公眾號里面的h5鏈接，不需要獲取code獲取access_token的票據，因此前端只需要將當前頁面鏈接處理后發給后端回去分享參數即可；
分享參數包含：
wx.updateTimelineShareData({ title: option.title, // 分享標題 link: option.link, // 分享鏈接，該鏈接必須與當前頁面對應的公眾號的JS安全域名一致 imgUrl: option.imgUrl, // 分享圖標 300*300 desc: option.desc, // 分享描述 success (res) { // 用戶成功分享后執行的回調函數 option.success(res) }, cancel (error) { // 用戶取消分享后執行的回調函數 option.error(error) } })
1、第一步獲取頁面url；
通過window.location.href.split('#')[0]獲取到頁面的url，而且需要encodeURIComponent處理后發給后端來獲取簽名，否則簽名無效；頁面鏈接需要是動態獲的，否則將導致分享后的頁面簽名失敗。
2、第二步定義分享參數；
分享鏈接要求該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致，就是該鏈接必須是在公眾號的JS安全域名接口中配置好的；
分享圖片大小最好是300*300的，大小沒有查到是否限制，但是盡量小，避免出現分享的鏈接無法記載出來圖片；
3、第三步，調試；
由於公眾號的各種限制，導致無法進行本地調試（大神請忽略，具體實現請百度），因此項目最好有個測試環境，新項目也可以直接在線上環境測試；
因為分享參數初始化的時候會判斷當前頁面的url與分享的link是否一致，不一致會報錯，就導致無法在本地調試分享；
4、第四步解決ios和安卓分享后鏈接不一致的問題；
測試環境在ios端，分享參數正常，點擊后，根據vue路由跳轉也正常，ios分享給安卓后的鏈接，安卓也可以正常跳轉頁面，但是安卓從測試環境進去后，分享出來的參數顯示正常，但是無法跳轉到指定頁面，只能跳轉到路由首頁；
通過復制鏈接發現，安卓獲取的href是無法獲取到#以及后面的路由參數的，導致頁面只能是路由首頁。但是安卓通過ios分享的鏈接點擊進去后，再點擊分享，發現路由跳轉是正常的。
也就是說，如果安卓是通過帶有#和路由參數的路徑進去的項目，那么再獲取的href則跟ios是一致的，路由也是正常跳轉的；
處理方案有兩種：第一種是判斷當前機型是ios還是安卓，然后對獲取的link進行不同的處理；ios無需處理，安卓拼接‘#’和當前路由參數即可；
第二種是公眾號的點擊鏈接不要只寫域名，而是加上帶有#和默認路由的，這樣安卓點擊進去獲取的href也是正常的；