uniapp开发的小程序中调用微信支付

桃扇骨 2023-01-19 03:10 58阅读 0赞

# 实操 #

## 后端准备 ##

下图中所标字段，都由后端在微信处取得，然后后端应该给出一个接口，去获取这些字段的信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

## 前端调用接口请求 ##

前端调用后端给的接口，获取下图中的信息，一般前端还需要携带支付金额（以一分为单位）以及当前交易的说明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]

比如我的代码如下

openVip(){ 
    			this.showLoading();
    			let that = this;
    			let mydata = { };
    			//当前用户的openid
    			mydata.open_id = getApp().globalData.openid;
    			//本次交易的说明
    			mydata.body = "开通vip测试";
    			//此次交易的金额，以1分为单位
    			mydata.total_fee = "1";
    			console.log('aaa');
    			console.log(mydata);
    			//把这些信息发给后端，后端会返回上图标注的那些字段
    			uni.request({ 
    				url: that.apiHost.prepare_pay,
    				data: mydata,
    				success: res => { 
    					console.log(res)
    					if (res.data.ret == 1) { 
    						uni.hideLoading();
    						that.zhifu = Object.assign({ },that.zhifu,res.data.data)
    						that.to_pay();
    					}else{ 
    						that.showTip(res.data.msg);
    					}
    				},
    				fail() { 
    					uni.hideLoading();
    				},
    				complete() { }
    			});
    		},

## 前端调用wx.requestPayment ##

拿到上面的字段以后，前端就可以调用`wx.requestPayment`完成相应支付,我的代码如下

to_pay(){ 
    	let that = this;
    	let zhifu = that.zhifu;
    	wx.requestPayment({ 
    	  timeStamp: zhifu.timeStamp,
    	  nonceStr: zhifu.nonceStr,
    	  package: zhifu.package,
    	  signType: 'MD5',
    	  paySign: zhifu.paySign,
    	  success (res) {  
    		  //看看vip是否开通成功
    		  console.log(res)
    		  let that = this;
    		  let userInfo = getApp().globalData;
    		  let openid = getApp().globalData;
    		  //后面的这个请求，我只用用来校验后端是否将数据同步了（后端是否标注开通vip）
    		  uni.request({ 
    		  	url: that.apiHost.get_user_info,
    		  	data: { 
    		  		open_id: openid
    		  	},
    		  	success: (data) => { 
    				console.log("getUserInfo")
    				console.log(data)
    				const backData = data.data.data
    				if(backData.is_vip == "1"){ 
    					userInfo.is_vip = backData.is_vip;
    					userInfo.vip_end_time = backData.vip_end_time;
    					uni.showToast({ 
    					    title: '开通成功，正在跳转',
    					    duration: 2000,
    						complete() { 
    							uni.navigateBack();
    						}
    					});
    				}else{ 
    					that.showTip("开通失败，请联系客服");
    				}
    				
    		  	},
    		  	fail() { 
    		  	},
    		  	complete() { 
    		  
    		  	}
    		  })
    	  },
    	  fail (res) { 
    		  console.log(res)
    	  }
    	})
    }

# 相关文档 #

[wx.requestPayment][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20221021/33463fea9d654578a42465b5cb13eee5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]: /images/20221021/360d3671e73440d8872c73ea198e8074.png
[wx.requestPayment]: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html