uniapp前端微信支付代码

1.支付按钮,定义支付事件

<u-button text="立即抢购" @click="payTap" shape="circle" color="#E10000">u-button>

2.支付事件

	// 这些参数根据后端需要什么就传什么,一般有用户id和订单号就行,推广员id和优惠卷id是我们小程序需要的
	let data = {
		openId: this.openId, // 用户id
		courseId: this.detailsObj.id, // 商品id
		promoterId: this.promoterShareId ? this.promoterShareId : '', // 推广员id
		receiveCouponId: this.detailsObj.receiveCouponId ? this.detailsObj.receiveCouponId : '' // 优惠卷id
	}
	// 创建订单接口,后端那边需要创建订单
	wxCreateOrder(data).then(res => {
		// 创建完成后返回订单id
		// 下面接口是为了拿到订单密钥
		payment({
			orderNumber: res.data.orderId, // 订单id
			openId: this.openId, //用户id
		}).then(res1 => {
			let twoData = res1.data.data
			console.log(twoData, '返回密钥')
			// 调用支付api
			// 下面是支付需要的参数,后端那里都能获取到, 返回的参数一定要对应好,多检查一下
			uni.requestPayment({
				appId: twoData.appId, // 小程序的appid
				timeStamp: twoData.timeStamp, // 如果返回的不是字符型就 xx.toString()转一下
				nonceStr: twoData.nonceStr,
				package: twoData.packageValue, // 返回的参数格式是prepay_id='xxx',如果没有prepay_id 就自己加一个 
				signType: twoData.signType,
				paySign: twoData.paySign,
				success(result) {
					// 到这里就调出输入密码了
					console.log(result, '调起支付')
					if (result.errMsg == "requestPayment:ok") {
						//支付成功
						uni.showLoading({
							title: '获取订单状态..',
							mask: true,
						})
 						// 订单支付成功的回调,为了检查订单是否支付成功
						setOrderIsHaveData(_this.orderNum).then(data => {
							uni.hideLoading()
							// 成功了就刷新一下页面
							_this.requestDataAll()
						})
						_this.paySuccess()
					} else {
						uni.showModal({
							title: '',
							content: '支付失败',
							showCancel: false,
							icon: 'none',
							success(res) {}
						})
					}
				},
				fail(result) {
					console.log(result)
					uni.showModal({
						title: '',
						content: '支付失败',
						showCancel: false,
						icon: 'none',
						success(res) {}
					})
				},
			})
		})
	})

你可能感兴趣的:(uni-app,前端,微信)