uniapp拉取微信小程序支付

1.申请微信小程序支付

在微信商户号中申请小程序支付,小程序支付申请成功后关联到商户号
在这里插入图片描述

2.hbuilderx中manifest.json设置开启支付功能

在这里插入图片描述

3.uniapp拉取支付接口

async billOpre(item){
	if(item.billStatus==2){
		this.$common.showLoading('加载文档中');
		let fileUrl=`${config.imgUrl}${item.fileUrl}`;
		this.$common.openDocument(fileUrl,this)
	}else{
		//先调后台接口,获取返回的数据,再用返回的数据拉取支付接口
		this.$common.showLoading('获取订单中');
		//传给后端账单金额和账单id(后端要求)
		//此处还需要给后端传递小程序的appId和openId,之前微信一键登录时已经传给后端了,这里就不需要传了
		//后端需要appId,openId,商户号,商户key(API秘钥)
		let data={
			billAmount:item.billAmount,
			id:item.id
		}
		const res=await userApi.ftWorkbenchUserBillSettle(data);
		if(res[1].data.state==200){
			//后端返回的加密数据
			let info=res[1].data.data
			this.$common.hideLoading();
			let _this=this;
			//拿到返回的加密信息拉取支付接口
			uni.requestPayment({
				provider:'wxpay',//服务类型
				timeStamp:info.timeStamp,//时间戳
				nonceStr:info.nonceStr,//随机字符串
				package: info.packageValue,//订单号
				signType: info.signType,//签名类型(MD5)
				paySign: info.paySign,//支付签名
				success(e){
					console.log(e)
					//支付成功状态
					_this.current=2
					_this.active='已结算'
					_this.getMyBillList(2)
				},
				fail(err){
					//支付失败状态
					console.log(err)
					_this.$common.Toast('支付失败')
				}
			})
		}else{
			//获取加密数据失败
			this.$common.hideLoading();
			this.$common.Toast('获取订单失败')
		}
	}
}

4.测试

在这里插入图片描述
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/710cdce08c2e4c0c83cd4ee759412a3a.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAcmF5c2hhYW4wMTIz,size_20,color_FFFFFF,t_70,g_se,x_16

支付成功后需要后端更改订单状态,前端需要重新拉取订单列表,展示最新的订单状态

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值