在微信小程序中使用微信支付功能

关注

原创 2024-01-29 10:23:43 1.6k 阅读 AI 写同款· GEO 优化 ›

微信小程序完整实现微信支付功能（SpringBoot和小程序）然后到提供前端调用支付路由的类，WechatController类，注意我这里路由拼接的有/wechat/pay/notify，这个要和之前配置yml文件的支付回调函数一样，要不然不行。不久前给公司实现支付功能，折腾了一阵子，终于实现了，微信支付对于小白来说真的很困难，特别是没有接触过企业级别开发的大学生更不用说，因此尝试写一篇我如何从小白实现微信小程序支付功能的吧，使用的后端是SpringBoot。效果如下，这里因为我的手机不能截图支付页面，所以用的开发者工具支付的效果，都是一样的。4.前端（小程序端）阅读详情

相关配置部分不在多说：下面只看代码逻辑部分：

	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中是否有 wxpay
			if (res.provider.indexOf('wxpay') != -1) {
				// 后台支付接口需要的一些参数
				let data = {
					id: that.id,
					pay_type: that.pay_type,
				};
				//发起后台支付接口请求
				that.$api.payMonry(data).then(res => {
					// console.log('微信订单数据', res.data.pay_result)
					//调用uniapp API uni.requestPayment 支付接口
					let { pay_result } = res.data;
					uni.requestPayment({
						provider: 'wxpay', //服务商
						//时间戳
						timeStamp: pay_result.timeStamp,
						//随机字符串
						nonceStr: pay_result.nonceStr,
						//统一下单接口返回的 prepay_id 参数值
						package: pay_result.package,
						//签名算法 如: MD5
						signType: pay_result.signType,
						//签名
						paySign: pay_result.paySign,
						//成功回调
						success: (res) => {
							console.log('success:' + res);
							setTimeout(() => {
								uni.reLaunch({
									uni.reLaunch({
										url: "/pages/user/order/orderList?status=" + 70 + '&type=' + 0
								})
							}, 800)
						},
						//失败回调
						fail: (err) => {
							console.log('fail:' + err);
						}
					})
				}
			}
		}
	})