从前端角度梳理微信支付的流程(微信支付流程开发)

微信小程序开发教程梳理微信支付的流程

推荐:微信小程序开发教程

由于业务需要，微信支付功能的开发涉及三种支付方式:

JSAPI支付:微信中网页的支付需要打开微信服务号小程序；小程序支付需要打开小程序H5支付；在手机浏览器(微信内网外)支付网页需要开通微信商家号，使用该支付方式前，需要在商家平台开通(待审批)。

交的钱最终会到商家号(一般是公司财务开的)。

在开发微信支付的过程中，还是踩了很多坑，最后还是完成了，整理了一下开发流程。

参考:

微信支付-访问指导微信支付-开发文档小程序支付开发流程小程序请求创建订单接口，后台统一订单获取orderId并返回给小程序通过wx.login()获取代码和orderId。小程序请求后台接口，获取支付所需数据后，调用wx.requestPayment()接口，在支付页面判断支付是否成功后，直接调用逻辑伪代码异步函数wxpay(goodid ){//1。创建一个订单以获取orderid let orderid = Await Ajax(" POST & quot；，& quot/API/order program/CreateTheOrder & quot；，{goodId，//商品id })；// 2.get code let code = await wx login()；//基于pr封装的wx.login()方法// 3。获取支付数据let pay data = await Ajax(& quot；帖子& quot，& quot/API/order program/wxxxpay & quot；，{ orderId，code，})；// 4.发起付款函res =等待付款(pay data)；//基于pr封装的wx.requestPayment()方法// 5。判断支付是否成功；let payResult = res.errMsgif(pay result = = & quot；请求付款:好的){ console . log(& quot；支付成功”)；} else if(pay result = = & quot；请求付款:取消失败){ console . log(& quot；用户取消支付”)；} else { console . log(& quot；支付失败”)；}}注:微信小程序账号申请成功，可以获得Appid(小程序id)和AppSecret(小程序密钥)。应用程序类型是企业。否则无法访问微信支付微信小程序。只有经过认证的小程序才能接入微信支付，绑定商家平台。申请商家平台账号需要第一步。如果Appid申请成功，可以获得Mchid(商家ID)和MchKey(商家密钥)。小程序与商家号微信关联，商家认证成功后，连接微信后台的微信支付菜单，连接微信后台的微信支付菜单中的H5支付开发流程。前端请求创建一个订单接口，后端订购一个订单获取一个orderId，并带着orderId返回前端请求支付接口获取mweb_url。然后跳转到mweb_url自动调用微信支付返回支付页面判断支付是否成功(需要发送后台查询请求)。4.1刷新页面，获取最新的支付(订单)状态。4.2设置一个新的按钮“我已支付”，这样用户可以点击自动查询状态。伪代码异步函数wxh5pay (goodid) {//1。创建一个订单以获取OrderID let OrderID = Await Ajax(" POST & quot；，& quot/API/order program/CreateTheOrder & quot；，{goodId，//商品id })；// 2.获取支付跳转的URL，让mweb _ URL = Await Ajax(" POST & quot；，& quot/API/order program/wx H5 pay & quot；，{ orderId })；// 3.跳转网址到微信支付if(mweb _ URL){ location . href = mweb _ URL；} else { console . log(& quot；回调地址错误”)；} // 4.支付后返回支付页面，判断支付是否成功// 4.1刷新页面获取最新订单(商品)状态。// 4.2设置一个“我已支付”按钮，让用户点击它来查询状态。}注意:在商家平台设置正确的支付域名需要在线调试。如果太麻烦，可以用内网穿透(Ngrok或者花生壳)。您需要对redirect_url进行urlencode。H5付款不能在微信客户端直接转账。请在外部浏览器中传输。参考微信支付-H5支付-开发步骤JSAPI支付(微信中的Web支付)开发流程。在产品页面的前端产品页面创建订单。在后端下订单后，获取orderId。前端用orderId跳转到支付页面，支付页面获取代码。

第一次进入页面，判断路径中是否有代码，请求数据跳转到授权页面，代码通过回调地址一起返回得到代码并发送到后端，后端解析到openid保存。点击ok支付触发wxPay()方法。

将orderId发送到后端，得到wxDatawxData的数据包括wx.config和wx.chooseWXPay两个接口，先调用wx.config()，再调用wx.chooseWXPay()。如果一切正常，就会弹出支付页面。支付状态通过后台查询到伪码商品页面// 1。创建一个OrderID LetOrderID = Await Ajax(" POST & quot；，& quot/API/order program/CreateTheOrder & quot；，{goodId，//商品id })；// 2.跳转到付款页面。$ router . push({ name:" wx _ pay _ page & quot；，params:{ orderId:id } })；导入文件(main.js)// main.js从“weixin -js-SDK & quot；；支付页面html

//vuedata(){ return { orderid:this。$ route.params.orderid，//订单id url:' '，//获取代码的URL wxdata:null，//JS-SDK接口所需的数据}}，Mounted () {/}方法:{ getcode(){ var code = this . geturl pram(" code & quot；);如果(代码！= null){ this . code = code；//获取代码并发送到后端this . send code(code)；} else {// Go获取code this . geturl()；} }，getUrl() {//请求后端获取Url所需的数据，然后跳转到页面，通过回调地址返回获取代码。这个. axios。帖子(& quot/API/order program/GetOpenidAndAccessToken & quot；，{ orderId: this.orderId，})。然后((数据)= & gt{ this . URL = ` https://open . weixin . QQ . com/connect/oauth 2/authorize？appid = $ { data.appId } & ampredirect _ uri = $ { data . redirect _ uri } & amp；response _ type = $ { data . response _ type } & amp；scope = $ { data.scope } & ampstate = $ { data . state } `；window . location . href = this . URL；}) .catch((err)= & gt；{ console . log(err)；});}，sendCode(code) {//发送代码到后端后端解析出openid this.axios。帖子(& quot/API/order program/GetOpenidAndAccessTokenFromCode & quot；，{ code: code，})。然后((RES)= & gt；{ console . log(RES)；}) .catch((err)= & gt；{ console . log(err)；});}，wxPay: async function() {//发送orderid，获取参数this . wxdata = awaitthis . axios . post("/API/order program/WxJSAPIPay & quot；，{ orderId:this . orderId })；LetwxConfigData = this.wxData.wxConfigData//Get wx . choosewxpay()LetwxPayData = this . wx data . wx paydata所需的数据；//获取wx.config () this所需的数据。$ wx.config ({debug: false，//打开调试模式，所有被调用API的返回值都会显示在客户端预警中。如果想查看进来的参数，可以在pc端打开，参数信息会通过日志打出来，日志只会在pc端打印出来。Appid: wxconfigundata.appid，//必选，微信官方账号唯一logo时间戳:wxconfigundata.timestamp，//必选，时间戳non castr:wxconfigundata。noncestr，//必需，随机字符串签名:wxconfigundata。paysign，//必选，签名jsApiList:微信app下载微信是一款支持通过手机网络发送语音消息、视频、图片、文字的手机通讯软件。微信可以单独聊天，也可以群聊，根据地理位置找到附近的人，带给你全新的移动通信体验。快来拯救下载体验给有需要的朋友吧！

下载

这几篇文章你可能也喜欢：

• Friendhosting日本VPS评级：东京计算机实验室硬盘良好，联通可观看超过8万个视频，3网络旁路延迟高
• Phanes Cloud 荷兰 VPS 首月 70% 优惠：每月 1.2 欧元起，支持支付宝/微信支付/Paypal [有评论]
• DMIT美国CN2 GIA VPS评测：三网出站路由优化和回程GIA，低延迟，全带宽视频显示速度快，硬件强大
• Spinservers美国达拉斯专用服务器：E3-1280v5/32G/1TB NVMe/无限流量/500M/USD 79/月，支持支付宝/微信支付/Paypal
• 淘宝正式宣布即日起支持微信支付（淘宝支持微信支付吗？）

本文由主机参考刊发，转载请注明：从前端角度梳理微信支付的流程(微信支付流程开发) https://zhujicankao.com/120223.html