uniapp拉取微信小程序支付

文章目录

• • 1.申请微信小程序支付
  • 2.hbuilderx中manifest.json设置开启支付功能
  • 3.uniapp拉取支付接口
  • 4.测试

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.测试

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