大部分前端,都只会写后台管理系统,这是不行的。不管你有没有做过微信支付,接下来这篇文章都会对你有一定的帮助,以后被人问到也可以吹两句
微信支付分为两种,一种是手机端的自调用,一种是pc端的扫码。今天我们说一下手机端的微信支付功能,现在开发基本离不开微信支付
我这儿拿uniapp作为例子说明,他可以同时兼容小程序和webApp的代码。其实原生小程序也是这样,流程都是一样,只是各别方法上有所出入
首先到manifest.json里面配置微信支付,appId和ios的链接,这个按照他的指引去配置就可以了
第二步进入到我们的小程序配置环境,这是必不可少的
首先你得有一个微信商户号,也就是说你微信支付的钱要到哪儿去,对吧,不可能支付给空气吧。搜索微信支付,里面可以申请创建一个商户号,按照指引去创建。
然后到小程序里面做配置,接入微信支付,关联到公众号
后端需要去对接微信支付的接口,他需要到商户号里面去拿好几个信息去做配置,才能调通微信支付的接口。我们这儿只对前端支付讲解,后端就不说明了。
到了这儿还有一步是很重要的,需要openId,这是微信用户对小程序的唯一标识,不会重复的,做支付的时候需要拿用到openId,openId在微信授权登录的时候可以拿到。前端只需要获取到code码,跟后端去做交换,就能拿到用户的openId,后端怎么配置可以去看相关后端的支付教程
<view class="login" open-type="getUserInfo" @tap="login">微信授权</view>
login(){
//uniapp里面是这个方法,微信原生的是另外一个方法,名字不相同,功能和流程都是一样的
uni.login({
provider: 'weixin',
success: (loginRes) => {
//微信获取的用户code码,调用后端接口,传入code码,后端会返回用户的openId
//需要后端去做后台的配置
console.log(loginRes.code)
}
})
}
一般支付前要生产一个待支付的订单,拿到这个待支付的订单,带上他的订单id和金额等等参数发起请求给后端,后端会做预支付的处理,最终返回一个data的值给我们,里面有我们需要的值
//生产未支付的订单
addOrder() {
const data = {}
this.$API.addBuyOrder(data).then(res => {
this.wxPay()
})
},
//将订的值和信息传个后端,后端会做预支付处理,返回一串数据
wxPay() {
const data = {}
this.$API.wxPay(data).then(res => {
// data里面是我们需要的值,接下来弹出微信支付
this.payPopup(res.data)
}).catch(err => {})
},
//弹出微信支付
payPopup(pay) {
//下面这些填进去的值没错的话,就是弹出微信支付输入密码的弹出,都是后端返回的
uni.requestPayment({
provider: 'wxpay',
timeStamp: pay.timeStamp,
nonceStr: pay.nonceStr,
package: pay.prepayId,
signType: pay.signType,
paySign: pay.paySign,
success: res=> {
console.log('支付成功了')
},
fail: err=> {
console.log('亲!你还未支付成功')
}
})
}
好了,前端到了这里基本上就完成了微信支付了。我们需要去配置微信的参数,要有商户号,其余的操作都是后端来操作。这里uniapp试用与小程序和打包的webApp。原生小程序道理和这一样,原生app的话那就是原生安卓和ios的操心的事情了
看到这里,如果有帮助的话,,,记得点个支持和收藏哦!