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、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用!