uniapp微信支付功能_uniapp 微信支付

前文

微信支付现在作为小程序必备的功能，是一定要掌握的，今天自己整理了一下流程。
思路如下：

• 判断是否满足支付条件
• 调取后台接口(传递参数)
• 接口判断后代返回的参数是否支持支付
• 调用uniapp支付拉起支付页面

代码实现

<template>
	<view>
		<button @click="wxpayment">微信支付</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: '' //用户得地址
			}
		},
		methods: {
			//微信支付
			wxpayment() {
				/*
				1. 调取后台接口(传递参数)
				2.调用uniapp支付接口
				*/
				//判断用户是否满足支付条件 必须有没有收货地址
				if (this.address='') {return}
				//重构微信支付需要得参数
				/*一般微信支付需要获取用户得id 当前时间的时间戳 商品的id 商品的价格、数量*/
				let key=new Date().getTime();
				let uid=this.$store.state.user.uid;//一般用户的i在登录的时候就会存放在vuex中或者本地存储
				//整理参数
				let params={
					key,//时间戳
					uid,//当前登录的用户id
					goods:[{
						spuId:'',//商品id
						skuId:'',//商品规格
						counter://商品数量
					}],
					remark:'',//用户的备注可以为空
					addressId:'',//地址的ID
				}
				//发送请求1后端接口 pay是自己封装的请求接口
				//请求成功以后后端会返回一些数据  一般会返回一个对象params
				pay(params).then(res=>{
					if(res.code==200){
						let params=res.data.params;
						//请求成功以后返回的数据 要作为参数当作支付请求的参数
						// 一般后端返回的参数对象实例
						/*params:{
							appId:'xxxxxxx',
							nonceStr:'xxxxxxxx',
							package:'xxxxxxxxxxx',
							paySign:'xxxxxxxxxxx',
							signType:'MD5',
							timeStamp:'xxxxxx'
						}*/
						uni.requestPayment({
							appId:params.appId,
							nonceStr:params.nonceStr,
							package:params.package,
							paySign:params.paySign,
							signType:params.signType,
							timeStamp:params.timeStamp,
							success(e) {
								console.log(e,'支付成功');
								//这里一般支付成功以后会跳转会主页或者订单页面
							}
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

总结

代码千千万适合自己最重要