vue前后分離調(diào)起微信支付
本文實(shí)例為大家分享了vue前后分離調(diào)起微信支付的具體代碼,供大家參考,具體內(nèi)容如下
@ VUE調(diào)起微信支付
VUE前后分離調(diào)起微信支付
支付很簡(jiǎn)單,但每次都是在網(wǎng)上直接扒下來(lái)使用,老年人記憶,于是就自己記錄一下,方便以后快速的粘貼復(fù)制;
第一步: VUE 需要安裝 微信支付模塊
// npm install weixin-js-sdk import wx from "weixin-js-sdk";
第二步:封裝 微信支付方法
wexinPay(data, cb, errorCb) { //獲取后臺(tái)傳入的數(shù)據(jù) let appId = data.appId; let timestamp = data.timeStamp; let nonceStr = data.nonceStr; let signature = data.signature; let packages = data.package; let paySign = data.paySign; let signType = data.signType; console.log('發(fā)起微信支付') //下面要發(fā)起微信支付了 wx.config({ debug: false, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。 appId: appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí) timestamp: timestamp, // 必填,生成簽名的時(shí)間戳 nonceStr: nonceStr, // 必填,生成簽名的隨機(jī)串 signature: signature, // 必填,簽名,見(jiàn)附錄1 jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)附錄2 }); wx.ready(function () { wx.chooseWXPay({ timestamp: timestamp, // 支付簽名時(shí)間戳,注意微信jssdk中的所有使用timestamp字段均為小寫(xiě)。但最新版的支付后臺(tái)生成簽名使用的timeStamp字段名需大寫(xiě)其中的S字符 nonceStr: nonceStr, // 支付簽名隨機(jī)串,不長(zhǎng)于 32 位 package: packages, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值,提交格式如:prepay_id=***) signType: signType, // 簽名方式,默認(rèn)為'SHA1',使用新版支付需傳入'MD5' paySign: paySign, // 支付簽名 success: function (res) { // 支付成功后的回調(diào)函數(shù) cb(res); }, fail: function (res) { //失敗回調(diào)函數(shù) errorCb(res); } }); }); wx.error(function (res) { // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù),如簽名過(guò)期導(dǎo)致驗(yàn)證失敗,具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看,也可以在返回的res參數(shù)中查看,對(duì)于SPA可以在這里更新簽名。 /*alert("config信息驗(yàn)證失敗");*/ }); }
第三步:向后臺(tái)請(qǐng)求數(shù)據(jù) 成功獲取 轉(zhuǎn)入微信支付方法 調(diào)起 微信支付
//請(qǐng)求后臺(tái)接口獲取數(shù)據(jù) 準(zhǔn)備進(jìn)行微信支付 that.axios.post("user/recommend", data).then(res => { //成功狀態(tài)下 if (res.data.status) { // 存儲(chǔ)微信支付數(shù)據(jù)data let data = res.data.data; console.log("即將跳轉(zhuǎn)微信支付"); //函數(shù)為分裝過(guò)得 (就是調(diào)用微信支付) http.wexinPay( { appId: data.appId, nonceStr: data.nonceStr, package: data.package, paySign: data.paySign, signType: data.signType, timeStamp: data.timeStamp }, //成功回調(diào)函數(shù) res => { that.$router.push({ path: "/vip" }); } ); } else { that.$message.error(res.data.message); } });
PS: 注意查看數(shù)據(jù)是夠?qū)?yīng) ,后臺(tái)有時(shí)候可能會(huì)把提現(xiàn)和支付搞混,保證數(shù)據(jù)正確性;
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開(kāi)始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11Vue?使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類(lèi)型大小同名等進(jìn)行限制
個(gè)人在做文件上傳功能的時(shí)候,踩過(guò)不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動(dòng)上傳文件限制上傳文件類(lèi)型大小同名等進(jìn)行限制問(wèn)題,感興趣的朋友一起看看吧2024-02-02vue-router中query和params的區(qū)別解析
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁(yè)面應(yīng)用,這篇文章主要介紹了vue-router中query和params的區(qū)別 ,需要的朋友可以參考下2022-10-10Vue Element前端應(yīng)用開(kāi)發(fā)之根據(jù)ABP后端接口實(shí)現(xiàn)前端展示
本篇著重介紹基于ABP后端接口信息,實(shí)現(xiàn)對(duì)前端界面的開(kāi)發(fā)工作。2021-05-05Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例
這篇文章主要介紹了基于vue+echarts 數(shù)據(jù)可視化大屏展示的方法示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-03-03