網上非常多的微信分享例子和教程，但是都不全面，甚至不少錯誤。自己根據微信官方文檔踩了好幾個坑才擼成功。痛定思痛，寫下這篇文章，詳細的告訴您 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 發生變化，都得需要重新獲取微信分享參數。除非個別頁面不需要微信分享功能。
如果前端用的是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 的坑
注意！！一定要按照規定填寫 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 模式后，如果簽名錯誤，微信開發者工具會直接提醒你的。判斷簽名是否正確非常重要。
如果該文章對您有幫助，點贊支持下~
