網(wǎng)上非常多的微信分享例子和教程烦衣，但是都不全面，甚至不少錯(cuò)誤掩浙。自己根據(jù)微信官方文檔踩了好幾個(gè)坑才擼成功花吟。痛定思痛，寫(xiě)下這篇文章厨姚，詳細(xì)的告訴您 React / Vue 前后端分離項(xiàng)目的如何實(shí)現(xiàn)微信分享衅澈。
一. 申請(qǐng)微信訂閱號(hào)/服務(wù)號(hào)
這個(gè)是必要條件。需要注意的是個(gè)人的微信訂閱號(hào)是沒(méi)有微信分享權(quán)限的谬墙。
二. 配置 JS 接口安全域名
登錄微信公眾平臺(tái)今布，配置安全域名
假設(shè)你的前端項(xiàng)目訪問(wèn)的主域名是 abc.com，那就填 abc.com拭抬。
三.后端獲取微信簽名
這個(gè)步驟需要后端服務(wù)器和微信服務(wù)器進(jìn)行交互部默，獲得「網(wǎng)頁(yè)授權(quán)access_token」，根據(jù) access_token 把關(guān)鍵的幾個(gè)參數(shù)算出來(lái)造虎，傳給前端傅蹂。這幾個(gè)參數(shù)分別是：
appId , timestamp , nonceStr , signature
（因?yàn)楸疚闹饕槍?duì)前端開(kāi)發(fā)者，后端的內(nèi)容就不展開(kāi)了）
后端要算出這幾個(gè)參數(shù)不僅僅需要 access_token算凿，還需要一個(gè) URL 參數(shù)份蝴。這個(gè) URL 是前端帶有分享功能頁(yè)面的當(dāng)前 URL。
比如 www.abc.com/123 這個(gè)頁(yè)面需要微信分享功能澎媒，那么就把這個(gè) URL 傳給后端搞乏，后端算出來(lái)參數(shù)后再返回給前端。
注意戒努，只要 URL 發(fā)生變化请敦，都得需要重新獲取微信分享參數(shù)。除非個(gè)別頁(yè)面不需要微信分享功能储玫。
如果前端用的是react-router 或者 vue-router 侍筛，請(qǐng)盡量用 history 模式。如果你用的是 hash 模式撒穷，那么你給后端傳遞 URL 是有坑的匣椰，具體可以看這篇文章。
四. 前端編寫(xiě)分享代碼
打開(kāi)微信分享官方文檔
步驟大概是這樣的
- 引入微信 JS sdk
- 通過(guò)config接口注入權(quán)限驗(yàn)證配置
- 步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置
- 微信分享接口調(diào)用
第一步我們可以直接使用 weixin-js-sdk 這個(gè)庫(kù)
npm install weixin-js-sdk --save
下面是前端代碼：
import wx from 'weixin-js-sdk'
const ua = window.navigator.userAgent.toLowerCase()
// 如果不在微信瀏覽器內(nèi)端礼，微信分享也沒(méi)意義了對(duì)吧禽笑？這里判斷一下
if (ua.indexOf('micromessenger') < 0) return false
// 最好在在 router 的全局鉤子里調(diào)用這個(gè)方法入录，每次頁(yè)面的 URL 發(fā)生變化時(shí)，都需要重新獲取微信分享參數(shù)
// 如果你的 router 使用的是 hash 形式佳镜，應(yīng)該不用每次都重新獲取微信分享參數(shù)
const data = $ajax.post({
url: '當(dāng)前頁(yè)面的 URL',
// xxx
// xxx
})
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)僚稿，若要查看傳入的參數(shù)，可以在pc端打開(kāi)蟀伸，參數(shù)信息會(huì)通過(guò)log打出蚀同，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填啊掏，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填蠢络，生成簽名的時(shí)間戳
nonceStr: '', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填迟蜜，簽名刹孔，見(jiàn)附錄1
jsApiList: [
'onMenuShareAppMessage',
'onMenuShareTimeline'
] // 必填，需要使用的JS接口列表小泉，所有JS接口列表見(jiàn)附錄2
})
wx.ready(() => {
//分享給朋友
wx.onMenuShareAppMessage({
title: '', // 分享標(biāo)題
desc: '', // 分享描述
link: '', // 分享鏈接芦疏，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
type: '', // 分享類(lèi)型,music冕杠、video或link微姊，不填默認(rèn)為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接分预，默認(rèn)為空
success: function () {
// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
})
//分享到朋友圈
wx.onMenuShareTimeline({
title: '', // 分享標(biāo)題
link: '', // 分享鏈接兢交，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
imgUrl: '', // 分享圖標(biāo)
success: function () {
// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
})
})
代碼親測(cè)是沒(méi)問(wèn)題的，你可以下載一個(gè)微信開(kāi)發(fā)者工具笼痹，打開(kāi)對(duì)應(yīng)的網(wǎng)頁(yè)配喳，測(cè)試沒(méi)問(wèn)題之后再用手機(jī)測(cè)試微信分享。
五. 關(guān)于 link 的坑
注意５矢伞晴裹！一定要按照規(guī)定填寫(xiě) link 字段，不然微信開(kāi)發(fā)者工具里測(cè)試成功救赐，但是用手機(jī)測(cè)試還是會(huì)失斀拧！＞酢泌绣！
link // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
六.路由選擇 history 模式還是 hash模式预厌？
history 優(yōu)點(diǎn)
- URL 好看阿迈，沒(méi)有 #
history 缺點(diǎn)
- 如果你每一個(gè)頁(yè)面都需要微信分享，那么每一個(gè)子路由都需要用當(dāng)前的 URL 換取微信分享 config
- 需要額外配置 nginx
hash 優(yōu)點(diǎn)
- 無(wú)需配置 nginx
- 只需要用域名請(qǐng)求一次微信分享 config 轧叽，全部的子頁(yè)面都能微信分享
hash 缺點(diǎn)
- URL 里面有個(gè) # 苗沧，不好看刊棕。但是如果你的網(wǎng)站是移動(dòng)端的話就無(wú)所謂了。URL 不明顯待逞。
hash 的坑：拿 URL 換取微信分享 config 時(shí)鞠绰，最好這么寫(xiě)：
const url = window.location.href.split('#')[0]
或者直接寫(xiě)主域名。例如http://wwww.baidu.com/
最后一定要加斜杠飒焦，別問(wèn)我為什么蜈膨。。牺荠。
10-24 更新：
開(kāi)發(fā)的時(shí)候翁巍，一定要下載一個(gè)微信開(kāi)發(fā)者工具，在那里面進(jìn)行微信分享測(cè)試休雌。代碼開(kāi)啟 debug 模式后灶壶，如果簽名錯(cuò)誤，微信開(kāi)發(fā)者工具會(huì)直接提醒你的杈曲。判斷簽名是否正確非常重要驰凛。
如果該文章對(duì)您有幫助，點(diǎn)贊支持下~
