关于实现uniapp项目支付宝支付功能_uniapp app 支付宝支付

首先在对项目开启支付功能，在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块，并将需要的信息填写完整，如下图

然后直接上代码，先来看一张效果图：

定义一个按钮并绑定点击事件

<view class="btn">
	<button class="submit" @tap="deposit">立即支付</button>
</view>
1
2
3

下面是逻辑代码：

//支付宝支付
deposit() {
	const that = this;
	// 调用uniapp API uni.getProvider 获取服务供应商
	uni.getProvider({
		/* 获取服务类型，可选值如下:
		* @param share: 分享
		* @param oauth: 授权登录
		* @param push: 推送
		* @param payment: 支付类型
		*/
		service: 'payment',
		success: (res) => {
			/*
			* @ res.service 获取服务供应商 ==> 'payment'
			* @ res.provider 这里选择的是支付类型，所以包含["alipay","wxpay"]
			* ‘alipay’: 表示支付宝
			* ‘wxpay’: 表示微信
			*/
			// 检查res.provider中是否有 alipay
			if (res.provider.indexOf('alipay') != -1) {
				// 后台支付接口需要的一些参数
				let data = {
					id: that.id, // 订单id
					pay_type: that.pay_type // 用户选择的支付类型
				};
				//发起后台支付接口请求
				that.$api.payMonry(data).then(res => {
					// console.log('支付宝订单数据', res);
					//调用uniapp API uni.requestPayment 支付接口
					uni.requestPayment({
						//服务提供商 通过uni.getProvider获取
						provider: 'alipay',
						//后台返回的订单数据
						orderInfo: res.data.pay_result,
						//调用成功的回调
						success(res) {
							// console.log('success:' + res);
							setTimeout(() => {
								uni.reLaunch({
									url: `/pages/user/order/orderList?status=${that.status}&type=${that.type}`
								})
							}, 500)
						},
						//调用失败的回调
						fail(err) {
							console.log('fail:' + err);
						}
					})
				}
			}
		}
	})
}
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

注意：运行调试的话需要在真机环境下进行