uniapp封装mixins实现H5和微信小程序的微信支付

// #ifdef H5
import jweixin from '@/js_sdk/jweixin-module/index.js';
// #endif
const wxPay = {
	data() {
		return {
			order: {
				login_id: 0,
				feetype: 'fen',
				states: '0',
				userid: '0',
				yuyue_id: '0',
				charge_id: '0',
				remark: '',
				openid:''
			},
			timer: null,
			zhifu_flag: false
		}
	},
	methods: {
		wxPaySubmit(form) {
			return new Promise((resolve, reject) => {
				// #ifdef MP-WEIXIN
				let data = {};
				data.body = form.body + '(小程序)';
				data.total_fee = parseFloat(form.total_fee) * 100;
				data.openid = this.openid;
				data.notify_url = form.notify_url;
				this.$Ajax.serverPost('后端请求地址', data).then(res => {
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					this.zhifu_flag = false
					let wxdata = {
						adddate: res.data.wxdata.adddate,
						appid: res.data.wxdata.appid,
						body: res.data.wxdata.body,
						mch_id: res.data.wxdata.mch_id,
						nonce_str: res.data.wxdata.nonce_str,
						notify_url: res.data.wxdata.notify_url,
						out_trade_no: res.data.wxdata.out_trade_no,
						sign: res.data.wxdata.sign,
						spbill_create_ip: res.data.wxdata.spbill_create_ip,
						total_fee: res.data.wxdata.total_fee,
						trade_type: res.data.wxdata.trade_type
					}
						let _this = this;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: 'MD5',
							paySign: res.data.paySign,
							success: function(res2) {
								if (res2.errMsg == "requestPayment:ok") {
									clearInterval(_this.timer)
									uni.hideLoading();
							resolve();
							}
						},
						fail: function(err) {
							clearInterval(_this.timer)
							uni.hideLoading();
							reject();
							console.log('fail:' + JSON.stringify(err));
						}
					});
					_this.timer = setInterval(() => {
						// 订单查询
						_this.$Ajax.serverPost('地址', {
							out_trade_no: res.data.wxdata.out_trade_no
						}).then(res5 => {
							if (this.zhifu_flag) return
							if (res5.data.trade_state_desc == '支付成功') {
								this.zhifu_flag = true
								clearInterval(_this.timer)
								resolve();
								uni.hideLoading();
							} else {
								this.zhifu_flag = false
							}
						})
					}, 1000)
				});
				// #endif

				// #ifdef H5
				let data = {};
				data.body = form.body + '(H5)';
				data.total_fee = parseFloat(form.total_fee) * 100;
				data.openid = this.openid;
				data.notify_url = form.notify_url;
				this.$Ajax.serverPost('地址', data).then(res => {
					uni.showLoading({
						title: '加载中...',
						mask: true
					});
					this.zhifu_flag = false
					let wxdata = {
						adddate: res.data.wxdata.adddate,
						appid: res.data.wxdata.appid,
						body: res.data.wxdata.body,
						mch_id: res.data.wxdata.mch_id,
						nonce_str: res.data.wxdata.nonce_str,
						notify_url: res.data.wxdata.notify_url,
						out_trade_no: res.data.wxdata.out_trade_no,
						sign: res.data.wxdata.sign,
						spbill_create_ip: res.data.wxdata.spbill_create_ip,
						total_fee: res.data.wxdata.total_fee,
						trade_type: res.data.wxdata.trade_type
					}
					let _this = this;
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
						signature: res.data.paySign, // 必填，签名
						jsApiList: ['chooseWXPay'],
					});
					jweixin.chooseWXPay({
						appId: res.data.appId,
						timestamp: res.data
							.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32
						package: res.data
							.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: res.data.paySign, // 支付签名
						success: async function(res1) {
							clearInterval(_this.timer)
							uni.hideLoading();
							resolve();
						},
						cancel: function(res1) {
							clearInterval(_this
								.timer)
							uni.hideLoading();
						},
						fail: function(res1) {
							clearInterval(_this
								.timer)
							uni.hideLoading();
							reject();
						}
					});
					_this.timer = setInterval(() => {
						// 订单查询
						_this.$Ajax.serverPost('地址', {
							out_trade_no: res.data.wxdata.out_trade_no
						}).then(res5 => {
							if (this.zhifu_flag) return
							if (res5.data.trade_state_desc == '支付成功') {
								this.zhifu_flag = true
								clearInterval(_this.timer)
								uni.hideLoading();
								resolve();
							} else {
								this.zhifu_flag = false
							}
						})
					}, 1000)
				});
				// #endif
			})
		},
	}
}
export default wxPay;

使用

<script>
	import wxPay from '@/mixins/wxPay.js'
	export default {
		mixins: [wxPay],
		data() {
			return {
				form: {
					notify_url: '回调地址',
					body: '',
					total_fee:0
				}
			};
		},
		
		methods: {
			pay() {
				this.wxPaySubmit(this.form).then(res => {
					uni.showToast({
						title: "支付成功",
						icon: 'none'
					});
				});
			},
		},
	};
</script>