从前端角度梳理微信支付的流程(从前端角度微信支付有哪些流程)

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

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

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

JSAPI支付:微信服务号小程序需要在微信中打开网页进行支付；小程序H5需要在小程序中打开支付；微信商户号必须在手机浏览器(微信内网外)的网页上使用微信支付的前提下开通；在使用那种支付方式之前，需要在商家平台上开通(待审批)。

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

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

参考:

微信支付-访问指南微信支付-开发文档小程序支付开发流程小程序请求创建订单接口，后端统一下单获取orderId并通过wx.login()返回给小程序获取代码。Applet用这个代码和orderId请求后端接口，获取支付所需的数据。获取支付所需数据后，小程序调用wx.requestPayment()接口，在支付页面判断支付是否成功后直接调用逻辑伪代码异步函数wxpay(goodid ){//1。创建一个订单以获取orderid let orderid = await Ajax(" POST ；， /API/order program/CreateTheOrder ；，{goodId，//商品id })；// 2.get code let code = await wx login()；//基于pr封装的wx.login()方法// 3。获取支付的数据让payData = await Ajax( ；帖子 ， /API/order program/wxxxpay ；，{ orderId，code，})；// 4.发起付款函res =等待付款(pay data)；//基于pr封装的wx.requestPayment()方法// 5。判断支付是否成功。let payResult = res.errMsgif(pay result = = ；请求付款:好的){ console . log( ；支付成功”)；} else if(pay result = = ；请求付款:取消失败){ console . log( ；用户取消支付”)；} else { console . log( ；支付失败”)；}}注:微信小程序账号申请成功，可获得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 ；， /API/order program/CreateTheOrder ；，{goodId，//商品id })；// 2.获取支付跳转的URL let mweb _ URL = AwaitAjax(" POST ；， /API/order program/wx H5 pay ；，{ orderId })；// 3.跳转网址到微信支付if(mweb _ URL){ location . href = mweb _ URL；} else { console . log( ；回调地址错误”)；} // 4.支付后返回支付页面，判断支付是否成功。// 4.1刷新页面获取最新订单(商品)状态。// 4.2设置一个“我已付款”。按钮，让用户单击来查询状态。}注意:在商家平台设置正确的支付域名需要在线调试。如果太麻烦，可以用内网穿透(Ngrok或者花生壳)，redirect_url需要urlencode处理。H5支付不能在微信客户端直接转账，请在外部浏览器转账。参考微信支付-H5支付-开发步骤JSAPI支付(微信内部网页支付)开发流程。产品页面前端产品页面创建订单，后端订单统一下单后，前端跳转到orderId的支付页面，支付页面获取代码。

第一次进入页面时，判断路径中是否有代码但没有代码，请求数据跳转到授权页面。代码将与回调地址一起返回以获取代码，代码将被发送到后端，后端将把代码解析为openid并保存。单击支付按钮触发wxPay()方法。

将orderId发送到后端获取包含wx.config和wx.chooseWXPay接口的wxDatawxData的数据。首先调用wx.config()，然后调用wx.chooseWXPay()。如果一切正常，会弹出支付页面。支付状态通过后端查询伪码产品页面// 1。创建一个订单以获取orderid let orderid = await Ajax(" POST ；， /API/order program/CreateTheOrder ；，{goodId，//商品id })；// 2.跳转到付款页面this . router . push id({ name:" wx _ pay _ page ；，params:{ orderId:id } })；导入文件(main.js)// main.js从“weixin -js-SDK ；；支付页面html

//vuedata(){ return { orderid:this。$ route.params.orderid，//订单id URL: # 39；'，//获取代码的URL wxdata:null，//JS-SDK接口所需数据}}，mounted(){ //确定是否有codethis.getcode ()}方法:{ getcode(){ var code = this . geturlpram(" code ；);如果(代码！= null){ this . code = code；//获取代码并发送到后端this . send code(code)；} else {// Go获取code this . geturl()；} }，getUrl() {//请求后端获取Url所需的数据，然后跳转到页面通过回调地址返回获取代码。这个. axios。帖子( /API/order program/GetOpenidAndAccessToken ；，{ orderId: this.orderId，})。然后((数据)= gt{ this . URL = ` https://open . weixin . QQ . com/connect/oauth 2/authorize？appid = $ { data.appId } redirect _ uri = $ { data . redirect _ uri } ；response _ type = $ { data . response _ type } ；scope = $ { data.scope } state = $ { data . state } `；window . location . href = this . URL；}) .catch((err)= gt；{ console . log(err)；});}，sendCode(code) {//向后端发送代码。后端解析出openid this.axios。帖子( /API/order program/GetOpenidAndAccessTokenFromCode ；，{ code: code，})。然后((RES)= gt；{ console . log(RES)；}) .catch((err)= gt；{ console . log(err)；});}、wxPay: async function() {//发送orderid以获取this . wxdata = awaittthis . axios . post("/API/order program/WxJSAPIPay ；，{ 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端打开，参数信息会通过log录入，只在pc端打印。AppId: wxConfigData.appId，//必选，微信官方账号唯一标识符timest:wxconfigdata . timest，//必选，生成的时间戳nonce str: wxconfigdata.nonce str，//必选，生成的随机字符串签名:wxconfigdata.paysign，//必选，签名jsApiList:[" chooseWXPay ；, ], });//执行此支付。$ wx . choosewxpay({ timest:wx Pay data . timest，//支付签名时间戳。注意，微信jssdk中所有使用的时间戳字段都是小写的。但最新版本的支付后台中用于生成签名的时间戳字段名要大写S字符non estr:wxpaydata . non estr，//支付签名的随机字符串，长度不超过32位package: wxPayData.package，//统一支付接口返回的prepay_id参数值，提交格式如下:Prepay _ ID = \ * \ *)sign type:wxpaydata . sign type，//默认为 # 39；SHA1 # 39；，使用新版本的付款需要传入 # 39；MD5 # 39Pay: wxpaydata.paysign，//支付签名成功:(RES)= > >；{这个。$ toast( ；支付成功”)；}，fail:(err)= gt；{这个。$ toast( ；支付失败”)；}, });}，}同时支持H5支付和JSAPI支付。//订单创建后，判断环境使用哪种方式支付。if (isWx()) { this。wx pay(orderId)；//跳转到orderId为} else { this }的支付页面逻辑。H5 pay(orderId)；//执行上面H5支付创建订单后的逻辑}//判断是否是微信浏览器函数iswx(){ let u agent = navigator . user agent . to lower case()；reutrn(/micromessenger/)。测试(uAgent))？真:假；}注意打开微信商家号-设置支付目录(如果是Vue之类的SPA页面，转到根目录，也就是#号前的地址)打开微信微信官方账号(服务号)-设置安全域名，设置授权域名收集参数:appId和AppSecret添加Web开发工具开发者(微信微信官方账号和需要开发者同时关注开发的微信公众号安全助手)参考文档【图片上传失败...(image-B07878-160577597831)]设置回调域名(例如:www.xx.com/pay,最后获取的代码将在此回调地址拼写并返回，例如www.xx.com/pay?.代码=xxxx获取代码

获取代码文档，在微信客户端网页打开授权地址。跳转后，得到代码:https://open.weixin.qq.com/connect/oauth2/authorize?后返回回调地址。Appid=您的appid Redirect_uri=您的回拨地址(获取代码后返回) Response_type=code(返回类型，默认代码) Scope=snsapi_base(授权范围，静默授权获取OpenID) State=STATE(自定义状态，不需要)#wechat_redirect(重定向必须携带)Redirect_uri参数应与您在微信微信官方账号中设置的回拨域名一致(例如www.xx.com/pay)。需要注意的是，这个url需要urlEncode。

在请求这个地址之后，代码将被带回来，带有您设置的redirect_uri地址中的参数，然后它将被传递到后端。

将js-skd引入前端

用脚本引入js-sdk下载，用npm包weixin-js-sdk获取wx.config的参数，参考微信支付-JSAPI微信官方账号-网页授权js-sdk开发文档总结整个过程，我的经验是:小程序支付最重要(因为配置少)，其次是H5，JSAPI支付最麻烦(一半以上的文章都写在上面)

微信支付功能开发过程中，其实最麻烦的不是开发过程，而是它的各种配置和授权过程，为了得到需要的参数而翻来覆去。

有些参数是开发过程中经常用到的，比如appid，openid，orderId。

付款流程是一样的。先获取用户的openid，知道自己是谁，然后下单获取orderId再处理不同平台的支付方式。

开发相关文档时，一定要多看两遍！！

遇到问题不要死硬。你不能肯定的说，你遇到的问题，无数人都已经遇到了，也有成熟的解决方案。

多跟前端和后端沟通。有什么问题(困难)随时反馈，说说需要什么参数。遇到意见不合的时候，一定要注意控制自己的情绪，千万不要撕(。——.).

由于本人水平有限，对后端流程了解不多，只能从前端角度梳理整个支付流程。

以上，希望对你有帮助。以上是从前端的角度来梳理微信支付的流程细节。请多关注主机参考其他相关文章！

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

• 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/81508.html