| app內(nèi)嵌h5支付功能，跳轉(zhuǎn)支付寶&微信，vue組件 | 您所在的位置：網(wǎng)站首頁(yè) › h5有支付功能嗎 › app內(nèi)嵌h5支付功能，跳轉(zhuǎn)支付寶&微信，vue組件 |
|
一、功能梳理
app內(nèi)嵌h5涉及到支付的功能，ios非實(shí)物商品實(shí)付需要使用ios原生支付方式，實(shí)物商品則可以三方支付，主要的實(shí)現(xiàn)思路為后端返回跳轉(zhuǎn)支付寶或微信的支付scheme鏈接，前端進(jìn)行跳轉(zhuǎn)支付，同時(shí)需要實(shí)時(shí)查詢用戶的支付狀態(tài)。 整個(gè)過(guò)程中復(fù)雜的部分在于查詢用戶支付狀態(tài)的體驗(yàn)方面，需要保證用戶在支付成功、支付失敗、跳轉(zhuǎn)支付寶、微信回來(lái)或者沒(méi)有跳轉(zhuǎn)支付寶微信等未知的行為下的用戶體驗(yàn)。 組件內(nèi)容為底部升起的支付選擇彈窗，可以選擇支付寶或者微信。 二、實(shí)現(xiàn)步驟用戶進(jìn)行下單作，前端調(diào)用下單接口，成功則返回三方支付app跳轉(zhuǎn)鏈接，前端進(jìn)行跳轉(zhuǎn) 跳轉(zhuǎn)三方app同時(shí)進(jìn)行查詢訂單接口輪訓(xùn)，實(shí)時(shí)獲取訂單狀態(tài)，輪訓(xùn)時(shí)間定位30s，依據(jù)需求調(diào)整 用戶如果支付時(shí)間超過(guò)了30s未返回我們app的情況下，需要針對(duì)此種情況進(jìn)行處理，捕捉用戶返回我們app的情況 三、組件可支配參數(shù)&事件設(shè)置設(shè)置支持參數(shù)2個(gè)、事件4個(gè)，分別為 參數(shù)： successStatus: { default: '1' }, // 支付成功的狀態(tài)碼，默認(rèn)1 errorStatus: { default: '2' } // 支付失敗的狀態(tài)碼，默認(rèn)2事件： @payMoney="payMoney" // 下單事件 @payStatus="payStatus" //查詢支付狀態(tài)事件 @succcessFunction="succcessFunction" // 成功支付作 @errorFunction="errorFunction" // 失敗實(shí)付作 四、從支付app返回，事件捕獲方法為了防止用戶在支付時(shí)間超過(guò)我們?cè)O(shè)置輪訓(xùn)時(shí)長(zhǎng)情況，需要監(jiān)聽(tīng)用戶從支付app返回當(dāng)前頁(yè)面，來(lái)進(jìn)行查詢支付狀態(tài)作。方法為監(jiān)聽(tīng)頁(yè)面顯示or隱藏事件 reloadState () { // 添加監(jiān)聽(tīng)器 if (typeof document.hidden !== 'undefined') { this.hidden = 'hidden'; this.visibilityChange = 'visibilitychange'; } else if (typeof document.mozHidden !== 'undefined') { this.hidden = 'mozHidden'; this.visibilityChange = 'mozvisibilitychange'; } else if (typeof document.msHidden !== 'undefined') { this.hidden = 'msHidden'; this.visibilityChange = 'msvisibilitychange'; } else if (typeof document.webkitHidden !== 'undefined') { this.hidden = 'webkitHidden'; this.visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(this.visibilityChange, this.forceUpdate); }, forceUpdate () { if (document.visibilityChange === this.hidden) { } else { this.searchTimer(); } }, 五、組件源碼 支付寶支付 微信支付 支付 支付中 export default { data () { return { isApp: !!browers.appUA, timer: null, loadingPay: false, orderNo: '', // 訂單號(hào) payStatus: '' // 訂單支付狀態(tài) }; }, props: { successStatus: { default: '1' }, // 支付成功的狀態(tài)碼，默認(rèn)1 errorStatus: { default: '2' } // 支付失敗的狀態(tài)碼，默認(rèn)2 }, mounted () { this.$once('hook:beforeDestroy', () => { clearInterval(this.timer); this.timer = null; }); }, methods: { reloadState () { // 添加監(jiān)聽(tīng)器 if (typeof document.hidden !== 'undefined') { this.hidden = 'hidden'; this.visibilityChange = 'visibilitychange'; } else if (typeof document.mozHidden !== 'undefined') { this.hidden = 'mozHidden'; this.visibilityChange = 'mozvisibilitychange'; } else if (typeof document.msHidden !== 'undefined') { this.hidden = 'msHidden'; this.visibilityChange = 'msvisibilitychange'; } else if (typeof document.webkitHidden !== 'undefined') { this.hidden = 'webkitHidden'; this.visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(this.visibilityChange, this.forceUpdate); }, forceUpdate () { if (document.visibilityChange === this.hidden) { } else { this.searchTimer(); } }, payFun () { this.$emit('payMoney', (res) => { this.reloadState(); // 下單接口的回調(diào)，執(zhí)行輪訓(xùn)結(jié)果 this.orderNo = res.order_no; this.loadingPay = true; this.searchPay();// 監(jiān)聽(tīng)從其他app返回，為了解決從支付寶回來(lái)不輪訓(xùn)的問(wèn)題 setTimeout(() => { location.href = res.pay_address; }, 200); }); }, searchPay () { this.$emit('payStatus', (res) => { if (this.payStatus === '') { this.searchTimer(); } // 下單接口的回調(diào)，執(zhí)行輪訓(xùn)結(jié)果 this.payStatus = res; }); }, searchTimer() { if (this.timer) { return; } if (this.orderNo) { let times = 0; this.searchPay(); if (this.payStatus === '') { this.timer = setInterval(res => { times++; this.searchPay(); if (this.payStatus === this.$props.successStatus) { clearInterval(this.timer); this.timer = null; this.loadingPay = false; document.removeEventListener(this.visibilityChange, this.forceUpdate); // 支付成功事件 this.$emit('succcessFunction', (res) => { }); } if (this.payStatus === this.$props.errorStatus) { clearInterval(this.timer); this.timer = null; this.loadingPay = false; document.removeEventListener(this.visibilityChange, this.forceUpdate); // 支付失敗事件 this.$emit('errorFunction', (res) => { }); } if (times > 30) { this.$toast('未查詢到支付狀態(tài)，請(qǐng)重新支付'); clearInterval(this.timer); this.timer = null; this.loadingPay = false; document.removeEventListener(this.visibilityChange, this.forceUpdate); } }, 1000); } } } } }; .pay-info { .pay-content { background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 28px; color: #222; .pay-left { display: flex; align-items: center; } .pay-icon { width: 60px; height: 60px; margin-right: 10px } .radio-icon { width: 34px; height: 34px; } } .pay-button { width: 100%; text-align: center; margin-top: 30px; span { display: inline-block; background: #4e88f6; color: #fff; width: 100%; font-size: 32px; height: 88px; line-height: 88px; border-radius: 50px; display: inline-block; } } .loading-dom { width: 100%; height: 100vh; background: rgba(0,0,0,.5); color: #fff; text-align: center; font-size: 34px; font-weight: 500; position: fixed; display: flex; align-items: center; justify-content: center; top: 0; left: 0 } } 六、父組件調(diào)用 // 下單事件 payMoney (callback) { this.$axios.post(`url`, params).then((res) => { let data = res.data; if (Number(data.code) === 0) { // 執(zhí)行支付作，跳轉(zhuǎn)url，結(jié)果回調(diào)給收銀臺(tái)組件 this.currentOrder = data.data.order_no; callback(data.data); } else { this.$toast(data.message); } }).catch((e) => { }); }, // 輪訓(xùn)狀態(tài)接口 payStatus (callback) { this.$axios.get(`url`).then((res) => { let data = res.data; if (Number(data.code) === 0) { // 執(zhí)行支付結(jié)果查詢，結(jié)果回調(diào)給收銀臺(tái)組件 callback(data.data.pay_result); if (data.data.list && data.data.list.length) { this.resultData = data.data.list; } } else { this.$toast(data.message); } }).catch((e) => { }); }, succcessFunction () { // 支付成功父組件作事件 this.$toast('支付成功'); // 先彈出支付成功提示，延時(shí)1秒出結(jié)果彈窗 setTimeout(() => { // 支付成功后刷新一下接口 }, 1000); }, errorFunction () { // 支付失敗父組件作事件 this.$toast('支付失敗，請(qǐng)重新發(fā)起支付'); }, |
| CopyRight 2018-2019 實(shí)驗(yàn)室設(shè)備網(wǎng) 版權(quán)所有 |