江苏龙网

  1. 主页 > 生活百科 > >

Vue+Node 微信支付前后端流程整理( 三 )

微信支付

此步骤就是调用后台接口获取配置，进行注册，同时可调用微信的分享接口进行注册，后续即可发起微信分享功能 。
  1. Node生成jssdk配置
  • 获取全局access_token（非网页token）
  • 获取jsapi_ticket
  • 生成noncestr（随机数）
  • 生成timestamp（时间戳）
  • 签名（noncestr+jsapi_ticket+timestamp+url）
生成sdk配置信息流程就是这样，我这儿不再提供所有代码，只贴一下签名代码 。
let params = {  noncestr:util.createNonceStr(),  jsapi_ticket: data.ticket,  timestamp:util.createTimeStamp(),  url}let str = util.raw(params);let sign = 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接口列表}))
到此，第一阶段就结束了，前端已经可以做分享、授权等功能了 。
  1. 调用支付钱包接口
this.$axios.get(API.payWallet,{        params:{          money        }      }).then((response)=>{        let result = response.data;        if(result && result.code == 0){          // 通过微信的JS-API,拉起微信支付          let res = 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){              // 失败            }          });        }      })    }
调用钱包接口获取支付配置，拉起微信支付即可
  1. Node后台钱包接口
// 微信支付router.get('/pay/payWallet',function(req,res){  let openId = req.cookies.openId;//用户的openid  let appId = config.appId;//应用的ID  let attach = "微信支付课程体验";//附加数据  let body = "欢迎学习慕课首门支付专项课程";//支付主体内容  let total_fee = req.query.money;//支付总金额  // 支付成功后，会向此接口推送成功消息通知  let notify_url = "http://m.51purse.com/api/wechat/pay/callback"  // 服务器IP  let ip = "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()))  });});


推荐阅读


上一篇：从一个详细的实例来知道单片机编程，你照着做就行了

下一篇：茶叶咖啡因含量,孕妇能喝含咖啡因的茶吗