詳解nuxt 微信公眾號支付遇到的問題與解決
背景:nuxt為默認(rèn)的history模式,用這個npm 支付weixin-js-sdk,開啟debug模式,盡量在ios下調(diào)試,因為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) { // 支付取消的回調(diào)函數(shù) }, error: function (res) { // 支付失敗的回調(diào)函數(shù) } }) } }) }) } } catch (e) { throw e } }
1、微信調(diào)起支付loading又立刻關(guān)閉,并提示:當(dāng)前頁面的url未注冊:https://xxx/xx/xx/
補充:由于支付路徑太深,ios下,提示支付路徑未注冊出現(xiàn)了各種情況。甚至出現(xiàn)只有我一個人可以調(diào)起支付,其他人測試都不行的情況。
原因:這是因為微信獲取支付路徑的時候,在ios與安卓下是不同的,對于spa應(yīng)用來說,首先我們把我們從微信別的地方點擊鏈接呼出微信瀏覽器時所落在的頁面、或者點擊微信瀏覽器的刷新按鈕時所刷新的頁面,我們叫做落地頁。問題來了,在ios和安卓下呼出微信支付的時候,微信支付判斷當(dāng)前路徑ios為落地頁,安卓則為正常的當(dāng)前頁面的路徑。
解決支付路徑app不統(tǒng)一:用window.location.href 的方式跳轉(zhuǎn)至支付頁
微信獲取支付路徑的方式:以url最后一個/為準(zhǔn),獲取/之前的路徑。
支付路徑例子:例如我們后臺配置的支付的路徑為
https://域名/項目名/(可能有多級目錄)/pay/
那么就會匹配
https://域名/項目名/(可能有多級目錄)/pay/?xxxxxxxxxxxxxxxxxx
注意pay支付路徑后的/一定要加。因為我們做路由跳轉(zhuǎn)很可能是這種形式
https://域名/項目名/(可能有多級目錄)/pay?xxxxxxxxxxxxxxxxxx //錯誤,'?'前沒有'/',會匹配不到正確的路徑。
2、微信調(diào)起支付loading又直接關(guān)閉,提示,訂單已過期。
解決:這個是服務(wù)器那邊的問題,后端直接設(shè)置了固定的訂單時間以跳過支付環(huán)節(jié)。
3、sdk中wx.config中的參數(shù)。
事實上,我們并不需要額外的請求wx.config的參數(shù),因為支付接口返回的支付參數(shù)已經(jīng)有了所有的config參數(shù),除了signature這個加密簽名字段,在支付參數(shù)中對應(yīng)的加密簽名是paysign這個字段,事實上直接用paysign作為signature的值也是沒有問題的。wx.config的參數(shù)差別是分享的時候。需要額外的分享的路徑url
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中關(guān)于字符串替換與截取的知識點匯總
在日常開發(fā)中,經(jīng)常遇到針對字符串的替換、截取,知識點比較碎容易混淆,所以本文為大家整理了一下相關(guān)的知識點,希望對大家有所幫助2023-05-05javascript實現(xiàn)編寫網(wǎng)頁版計算器
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)編寫網(wǎng)頁版計算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08在Layui中實現(xiàn)開關(guān)按鈕的效果實例
今天小編就為大家分享一篇在Layui中實現(xiàn)開關(guān)按鈕的效果實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09使用JavaScript判斷一個元素是否在可視范圍內(nèi)的幾種方法
在Web開發(fā)中,有時我們需要知道一個元素是否在用戶的可視范圍內(nèi),以便執(zhí)行相應(yīng)的操作,比如延遲加載圖片、實現(xiàn)懶加載、或是觸發(fā)動畫效果, 本文將詳細(xì)介紹使用 JavaScript 如何判斷一個元素是否在可視范圍內(nèi)的幾種方法,需要的朋友可以參考下2024-02-02