微信支付流程附加代码，超详细，对你一定有帮助

大部分前端，都只会写后台管理系统，这是不行的。不管你有没有做过微信支付，接下来这篇文章都会对你有一定的帮助，以后被人问到也可以吹两句

微信支付分为两种，一种是手机端的自调用，一种是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的操心的事情了

看到这里，如果有帮助的话，，，记得点个支持和收藏哦！