?? 背景
前一陣在做公司小程序時(shí)，有個(gè)需要對(duì)接支付的功能。但是本著訂單數(shù)據(jù)和支付統(tǒng)一入口的設(shè)計(jì)原則，計(jì)劃是對(duì)接公司商城現(xiàn)有的支付體系。故本方案是分析對(duì)接商城支付幾種可行方案以及每種方案的可行性，最后綜合選出一種最佳的方案。
??方案選擇
| 實(shí)現(xiàn)方式 | 跳轉(zhuǎn)商城小程序支付 | 跳轉(zhuǎn)商城H5支付 | 對(duì)接小程序支付API |
|---|---|---|---|
| 優(yōu)點(diǎn) | 無(wú)需重新對(duì)接開(kāi)發(fā)支付功能（可直使用商城小程序支付能力） | 直接嵌入h5頁(yè)面，用戶(hù)沒(méi)有感知跳轉(zhuǎn)的過(guò)程體驗(yàn)較好 | 不存在跳轉(zhuǎn)問(wèn)題，所有操作都是在小程序內(nèi)部完成 |
| 缺點(diǎn) | 1. 小程序之間跳轉(zhuǎn)會(huì)出現(xiàn)詢(xún)問(wèn)彈窗不利于用戶(hù)體驗(yàn) 2. 商城小程序還存在一些未知bug，目前還不是很穩(wěn)定 |
1. 小程序需要主動(dòng)喚起支付窗口 |
1. 重新對(duì)接小程序支付API 2. 訂單無(wú)法統(tǒng)一商城入口 3. 綜合開(kāi)發(fā)工作量較大 |
綜合用戶(hù)體驗(yàn)、開(kāi)發(fā)工作量等因素最終選擇使用跳轉(zhuǎn)商城H5支付的方案
?涉及問(wèn)題
- 小城和商城H5頁(yè)面通訊問(wèn)題
- 喚起支付窗口問(wèn)題
- h5跳轉(zhuǎn)回小程序問(wèn)題
??實(shí)現(xiàn)思路
由于經(jīng)過(guò)測(cè)試發(fā)現(xiàn)小程序中嵌入商城H5后，無(wú)法正常調(diào)起微信h5支付的。所以采用曲線(xiàn)救國(guó)的方式，商城內(nèi)部走微信小程序支付API，再有小程序喚醒小程序支付。具體實(shí)現(xiàn)步驟如下
- 小程序跳轉(zhuǎn)商城H5
- 商城H5判斷如果是小程序內(nèi)打開(kāi)，調(diào)用微信小程序支付API
- 商城H5跳回到小程序
- 小程序喚起支付窗口
- 根據(jù)回調(diào)進(jìn)行業(yè)務(wù)處理
1. 前置條件
- 微信商戶(hù)申請(qǐng)并開(kāi)通小程序支付
- 使用小程序要是企業(yè)注冊(cè)
- 商城域名添加進(jìn)微信公眾平臺(tái)web-view業(yè)務(wù)域名中
- 商城h5中需要引入用于和web-view交互的JSSDK
2. 整體流程
- 用戶(hù)輸入充值金額，點(diǎn)擊確定。小程序攜帶token、用戶(hù)id和支付金額參數(shù)跳轉(zhuǎn)到商城H5訂單確認(rèn)頁(yè)面
- 商城H5根據(jù)token和用戶(hù)id信息進(jìn)行自動(dòng)登錄、根據(jù)支付金額生成預(yù)充值訂單信息
- 用戶(hù)在商城H5頁(yè)面進(jìn)行訂單確認(rèn)、發(fā)票信息填寫(xiě)
- 用戶(hù)在商城H5點(diǎn)擊支付，生成對(duì)應(yīng)訂單并攜帶訂單號(hào)跳轉(zhuǎn)到小程序訂單詳情頁(yè)面
- 小程序再訂單詳情頁(yè)面彈出支付窗口
- 商城端異步通知PaaS支付成功 PaaS 修改訂單狀態(tài)
- 小程序端成功回調(diào)中輪訓(xùn)調(diào)用PaaS訂單狀態(tài)查詢(xún)接口
- 訂單修改成功小程序跳轉(zhuǎn)到一個(gè)指定頁(yè)面（例如訂單頁(yè)）
3. 時(shí)序圖
在原有微信支付的邏輯上增加了現(xiàn)有業(yè)務(wù)的交互邏輯（若有遺漏或者錯(cuò)誤的地方，還請(qǐng)?jiān)谠u(píng)論區(qū)和諧討論）
4. 通訊方式
由于使用postMessage方式傳遞數(shù)據(jù)，只有在小程序特殊操作下才可以觸發(fā)，所以本方案采用get方式進(jìn)行傳參
小程序打開(kāi)H5
<!-- 傳遞商城支付所需要的信息 -->
<web-view
:src="'https://shop.XXX.com/Mobile/Index/wxchart?token=XXXXXXXXXX&name=youngRich'"
></web-view>
H5跳轉(zhuǎn)小程序
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
// 還要再次頁(yè)面中判斷是是否在小程序內(nèi)打開(kāi)
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
//ios的ua中無(wú)miniProgram，但都有MicroMessenger（表示是微信瀏覽器）
wx.miniProgram.getEnv((res)=>{
if (res.miniprogram) {
//在微信內(nèi)，在小程序內(nèi)。
console.log("小程序的支付業(yè)務(wù)")
let wxJson ={} // 微信返回的5個(gè)參數(shù)
wx.miniProgram.navigateTo({url: '"/pages/pay/pay?param=" + wxJson '});
return
}else{
//在微信內(nèi)，不在小程序內(nèi)。
console.log("微信H5的支付業(yè)務(wù)")
return
}
})
}else{
//不在微信內(nèi)。
console.log("第三方瀏覽器支付業(yè)務(wù)")
return
}
??解決方案
以下代碼均為示例，僅供參考。請(qǐng)結(jié)合自身業(yè)務(wù)邏輯進(jìn)行處理
小程序端操作
- 訂單詳情或者充值頁(yè)面 攜帶金額等訂單信息跳轉(zhuǎn)到預(yù)支付頁(yè)面（商城h5提供的地址用web-view嵌入）
- 預(yù)支付頁(yè)面onLoad中調(diào)用uni.login獲取code
- 把通行證token、code、user_id、account攜帶到商城h5給的url上（或者系統(tǒng)中其他參數(shù)）
<template>
<web-view src="{{shopUrl}}"></web-view>
</template>
<script>
export default {
data() {
return {
shopUrl:''
}
},
// 訂單詳情或者充值頁(yè)面 攜帶金額跳轉(zhuǎn)到預(yù)支付頁(yè)面
onload(options){
uni.login({
provider: "weixin",
success: (res) => {
let params = {
code:res.code,
token:*********,
user_id:*****,
...options,
}
this.shopUrl = this.stringifyUrlArgs('https://XXX.XXXX.XXX',params)
},
fail: (res) => {
utils.showToast("獲取授權(quán)信息失敗");
},
});
},
methods:{
stringifyUrlArgs(url, params) => {
url += (/\?/).test(url) ? '&' : '?'
url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
return url
}
}
</script>
在商城h5跳轉(zhuǎn)回小程序的頁(yè)面中（可以是任何頁(yè)面甚至是空白頁(yè)）寫(xiě)入一下邏輯。此步驟主要是彈出授權(quán)支付彈窗文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-469602.html
<template>
</template>
<script>
export default {
data() {},
onload(options){
let payData = {
provider: 'wxpay',
...options, // 商城h5攜帶五個(gè)用于支付的參數(shù)
}
uni.requestPayment({
...payData,
success(res) {
console.log('支付成功處理')
},
fail(err) {
console.log('支付失敗處理')
}
})
},
</script>
??結(jié)語(yǔ)
??感謝鐵汁們的耐心閱讀，如果本篇文章能對(duì)大家有所幫助，還請(qǐng)多多點(diǎn)贊收藏關(guān)注，支持一下??
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-469602.html
到了這里，關(guān)于uni-app | 小程序嵌入H5頁(yè)面實(shí)現(xiàn)支付功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
