最近一個多月加班比較嚴(yán)重雅潭,偶爾休息一天也是在補(bǔ)睡眠+陪家人距误,比較長時間沒有來進(jìn)行總結(jié)記錄了。今天不加班,開始為這段時間做的東西進(jìn)行下經(jīng)驗(yàn)總結(jié)。
這段時間因?yàn)楣拘枰嗌簦佑|了一些.Net前后臺開發(fā),慢慢了解了一些WCF齿桃、H5站點(diǎn)惑惶、WebService、Soap短纵、Linq等带污,也了解了一些BLL、DAL相關(guān)內(nèi)容香到。同時也參與了微信支付鱼冀、微信醫(yī)保支付相關(guān)功能的改版,以及為微信小程序增加微信支付悠就、微信醫(yī)保支付功能雷绢。
下面主要記錄下小程序支付相關(guān)方案、實(shí)現(xiàn)及填坑理卑。
一. 產(chǎn)品現(xiàn)狀
首先,在接入微信支付功能以前蔽氨,我們的產(chǎn)品情況是這樣的:
1
有公眾號和app的h5站點(diǎn)及相關(guān)配套功能
2
小程序已經(jīng)有一些基礎(chǔ)功能藐唠,這些功能沒有使用web-view
3
小程序之前的服務(wù)器是與現(xiàn)有公眾號h5站點(diǎn)不同的一個webapi站點(diǎn)
二. 備選方案
基于以上幾點(diǎn),當(dāng)時提出了兩套解決方案:
方案1. 支付相關(guān)功能使用小程序代碼進(jìn)行開發(fā)鹉究,并在webapi站點(diǎn)增加相應(yīng)接口
方案2. 使用web-view嵌入公眾號h5站點(diǎn)的支付功能宇立,包括訂單列表、訂單詳情自赔、支付確認(rèn)妈嘹、支付下單、支付結(jié)果展示绍妨、支付歷史等润脸,僅實(shí)際支付時使用小程序代碼進(jìn)行開發(fā)
最終我們使用的是第二套方案,本來以為有了現(xiàn)成的h5頁面他去,需要解決的僅僅是h5站點(diǎn)與webapi站點(diǎn)的登錄同步以及小程序的支付界面喚起這兩個問題毙驯,結(jié)果發(fā)現(xiàn),坑還是不少的灾测。
三. 方案實(shí)現(xiàn)
基本流程如上述示意圖爆价,訂單相關(guān)頁面及微信支付下單過程都在h5,下單成功后通過wx.program.navigateTo跳轉(zhuǎn)回小程序,小程序執(zhí)行wx.requestPayment喚起支付頁面铭段,獲取的結(jié)果以h5展示骤宣。同時,在下單時會設(shè)置支付結(jié)果回調(diào)頁(PayNotify)序愚,實(shí)際支付成功后憔披,微信會主動調(diào)用PayNotify頁面,在該頁面操作訂單支付表的支付狀態(tài)展运。
小程序代碼如下:
// 直接在onLoad中喚起支付頁面(中間的部分參數(shù)需要用decodeURIComponent解碼)
onLoad: function(options) {
var payType = options.type;
var timeStamp = options.timeStamp;
var nonceStr = decodeURIComponent(options.nonceStr);
var package = decodeURIComponent(options.package);
var signType = options.signType;
var paySign = decodeURIComponent(options.paySign);
if(type == 1) {
// 微信支付
this.wxPay(timeStamp, nonceStr, package, signType, paySign);
}else {
var payAppId = options.appid;
var payUrl = decodeURIComponent(options.payUrl);
// 醫(yī)保支付活逆,需要跳轉(zhuǎn)到醫(yī)保小程序進(jìn)行支付,需要獲取醫(yī)保小程序appid和payurl
}
}
// 喚起微信支付窗口
wxPay: function(timeStamp, nonceStr, package, signType, paySign) {
wx.requestPayment({
'timeStamp': timeStamp,
'nonceStr': nonceStr,
'package': package,
'signType': signType,//'MD5',
'paySign': paySign,
'success':function(res){
// 成功跳轉(zhuǎn)到h5結(jié)果頁面
},
'fail':function(res){
// 失敗提示并返回訂單頁
},
'complete': function(res){
// 較早版本拗胜,用戶取消支付蔗候,不進(jìn)入fail回調(diào),僅回調(diào)complete
// res.errMsg為requestPayment:fail cancel
if(res.errMsg=='requestPayment:fail cancel') {
// 用戶取消返回訂單頁
}
}
})
}
注意:
- 在生成訂單表埂软,下單成功后锈遥,即進(jìn)入支付中狀態(tài)
- 建議區(qū)分訂單表和支付表
- 實(shí)際支付頁面的喚起只能在小程序中進(jìn)行,不能使用h5喚起微信支付頁面
- 支付結(jié)果必須以微信回調(diào)為準(zhǔn)勘畔,不能直接使用wx.program.navigateTo返回的結(jié)果
- 因?yàn)楣娞柡托〕绦蚴褂玫氖峭惶議5代碼所灸,所以必須將appid等設(shè)置為配置項(xiàng),不同的入口炫七,使用不同的appid爬立;而且在支付表中,必須能明確是小程序還是公眾號支付的万哪,不然會出現(xiàn)無法退款等情況侠驯。(退款的appid必須是支付的appid)
四. 填坑
坑1
支付商戶和小程序主體不一致,而且我們的商戶是特約商戶奕巍,導(dǎo)致小程序無法進(jìn)行M-A授權(quán)并開通微信支付功能
解決方案:
這里有多種解決方案吟策,最快捷的是找騰訊內(nèi)部人員提交申請,提交信息后他們會幫忙進(jìn)行M-A授權(quán)(我們下午提交第二天就ok了)
坑2
appid等信息不同導(dǎo)致需要h5站點(diǎn)兼容
解決方案:
增加支付相關(guān)的配置的止,不同的入口讀取不同的配置項(xiàng)檩坚,包含appid, appsecret,mchid,回調(diào)地址等配置诅福。
坑3
由于之前是在webapi進(jìn)行登錄匾委,h5站點(diǎn)存在未登錄的問題
解決方案:
我們webapi和h5使用的是同一個數(shù)據(jù)庫,所以我們只是在h5站點(diǎn)再進(jìn)行一次openid的綁定权谁,當(dāng)然剩檀,這里需要考慮的是小程序和公眾號都存在openid,我們得分開建立綁定關(guān)系旺芽。
這是我們產(chǎn)品之前設(shè)計存在的問題沪猴,其實(shí)是可以通過unionid來建立綁定關(guān)系(因?yàn)檫@個才是對微信用戶而言唯一不變的標(biāo)識)辐啄,同時也可以考慮緩存不同來源的openid
坑4
歷史記錄及退款問題
解決方案:
需要在支付記錄中存儲是哪個端下的訂單,因?yàn)槿绻〕绦蛑Ц兜脑耸龋欢ㄒ眯〕绦虻腶ppid等信息去退款壶辜,公眾號也一樣。所以支付記錄表中應(yīng)該有payType字段担租,最好支付的訂單號生成時前兩位用于記錄支付方式砸民,比如01開頭的是公眾號支付,02開頭是小程序支付奋救。
我們的訂單號生成規(guī)則是 2位支付方式+1位交易訂單類型(支付岭参、退款等)+2位商品類型 + 時間戳 + 其他
個人博客: IT老五
微信公眾號:【IT老五(it-lao5)】,一起源創(chuàng)尝艘,一起學(xué)習(xí)演侯!
ps
時間有點(diǎn)緊張,還有一些具體方案實(shí)現(xiàn)和坑沒總結(jié)背亥,后續(xù)再補(bǔ)充秒际。有什么錯誤或者不足歡迎指出...
另外,使用web-view在體驗(yàn)上感覺有點(diǎn)坑狡汉,坑1. h5加載比純使用小程序要慢很多 坑2. 無法準(zhǔn)確捕獲到h5頁面加載的進(jìn)度...