支付完成后怎么进入vue组件（微信支付前后端流程整理）
支付完成后怎么进入vue组件（微信支付前后端流程整理）通俗的讲，但凡你用到微信分享、扫一扫、卡券、支付、录音、拍照、位置等等所有功能，都要基于JS-SDK进行开发。微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。实际上支付的所有流程在微信开发文档上面都有，我们依然是基于公司的支付需求结合开发文档，把自身的经验传授给大家。看不懂、看不明白，在我看来主要还是工作经验偏少，自学能力缺乏的表现。今天借这个机会，把微信支付流程做汇总。对于微信授权分享、支付来说，大部分的功能都还是在后端，前端比较简单。
作者：河畔一角
转发链接：https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w
前言最近有不少同学希望我能够把微信支付的前后端流程整理一下，"虽然买了课程，依然看的比较晕"。
实际上，我在2019年下半年出了一篇文章，包含微信授权登录、手机号授权、微信分享、微信支付等众多功能，前端分别基于微信公众号H5、微信小程序和微信小程序云开发，后端基于Node，整体来讲体量还是比较大。
实际上支付的所有流程在微信开发文档上面都有，我们依然是基于公司的支付需求结合开发文档，把自身的经验传授给大家。看不懂、看不明白，在我看来主要还是工作经验偏少，自学能力缺乏的表现。
今天借这个机会，把微信支付流程做汇总。
支付分享整体流程
对于微信授权分享、支付来说，大部分的功能都还是在后端，前端比较简单。
JSSDK微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通俗的讲，但凡你用到微信分享、扫一扫、卡券、支付、录音、拍照、位置等等所有功能，都要基于JS-SDK进行开发。
准备工作- 微信支付需要注册服务号
- 微信支付需要开通对公账户（注册公司）
- 公众平台需要配置域名
- 业务域名：调用的接口对应的域名
- 安全域名：前端访问的H5域名
- 授权域名：用户授权回调的域名，通常跟H5是同一个域名
- 辅助文档
- 绑定微信开发者
- 开通微信认证（每年认证费300）
当我们第一次访问线上的H5页面时，由于要调用微信分享、支付等功能，就必须先获取到用户的openid，而openId就必须先做微信授权。
- 静默授权 用户访问H5自动跳转到微信那边获取到openId后，自动跳转回来，这个过程用户无感知。
- 非静默授权 用户访问H5自动跳转到微信授权页面，手动点击同意（允许微信把个人信息提供给当前H5网站），微信会拼接一个code到回调地址上，进而根据code获取到openID等信息。
- 跳转微信授权，获取code引导用户打开https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect进行网页授权，点击同意后，微信会拼接code到redirect_uri里面去。
- 通过code换取网页授权access_token
- 刷新access_token（如果需要）
- 拉取用户信息(需scope为 snsapi_userinfo)
以上是微信官方的授权流程，思路很明确
实战开发代码流程- 检查本地cookie是否有openId
App.vue公共组件中，定义check方法，新用户新进行微信授权，老用户直接获取jssdk-config配置信息。
//检查用户是否授权过
checkUserAuth(){
letopenId=this.$cookie.get('openId');
if(!openId){
//如果第一次就需要跳转到后端进行微信授权
window.location.href=API.wechatRedirect;
}else{
//如果已经授权，直接获取配置信息
this.getWechatConfig();
}
}
- 定义跳转链接
api/index.js中，定义wechatRedirect地址，重点关注第一个API，我们会在后台定义/api/wechat/redirect接口，同时拼接callback地址
exportdefault{
wechatRedirect:'/api/wechat/redirect?callback=http://m.51purse.com/#/index&scope=snsapi_userinfo'
wechatConfig:'/api/wechat/jssdk' //获取sdk配置
getUserInfo:'/api/wechat/getUserInfo' //获取用户信息
payWallet:'/api/wechat/pay/payWallet'//获取钱包接口，支付会用
}
这个地方很多人可能有疑问，为什么授权地址不是由前端触发，而是交给了服务端？实际上两边都可以，我这儿觉得后端处理会更合适，这样前端就少了很多逻辑判断。当授权成功后，会跳转到我们传递的callback地址来。
/api/wechat/redirect 接口里面实际上就是一个重定向https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect，用于跳转到微信做登录授权。
- Node端定义redirect接口
//用户授权重定向
router.get('/redirect' function(req res){
//获取前端回调地址
letcallback=req.query.callback
//获取授权类型
scope=req.query.scope
//授权成功后重定向地址
redirectUrl='http://m.51purse.com/api/wechat/getOpenId';
//临时保存callback
cache.put('callback' callback);
//微信网页授权地址
letauthorizeUrl=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${callback}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
//重定向到该地址
res.redirect(authorizeUrl);
})
此接口接收callback地址，然后直接重定向到微信授权页面，当用户点击同意以后，会自动跳转到redirectUrl上面来。
- 根据code获取openId
//根据code获取用户的OpenId
router.get('/getOpenId' asyncfunction(req res){
//获取微信传过来的code值
letcode=req.query.code;
if(!code){
res.json(util.handleFail('当前未获取到授权code码'));
}else{
letresult=awaitcommon.getAccessToken(code);
if(result.code==0){
letdata=result.data;
letexpire_time=1000*60*60*2;
cache.put('access_token' data.access_token expire_time);
res.cookie('openId' data.openid {maxAge:expire_time});
letopenId=data.openid;
//to-do
/**
此处根据openId到数据库中进行查询，如果存在直接进行重定向，如果数据库没有，则根据token获取用户信息，插入到数据库中，最后进行重定向。
*/
}else{
res.json(result);
}
}
})
第三步用户同意授权以后，会重定向到此接口来，并且微信会在url后面拼接一个code值，我们根据code来获取网页授权access_token，根据token就可以拉取到用户信息（昵称、头像）了，最好插入到数据库中。
getToken和getUserInfo接口封装
//根据code获取token
exports.getAccessToken=function(code){
lettoken_url=`https://api.weixin.qq.com/sns/oauth2/access_token?appid=${config.appId}&secret=${config.appSecret}&code=${code}&grant_type=authorization_code`;
returnnewPromise((resolve reject)=>{
request.get(token_url function(err response body){
letresult=util.handleResponse(err response body);
resolve(result);
})
});
}
//根据token获取用户信息
exports.getUserInfo=function(access_token openId){
letuserinfo=`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openId}&lang=zh_CN`;
returnnewPromise((resolve reject)=>{
request.get(userinfo function(err response body){
letresult=util.handleResponse(err response body);
resolve(result);
})
})
}
- 获取微信sdk配置
前面四步做完以后，服务端会把openId写入到cookie中，此时前端根据openId来拉取sdk配置
//获取微信配置信息
getWechatConfig(){
this.$axios.get(API.wechatConfig '?url=' location.href.split('#')[0]).then(function(response){
letres=response.data;
if(res.code==0){
letdata=res.data;
wx.config({
debug:true //开启调试模式 调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId:data.appId //必填，公众号的唯一标识
timestamp:data.timestamp //必填，生成签名的时间戳
nonceStr:data.nonceStr //必填，生成签名的随机串
signature:data.signature //必填，签名
jsApiList:data.jsApiList//必填，需要使用的JS接口列表
})
//封装统一的分享信息
wx.ready(()=>{
util.initShareInfo(wx);
})
}
})
}
此步骤就是调用后台接口获取配置，进行注册，同时可调用微信的分享接口进行注册，后续即可发起微信分享功能。
- Node生成jssdk配置
- 获取全局access_token（非网页token）
- 获取jsapi_ticket
- 生成noncestr（随机数）
- 生成timestamp（时间戳）
- 签名（noncestr jsapi_ticket timestamp url）
生成sdk配置信息流程就是这样，我这儿不再提供所有代码，只贴一下签名代码。
letparams={
noncestr:util.createNonceStr()
jsapi_ticket:data.ticket
timestamp:util.createTimeStamp()
url
}
letstr=util.raw(params);
letsign=createHash('sha1').update(str).digest('hex');
res.json(util.handleSuc({
appId:config.appId //必填，公众号的唯一标识
timestamp:params.timestamp //必填，生成签名的时间戳
nonceStr:params.noncestr //必填，生成签名的随机串
signature:sign //必填，签名
jsApiList:[
'updateAppMessageShareData'
'updateTimelineShareData'
'onMenuShareTimeline'
'onMenuShareAppMessage'
'onMenuShareQQ'
'onMenuShareQZone'
'chooseWXPay'
]//必填，需要使用的JS接口列表
}))
到此，第一阶段就结束了，前端已经可以做分享、授权等功能了。
- 调用支付钱包接口
this.$axios.get(API.payWallet {
params:{
money
}
}).then((response)=>{
letresult=response.data;
if(result&&result.code==0){
//通过微信的JS-API 拉起微信支付
letres=result.data;
wx.chooseWXPay({
timestamp:res.timestamp //支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr:res.nonceStr //支付签名随机串，不长于32位
package:res.package //统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType:res.signType //签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign:res.paySign //支付签名
success:function(res){
//成功
}
cancel:function(){
//取消
}
fail:function(res){
//失败
}
});
}
})
}
调用钱包接口获取支付配置，拉起微信支付即可
- Node后台钱包接口
//微信支付
router.get('/pay/payWallet' function(req res){
letopenId=req.cookies.openId;//用户的openid
letappId=config.appId;//应用的ID
letattach="微信支付课程体验";//附加数据
letbody="欢迎学习慕课首门支付专项课程";//支付主体内容
lettotal_fee=req.query.money;//支付总金额
//支付成功后，会向此接口推送成功消息通知
letnotify_url="http://m.51purse.com/api/wechat/pay/callback"
//服务器IP
letip="XX.XX.XX.XX";
//封装的下单支付接口
wxpay.order(appId attach body openId total_fee notify_url ip).then((result)=>{
res.json(util.handleSuc(result));
}).catch((result)=>{
res.json(util.handleFail(result.toString()))
});
});
以上是整个分享、支付流程，关于支付核心，下面我单独列出。
支付核心流程- 生成随机数
createNonceStr(){
returnMath.random().toString(36).substr(2 15);
}
- 生成时间戳
createTimeStamp(){
returnparseInt(newDate().getTime()/1000) ''
}
- 生成预支付的签名
getPrePaySign:function(appid attach body openid total_fee notify_url ip nonce_str out_trade_no){
letparams={
appid
attach
body
mch_id:config.mch_id
nonce_str
notify_url
openid
out_trade_no
spbill_create_ip:ip
total_fee
trade_type:'JSAPI'
}
letstring=util.raw(params) '&key=' config.key;
letsign=createHash('md5').update(string).digest('hex');
returnsign.toUpperCase();
}
- 拼接xml下单数据
wxSendData:function(appid attach body openid total_fee notify_url ip nonce_str out_trade_no sign){
letdata='<xml>'
'<appid><![CDATA[' appid ']]></appid>'
'<attach><![CDATA[' attach ']]></attach>'
'<body><![CDATA[' body ']]></body>'
'<mch_id><![CDATA[' config.mch_id ']]></mch_id>'
'<nonce_str><![CDATA[' nonce_str ']]></nonce_str>'
'<notify_url><![CDATA[' notify_url ']]></notify_url>'
'<openid><![CDATA[' openid ']]></openid>'
'<out_trade_no><![CDATA[' out_trade_no ']]></out_trade_no>'
'<spbill_create_ip><![CDATA[' ip ']]></spbill_create_ip>'
'<total_fee><![CDATA[' total_fee ']]></total_fee>'
'<trade_type><![CDATA[JSAPI]]></trade_type>'
'<sign><![CDATA[' sign ']]></sign>'
'</xml>'
returndata;
}
- 调用微信统一下单接口
https://api.mch.weixin.qq.com/pay/unifiedorder
leturl='https://api.mch.weixin.qq.com/pay/unifiedorder';
request({
url
method:'POST'
body:sendData
} function(err response body){
if(!err&&response.statusCode==200){
xml.parseString(body.toString('utf-8') (error res)=>{
if(!error){
letdata=res.xml;
if(data.return_code[0]=='SUCCESS'&&data.result_code[0]=='SUCCESS'){
//获取预支付的ID
letprepay_id=data.prepay_id||[];
//此处非常重要，生成前端所需要的支付配置
letpayResult=self.getPayParams(appid prepay_id[0]);
resolve(payResult);
}
}
})
}else{
resolve(util.handleFail(err));
}
})
最后，我们会生成前端支付所需要的配置信息，前端通过微信API即可拉起微信支付。
作者：河畔一角
转发链接：https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w
推荐Vue学习资料文章：《带你了解 vue-next（Vue 3.0）之 炉火纯青「实践」》
《「干货」Vue 高德地图实现页面点击绘制多边形及多边形切割拆分》
《「干货」Vue Element前端导入导出Excel》
《「实践」Deno bytes 模块全解析》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《基于vue element的后台管理系统解决方案》
《Vue仿蘑菇街商城项目（vue koa mongodb）》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《基于 Vue 技术栈的微前端方案实践》
《消息队列助你成为高薪 Node.js 工程师》
《Node.js 中的 stream 模块详解》
《「干货」Deno TCP Echo Server 是怎么运行的？》
《「干货」了不起的 Deno 实战教程》
《「干货」通俗易懂的Deno 入门教程》
《Deno 正式发布，彻底弄明白和 node 的区别》
《「实践」基于Apify node react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理（axios、koa、redux、vuex）》
《深入Vue 必学高阶组件 HOC「进阶篇」》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（一）》
《10个实例小练习，快速入门熟练 Vue3 核心新特性（二）》
《教你部署搭建一个Vue-cli4 Webpack移动端框架「实践」》
《2020前端就业Vue框架篇「实践」》
《详解Vue3中 router 带来了哪些变化？》
《Vue项目部署及性能优化指导篇「实践」》
《Vue高性能渲染大数据Tree组件「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《10个Vue开发技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 原理解析】》
《带你了解 vue-next（Vue 3.0）之 小试牛刀【实践】》
《带你了解 vue-next（Vue 3.0）之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开发》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3世界的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《怎样为你的 Vue.js 单页应用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》
《Vue 开源项目 TOP45》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《尤雨溪：Vue 3.0的设计原则》
《使用vue实现HTML页面生成图片》
《实现全栈收银系统（Node Vue）（上）》
《实现全栈收银系统（Node Vue）（下）》
《vue引入原生高德地图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战经验汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开发必备】》
《Vue 开发必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《使用vue node搭建前端异常监控系统》
《推荐 8 个漂亮的 vue.js 进度条组件》
《基于Vue实现拖拽升级（九宫格拖拽）》
《手摸手，带你用vue撸后台 系列二(登录权限篇)》
《手摸手，带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react？清晰对比两者差异》
《Vue组件间通信几种方式，你用哪种？【实践】》
《浅析 React / Vue 跨端渲染原理与实现》
《10个Vue开发技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文 多图，带你了解vue的双向数据绑定源码实现》
《深入浅出Vue3 的响应式和以前的区别到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践｜16个方面深入前端工程化开发技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者：河畔一角
转发链接：https://mp.weixin.qq.com/s/ANLjtieWELr39zhgRAeF1w
