【uniapp调用微信支付】uniapp开发小程序-调用微信支付

小跳不会Coding

已于 2023-11-29 16:02:19 修改

阅读量1.6w

点赞数 17

分类专栏： uniapp 文章标签： uniapp 微信支付小程序支付接口后端交互

于 2022-07-15 15:44:28 首次发布

本文链接：https://blog.csdn.net/weixin_48596030/article/details/125805895

版权

uniapp 专栏收录该内容

65 篇文章 11 订阅

订阅专栏

在这里插入图片描述

使用uniapp开发小程序时，调用微信支付的步骤如下：

第一步、manifest.json里配置相关参数

1.在manifest.json - App模块权限选择中勾选 payment(支付)
2.在 manifest.json - App SDK配置中，勾选需要的支付平台，目前有微信支付、支付宝支付、苹果应用内支付(IAP)，其中微信支付需要填写从微信开放平台获取的

在这里插入图片描述

第二步、代码

1.微信小程序支付-代码：

这里的timeStamp, nonceStr, package, signType, paySign是由后端与微信交互生成后，通过接口传递过来的，调用接口直接取出来即可。
在这里插入图片描述

<view class="footbut" @tap="payBtn(goodsdetail.id)">立即购买</view>

	// ①立即购买-订单提交
	payBtn(id) {
		var that = this;
		var data = {
			id:id
		}
		this.$api.appPlateForm('POST', this.$url.url.wx_order_submit, data, function(res) {
			console.log("订单提交", res)
			that.payment(res.data.order_id)  //调用支付接口
		})
	},

	//②支付接口
	payment(order_id) {
		var that = this;
		var data = {
			order_id: order_id
		}
		this.$api.appPlateForm('POST',this.$url.url.wx_order_paydata, data, function(res) {
			console.log("订单提交", res)
			uni.requestPayment({
				provider: 'wxpay', //支付类型-固定值
				timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
				nonceStr: res.data.nonceStr, // 随机字符串
				package: res.data.package, // 固定值
				signType: res.data.signType, //固定值
				paySign: res.data.paySign, //签名
			
				success: function(res) {
					// console.log('success:' + JSON.stringify(res));
					console.log("支付成功");
					uni.showToast({
						icon: 'success',
						title: '支付成功'
					})
					
					//清空输入框
					that.name = ''
					that.idcard = ''
					
					//2秒后跳转订单列表
					setTimeout(() => {
						uni.navigateTo({url:'/pages/shop/uni_order'})}, 2000)
					},
			
				fail: function(err) {
					// console.log('fail:' + JSON.stringify(err));
					console.log("支付失败");
					uni.showToast({
						icon: 'none',
						title: '支付失败'
					})
					// //2秒后返回
					// setTimeout(() => {uni.navigateBack() }, 2000)},
			});
		})
	},

2.APP支付代码：

//订单对象，从服务器获取
var orderInfo = {
  "appid": res.data.orderInfo.appId,  // 应用ID（AppID）
  "partnerid": res.data.orderInfo.partnerId, // 商户号（PartnerID）
  "prepayid": res.data.orderInfo.prepayId,  // 预支付交易会话ID
  "package": res.data.orderInfo.packageValue,        // 固定值
  "noncestr": res.data.orderInfo.nonceStr, // 随机字符串
  "timestamp": res.data.orderInfo.timeStamp, // 时间戳（单位：秒）
  "sign": res.data.orderInfo.sign, // 签名，这里用的 MD5 签名
};

uni.requestPayment({
    provider: "wxpay",
    orderInfo: orderInfos,
    success(res) {
            console.log('success:' + JSON.stringify(res));
            console.log("支付成功");
    },
    fail(err) {
            console.log('fail:' + JSON.stringify(err));
            console.log("支付失败");                        
    });