【h5调用微信支付】uniapp开发H5-调用微信支付

//1
<view  @click="gopayFun()">支付费用</view>

//2.引入jweixin-module包,导入jweixin-module
<script>
	var wx = require('jweixin-module')
	export default {
	}
</script>
//具体安装:https://www.npmjs.com/package/jweixin-module



//3.去支付(uniapp开发h5-调用支付)
gopayFun() {
	var that = this;
	var params = {
		userid: that.userid,
		total_fee: that.payLowest //支付金额
	}
	this.$api.appPlateForm('GET', 'user/UnifiedOrder', params, function(res) {
		console.log('打印支付res', res)
		if (res.return_code == 'SUCCESS') {
			that.out_trade_no = res.out_trade_no    //订单号
			wx.config({
				debug: false, 
				appId: res.appId, // 必填,公众号的唯一标识
				timestamp: res.timeStamp, // 必填,生成签名的时间戳
				nonceStr: res.nonceStr, // 必填,生成签名的随机串
				signature: res.paySign,
				jsApiList: ['chooseWXPay'] 
			});

			wx.ready(function() {
				wx.chooseWXPay({
					timestamp: res.timeStamp, 
					nonceStr: res.nonceStr, // 支付签名随机串,不长于 32 位
					package: res.package, 
					signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
					paySign: res.paySign, // 支付签名
					success(res) {
						console.log('success:' + JSON.stringify(res));
						//用定时器查询是否为已完成状态(限制执行次数为5次)
						var repeat = 5;  
						that.timer = setInterval(function() {    
							 if (repeat <= 0) {
								clearInterval(timer);
							 } else {
								 repeat--;
								 that.QueryPayResult()	//获取到支付状态
							 }
						}, 1000);
				},
				fail(res) {
					console.log('失败res',res)
					uni.showToast({
						icon:'none',
						title:'未完成支付!'
					})
				}
		   });
	   });
    } else {
		uni.showToast({
			icon: 'none',
			title: res.msg,
			duration: 1500
		})
	}
});
},
			
//微信支付-查询订单支付状态接口
QueryPayResult() {
	var that = this;
	var params = {
		out_trade_no: that.out_trade_no   //订单号
	}
	this.$api.appPlateForm('GET', 'user/QueryPayResult', params, function(res) {
		if (res.trade_state == 'SUCCESS') {
			uni.showToast({
				icon:'none',
				title:'支付成功!'
			})
			//清空定时器
			if(that.timer) {  
				clearTimeout(that.timer);  
				that.timer = null;  
			} 
						
			//进入下一页
			that.steps_active = 2
						
		}else{
			uni.showToast({
				icon:'none',
				title:res
			})
		}
	}, function(err) {
			uni.showToast({
				icon: 'none',
				title: err.msg
			})
		});
},


你可能感兴趣的:(uniapp,微信,javascript,前端)