這篇文章將為大家詳細講解有關nuxt如何解決微信公眾號支付遇到的問題,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
十多年的文登網站建設經驗,針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。全網營銷推廣的優(yōu)勢是能夠根據用戶設備顯示端的尺寸不同,自動調整文登建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現(xiàn)優(yōu)雅布局與設計,從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)從事“文登網站設計”,“文登網站推廣”以來,每個客戶項目都認真落實執(zhí)行。
背景:nuxt為默認的history模式,用這個npm 支付weixin-js-sdk,開啟debug模式,盡量在ios下調試,因為alert彈窗的信息會更多。
async onPay (config) { try { const wxUrl = window.location.href//分享的路徑 const res = await $axios.$get("")//獲取配置sdk參數(shù),包括微信分享的參數(shù) if (res.status === 0) { const {data} = res wx.config({ debug: true, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ['chooseWXPay'] }) wx.ready(function () { wx.checkJsApi({ jsApiList: ['chooseWXPay'], success: (res) => { wx.chooseWXPay({ timestamp: config.timestamp, nonceStr: config.nonceStr, package: config.package, signType: config.signType, paySign: config.paySign, // 支付簽名 success: function (res) { }, cancel: function (res) { // 支付取消的回調函數(shù) }, error: function (res) { // 支付失敗的回調函數(shù) } }) } }) }) } } catch (e) { throw e } }
1、微信調起支付loading又立刻關閉,并提示:當前頁面的url未注冊:https://xxx/xx/xx/
補充:由于支付路徑太深,ios下,提示支付路徑未注冊出現(xiàn)了各種情況。甚至出現(xiàn)只有我一個人可以調起支付,其他人測試都不行的情況。
原因:這是因為微信獲取支付路徑的時候,在ios與安卓下是不同的,對于spa應用來說,首先我們把我們從微信別的地方點擊鏈接呼出微信瀏覽器時所落在的頁面、或者點擊微信瀏覽器的刷新按鈕時所刷新的頁面,我們叫做落地頁。問題來了,在ios和安卓下呼出微信支付的時候,微信支付判斷當前路徑ios為落地頁,安卓則為正常的當前頁面的路徑。
解決支付路徑app不統(tǒng)一:用window.location.href 的方式跳轉至支付頁
微信獲取支付路徑的方式:以url最后一個/為準,獲取/之前的路徑。
支付路徑例子:例如我們后臺配置的支付的路徑為
https://域名/項目名/(可能有多級目錄)/pay/
那么就會匹配
https://域名/項目名/(可能有多級目錄)/pay/?xxxxxxxxxxxxxxxxxx
注意pay支付路徑后的/一定要加。因為我們做路由跳轉很可能是這種形式
https://域名/項目名/(可能有多級目錄)/pay?xxxxxxxxxxxxxxxxxx //錯誤,'?'前沒有'/',會匹配不到正確的路徑。
2、微信調起支付loading又直接關閉,提示,訂單已過期。
解決:這個是服務器那邊的問題,后端直接設置了固定的訂單時間以跳過支付環(huán)節(jié)。
3、sdk中wx.config中的參數(shù)。
事實上,我們并不需要額外的請求wx.config的參數(shù),因為支付接口返回的支付參數(shù)已經有了所有的config參數(shù),除了signature這個加密簽名字段,在支付參數(shù)中對應的加密簽名是paysign這個字段,事實上直接用paysign作為signature的值也是沒有問題的。wx.config的參數(shù)差別是分享的時候。需要額外的分享的路徑url
關于“nuxt如何解決微信公眾號支付遇到的問題”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。