总的来说微信支付的前端工作就两个步骤。非常简单:
第一步:通过向后端请求,获取参数nonceStr、package、paySign、timeStamp。这几个参数必须是通过后端处理返回的数据。也是在下一步调起微信支付必须用到的参数。另外还有一个加密类型可有可无,默认是MD5。
wx.request({
url: config.Pay.url, //向后端请求的链接,这里我是封装好的,所以直接调用
method:config.Pay.method, //请求方法类型
header:config.Pay.header, //请求头参数
data:{
//请求参数,包括用户的Openid,费用说明,以及价格。注意:价格的单位为分,所以需要在你的金额基础上乘以100
UserOpenid:app.globalData.openid,
Body:'富凯陪护床支付费用',
Price:this.data.rechargeBlance
},
success:res=>{
wx.hideLoading()
wx.requestPayment({
//在成功返回参数以后,使用requestPayment调起微信支付
nonceStr: res.data.Data.data.NonceStr,
package: res.data.Data.data.Package,
paySign: res.data.Data.data.PaySign,
timeStamp: res.data.Data.data.TimeStamp,
signType:res.data.Data.data.SignType,
success:res=>{
//用户支付完执行success
wx.showToast({
title: '支付成功',
icon:'success'
})
this.setData({
balance:this.data.balance+this.data.rechargeBlance
})
},
fail:res=>{
//用户取消支付执行fail
wx.showToast({
title: '支付失败',
icon:'none'
})
}
})
}
})
以上就是微信支付的前端工作,很简单。有一些注意事项我都写在了注释里面。请参考代码里的注释进行理解。有问题可以留言哦~