最近做H5微信分享，用的微信jssdk來做，現記錄下一些過程和遇到的問題。

一、公眾號配置

微信官方文檔?已經說明了使用步驟，公眾號配置比較模糊，主要是要配置ip白名單和綁定js接口安全域名：

1、檢查分享接口權限是否已獲得，在微信公眾號的【設置與開發】-【接口權限】，放圖如下：

2、獲取開發者密碼、設置IP白名單，在微信公眾號的【設置與開發】-【基本配置】，放圖：

????????開發者密碼，自己獲取后記下來就行；IP白名單將本地IP、域名所屬服務器IP增加進去(ps: 注意不需要加https://或者http://)

?

3：綁定域名，在微信公眾號【設置與開發】-【公眾號設置】-【功能設置】，放圖：

? ? ? ? 先將txt文件按照要求上傳至服務器，我一般只寫域名xxx.com，所以將txt文件放域名跟目錄下，txt放入服務器后，才可保存添加成功。

?二、遇到的問題

官方文檔也有一些常見問題的處理方法，也可以先看看排查下。

1、Invalid Signature

按照官方文檔的步驟去排查錯誤：
（1）確認簽名算法正確，可用微信提供的http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。——這個問題主要在后臺那里，要點：1.公眾號后臺配置ip白名單以及JS安全域名。重點：ip白名單記得要配后臺線上服務器的ip，否則線上后臺是拿不到asscee_token的，access_token為null時也可以參與signature的計算，很坑！！！建議讓后臺把access_token和jsapi_ticket返回或者讓后臺看看到底有沒有返回值；2.記得拿公眾號的APPID去計算，一定要后臺親眼去比對，APPID對不對！（2）確認config中nonceStr（js中駝峰標準大寫S）, timestamp與用以簽名中的對應noncestr, timestamp一致。——這一步沒啥好說的，自己好好檢查

（3）確認url是頁面完整的url(請在當前頁面alert(location.href.split(‘#’)[0])確認)，包括’http(s)://’部分，以及’？’后面的GET參數部分,但不包括’#’hash后面的部分。——記得 encodeURIComponent(location.href.split(‘#’)[0])

（4）確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。

（5）確保一定緩存access_token和jsapi_ticket。

（6）確保你獲取用來簽名的url是動態獲取的，如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名，前端需要用js獲取當前頁面除去’#’hash部分的鏈接（可用location.href.split(‘#’)[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗。**——記得前端把當前頁面路徑（encodeURIComponent(location.href.split(‘#’)[0])）ajax 傳給后臺 **

2、the permission value is offline verifying

（1）確認config正確通過。——記得在頁面掛在完畢去注入JSSDK，如果有路由攔截跳轉的，要跳轉完畢后再去注入，要保證傳給后端獲取簽名信息的url和當前頁面的url是一模一樣的，分享出去的連接倒是可以不一樣（我有個需求就是列表頁分享出去后用戶進入要都跳去首頁，所以我就在列表頁傳首頁連接去獲取簽名信息，然后把首頁連接分享出去，結果一直無法分享）（encodeURIComponent(location.href.split(‘#’)[0])）

（2）如果是在頁面加載好時就調用了JSAPI，則必須寫在wx.ready的回調中。——wx.ready的回調去寫分享邏輯

（3）確認config的jsApiList參數包含了這個JSAPI。

3、permission denied

（1）先去微信公眾平臺 看看公眾號沒有權限使用這個JSAPI

（2）可以調用jweixin.checkJsApi，記得把debug打開，微信開發者工具和真機報的錯誤很大可能會不一樣。引用的最新的jssdk 1.6；也用了最新的分享給好友的方法；真機 updateAppMessageShareData: true; updateTimelineShareData: true; config: ok，就是分享不了，我真是吐了，如果遇到同樣的情況，記得jsApiList加入 onMenuShareAppMessage，沒錯就是老版本，那個即將廢棄的分享api

4、invalid url domain

? ? ?配置js接口安全域名的時候切記不要把http://或者https://填進去，我就是這么干的，結果導致了這個錯誤，有點坑

最后貼下微信分享主要代碼：

/*** 是否在微信瀏覽器中打開*/ export function isWeiXin(): boolean {const ua = window.navigator.userAgent.toLowerCase()const match = ua.match(/MicroMessenger/i)if (match === null) {return false}if (match.includes('micromessenger')) {return true}return false }/*** 微信分享* @param {data}: 微信注冊配置信息* @param {shareData}: 分享信息*/export interface ShareDataProps {title: string // 分享標題desc?: string // 分享描述link: string // 分享鏈接，該連接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致imgUrl?: string // 分享圖標 }export const wxShare = (shareData: ShareDataProps) => {if (!isWeiXin()) returnconst default_img = location.origin + '/fs.dataexa.com/dataexa/rtdi/express/weixin_share_log.png'getWxConfigParams({url: location.href,}).then((res) => {const { appId, timestamp, nonceStr, signature } = reswx.config({debugger: false,appId,timestamp,nonceStr,signature,jsApiList: ['checkJsApi','updateAppMessageShareData','updateTimelineShareData','onMenuShareAppMessage', // 舊的接口，即將廢棄(網上說是要把舊接口也填上去，不然注冊會失敗)'onMenuShareTimeline', // 舊的接口，即將廢棄'onMenuShareQQ', // 舊接口，分享給QQ好友'onMenuShareQZone', // 舊接口，分享到QQ空間],})wx.ready(() => {// 分享到朋友圈及QQ空間wx.updateAppMessageShareData({title: shareData.title,link: shareData.link,desc: shareData?.desc || '',imgUrl: shareData?.imgUrl || default_img,})// 分享給朋友及分享到QQwx.updateTimelineShareData({title: shareData.title,link: shareData.link,desc: shareData?.desc || '',imgUrl: shareData?.imgUrl || default_img,})wx.error((err: any) => {// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名console.log('驗證失敗', err)})})}) }

總結

以上是生活随笔為你收集整理的H5微信分享记录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。