React / Vue 前後端分離專案實現微信分享教程
小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。
網上非常多的微信分享例子和教程，但是都不全面，甚至不少錯誤。自己根據微信官方文件踩了好幾個坑才擼成功。痛定思痛，寫下這篇文章，詳細的告訴您 React / Vue 前後端分離專案的如何實現微信分享。
一. 申請微信訂閱號/服務號
這個是必要條件。需要注意的是個人的微信訂閱號是沒有微信分享許可權的。
二. 配置 JS 介面安全域名
登入微信公眾平臺，配置安全域名
安全域名
假設你的前端專案訪問的主域名是 abc.com，那就填 abc.com。
三.後端獲取微信簽名
這個步驟需要後端伺服器和微信伺服器進行互動，獲得「網頁授權access_token」，根據 access_token 把關鍵的幾個引數算出來，傳給前端。這幾個引數分別是：appId , timestamp , nonceStr , signature
（因為本文主要針對前端開發者，後端的內容就不展開了）
後端要算出這幾個引數不僅僅需要 access_token，還需要一個 URL 引數。這個 URL 是前端帶有分享功能頁面的當前 URL。
比如 www.abc.com/123 這個頁面需要微信分享功能，那麼就把這個 URL 傳給後端，後端算出來引數後再返回給前端。
注意，只要 URL 發生變化，都得需要重新獲取微信分享引數。除非個別頁面不需要微信分享功能。
URL 配置
如果前端用的是react-router 或者 vue-router ，請儘量用 history 模式。如果你用的是 hash 模式，那麼你給後端傳遞 URL 是有坑的，具體可以看這篇文章。
四. 前端編寫分享程式碼
開啟微信分享官方文件
步驟大概是這樣的
第一步我們可以直接使用 weixin-js-sdk
npm install weixin-js-sdk --save
下面是前端程式碼：
import wx from 'weixin-js-sdk'
const ua = window.navigator.userAgent.toLowerCase()
// 如果不在微信瀏覽器內，微信分享也沒意義了對吧？這裡判斷一下
if (ua.indexOf('micromessenger') < 0) return false
// 最好在在 router 的全域性鉤子裡呼叫這個方法，每次頁面的 URL 發生變化時，都需要重新獲取微信分享引數
// 如果你的 router 使用的是 hash 形式，應該不用每次都重新獲取微信分享引數
const data = $ajax.post({
url: '當前頁面的 URL',
// xxx
// xxx
})
wx.config({
debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
})
wx.ready(() => {
//分享給朋友
wx.onMenuShareAppMessage({
title: '', // 分享標題
desc: '', // 分享描述
link: '', // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖示
type: '', // 分享型別,music、video或link，不填預設為link
dataUrl: '', // 如果type是music或video，則要提供資料鏈接，預設為空
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '', // 分享標題
link: '', // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: '', // 分享圖示
success: function () {
// 使用者確認分享後執行的回撥函式
},
cancel: function () {
// 使用者取消分享後執行的回撥函式
}
})
})
程式碼親測是沒問題的，你可以下載一個微信開發者工具，開啟對應的網頁，測試沒問題之後再用手機測試微信分享。
五. 關於 link 的坑
image.png
注意！！一定要按照規定填寫 link 欄位，不然微信開發者工具裡測試成功，但是用手機測試還是會失敗！！！
link // 分享連結，該連結域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
六.路由選擇 history 模式還是 hash模式？
history 優點
- URL 好看，沒有 #
history 缺點
- 如果你每一個頁面都需要微信分享，那麼每一個子路由都需要用當前的 URL 換取微信分享 config
- 需要額外配置 nginx
hash 優點
- 無需配置 nginx
- 只需要用域名請求一次微信分享 config ，全部的子頁面都能微信分享
hash 缺點
- URL 裡面有個 # ，不好看。但是如果你的網站是移動端的話就無所謂了。URL 不明顯。
hash 的坑：拿 URL 換取微信分享 config 時，最好這麼寫：
const url = window.location.href.split('#')[0]
或者直接寫主域名。例如http://wwww.baidu.com/
最後一定要加斜槓，別問我為什麼。。。
10-24 更新：
開發的時候，一定要下載一個微信開發者工具，在那裡面進行微信分享測試。程式碼開啟 debug 模式後，如果簽名錯誤，微信開發者工具會直接提醒你的。判斷簽名是否正確非常重要。
作者：Yi罐可樂
連結：https://www.jianshu.com/p/e13b639ace32
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！
