微信小程序:web-view嵌套H5實(shí)現(xiàn)微信支付功能解決方案及填坑

ab7117c7d4947210c39e126a01d23ede.jpg

最近一個多月加班比較嚴(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)

a95c28459d78fe26efd08215dfa56642.png

基本流程如上述示意圖爆价,訂單相關(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') {
        // 用戶取消返回訂單頁
    }
  }
 })
}
注意:
  1. 在生成訂單表埂软,下單成功后锈遥,即進(jìn)入支付中狀態(tài)
  2. 建議區(qū)分訂單表和支付表
  3. 實(shí)際支付頁面的喚起只能在小程序中進(jìn)行,不能使用h5喚起微信支付頁面
  4. 支付結(jié)果必須以微信回調(diào)為準(zhǔn)勘畔,不能直接使用wx.program.navigateTo返回的結(jié)果
  5. 因?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)度...

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末娄徊,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子盾戴,更是在濱河造成了極大的恐慌寄锐,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尖啡,死亡現(xiàn)場離奇詭異锐峭,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)可婶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來援雇,“玉大人矛渴,你說我怎么就攤上這事”共” “怎么了具温?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長筐赔。 經(jīng)常有香客問我铣猩,道長,這世上最難降的妖魔是什么茴丰? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任达皿,我火速辦了婚禮天吓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘峦椰。我一直安慰自己龄寞,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布汤功。 她就那樣靜靜地躺著物邑,像睡著了一般。 火紅的嫁衣襯著肌膚如雪滔金。 梳的紋絲不亂的頭發(fā)上色解,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機(jī)與錄音餐茵,去河邊找鬼科阎。 笑死,一個胖子當(dāng)著我的面吹牛钟病,可吹牛的內(nèi)容都是我干的萧恕。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼肠阱,長吁一口氣:“原來是場噩夢啊……” “哼票唆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起屹徘,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤走趋,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后噪伊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體簿煌,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年鉴吹,在試婚紗的時候發(fā)現(xiàn)自己被綠了姨伟。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡豆励,死狀恐怖夺荒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情良蒸,我是刑警寧澤技扼,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站嫩痰,受9級特大地震影響剿吻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜串纺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一丽旅、第九天 我趴在偏房一處隱蔽的房頂上張望椰棘。 院中可真熱鬧,春花似錦魔招、人聲如沸晰搀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽外恕。三九已至,卻和暖如春乡翅,著一層夾襖步出監(jiān)牢的瞬間鳞疲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工蠕蚜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留尚洽,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓靶累,卻偏偏與公主長得像腺毫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子挣柬,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容