uni-app（小程序）使用微信支付详细流程_uniapp小程序微信支付

uni-app（小程序）使用微信支付详细流程

发现网上教程很多，单只针对小程序的简单清晰的流程却很少，我这里来做一下总结。

一.准备工作

• 在微信公众平台中微信公众平台 (qq.com)-开发管理-开发设置中获取我们所需的 AppID和AppSecret

二.开发流程

• 然后通过下面的代码获取到code

  					uni.login({
  						provider: 'weixin',
  						success: function(loginRes) {
  							console.log('-------获取code-------')
  							console.log(loginRes.code);
                          }
                      });
  1
  2
  3
  4
  5
  6
  7

• 然后将code传递给后端，后端开发人员返回openid

• 然后将openid和你当前项目的订单号或者金额数传递给后端，后端会返回5个参数

  timeStamp: res.data.Data.Timestamp,
  nonceStr: res.data.Data.NonceStr,
  package: res.data.Data.PrepayIdPackage,
  signType: "RSA",
  paySign: res.data.Data.paySign,
  1
  2
  3
  4
  5

• 然后通过微信requestPayment方法发送请求

  									wx.requestPayment({
  												timeStamp: res.data.Data.Timestamp,
  												nonceStr: res.data.Data.NonceStr,
  												package: res.data.Data
  													.PrepayIdPackage,
  												signType: "RSA",
  												paySign: res.data.Data.Signature,
  												success: function(res) {
  													// 支付成功处理逻辑
  												},
  												fail: function(res) {
  													// 支付失败处理逻辑
  								
  												}
  											})
  					
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 这是关于小程序端开发全部所需要做的事情，剩下的交给后端开发人员解决就行了。（虽然我也负责了后端开发
  ）

三.下面是完整的代码

					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log('-------获取code-------')
							console.log(loginRes.code);
							uni.request(
								url: 'XXXXXXXXXXXXXXXXXXXXXX?code=' +loginRes.code,
								data: {},
								method: 'GET',
								header: {
									'Content-type': 'application/x-www-form-urlencoded',
								},
								success: (info) => {
									console.log('----获取sessionKey、openid(unionid)----')
									console.log(info.data.Data);
									console.log(that.order.Id)
									// 携带openid（可能要携带金额，传递给后端）
									wx.request({
										url: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
										data: {
											CsOrderId: that.order.Id,
											OpenId: info.data.Data
										},
										method: 'POST',
										header: {
											'contentType': 'application/json',
										},
										success: (res) => {
											console.log(res)
											// 请求成功后，有服务端传过来的5个必要的参数，微信支付API调用，获取支付凭证
											wx.requestPayment({
												timeStamp: res.data.Data.Timestamp,
												nonceStr: res.data.Data.NonceStr,
												package: res.data.Data
													.PrepayIdPackage,
												signType: "RSA",
												paySign: res.data.Data.Signature,
												success: function(res) {
													// 支付成功处理逻辑
												},
												fail: function(res) {
													// 支付失败处理逻辑
										
												}
											})
										},
										fail: (res) => {
											console.log(res)
										}
									});
								},
								fail: (res) => {
									console.log(res.data)
								}
							});
					
						}
					});

			},
								fail: (res) => {
									console.log(res.data)
								}
							});
					
						}
					});
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