uniapp混合开发实现支付功能

以下代码兼容微信H5、支付宝H5、微信小程序、支付宝小程序

下载js插件放在utils工具包下面 /utils/jweixin-1.6.0.js

链接: https://pan.baidu.com/s/1wKE7DgejCcW5ZT7Sib_IVA?pwd=w8ju

1.在微信H5是调用JsApi的chooseWXPay

参考文档：微信支付-开发者文档

2.在支付宝H5是调用forms表单弹出支付窗口

参考文档：小程序文档 - 支付宝文档中心

3.在微信小程序是调用uni.requestPayment

参考文档：uni.requestPayment(OBJECT) | uni-app官网

4.在支付宝小程序是调用my.tradePay

参考文档：小程序文档 - 支付宝文档中心

<template>
	<view class="payment">
		<view class="btn" @click="handlePayment()">
			支付
		</view>
	</view>
</template>

<script>
	// #ifdef H5
	//引用微信jssdk
	import wechatJssdk from '@/utils/jweixin-1.6.0.js'
	// #endif
	export default {
		data() {
			return {

			};
		},
		mounted() {},
		onLoad() {},
		methods: {
			// 判断是否在微信浏览器内
			isWechat() {
				// #ifdef H5
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
				// #endif
			},
			// 判断是否在支付宝浏览器内
			isAlipay() {
				// #ifdef H5
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.indexOf('alipay') > -1) {
					return true;
				} else {
					return false;
				}
				// #endif
			},

			async loginLogic(payInfo) {
				// #ifdef H5
				if (this.isWechat()) { // 微信h5支付
					await wechatJssdk.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: payInfo.appId, // 必填，公众号的唯一标识
						timestamp: payInfo.timeStamp, // 必填，生成签名的时间戳
						nonceStr: payInfo.nonceStr, // 必填，生成签名的随机串
						signature: payInfo.signature, // 必填，签名
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
					})
					wechatJssdk.ready(() => {
						wechatJssdk.chooseWXPay({
							// 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
							appId: payInfo.appId,
							timestamp: payInfo.timeStamp, // 必填，生成签名的时间戳
							nonceStr: payInfo.nonceStr, // 必填，生成签名的随机串
							package: payInfo.package,
							signType: payInfo.signType,
							paySign: payInfo.paySign, // 必填，签名
							success: async (res) => { // 支付成功后的回调函数
								console.log('支付成功' + res)
							},
							fail: (req) => {
								alert(JSON.stringify(req))
								uni.showToast({
									icon: "none",
									title: "取消支付"
								})
							},
							complete: () => {
								uni.hideLoading()
							}
						})
					})
				}

				if (this.isAlipay()) { // 支付宝h5支付
					document.querySelector('body').innerHTML = payInfo.html;

					this.$nextTick(() => {
						document.forms[0].submit()
					})
				}
				// #endif

				// #ifdef MP-WEIXIN
				uni.requestPayment({
					timeStamp: payInfo.timeStamp, // 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
					nonceStr: payInfo.nonceStr, // 随机字符串，长度为32个字符以下
					package: payInfo.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
					signType: payInfo.signType, // 签名算法，应与后台下单时的值一致
					paySign: payInfo.paySign, // 签名，具体见微信支付文档
					success(res) { // 成功的回调
						console.log('支付成功' + res)
					},
					fail(res) { // 失败的回调
						uni.showToast({
							icon: "none",
							title: "取消支付"
						})
					}
				})
				// #endif

				// #ifdef MP-ALIPAY
				my.tradePay({
					tradeNO: payInfo.trade_no, // 支付宝交易号
					success: (res) => {
						if (res.resultCode == 9000) {
							console.log('支付成功' + res)
						} else if (res.resultCode == 6001) {
							uni.showToast({
								icon: "none",
								title: "取消支付"
							})
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: "none",
							title: "支付失败"
						})
					}
				})
				// #endif
			},

			// 触发支付按钮事件
			async handlePayment() {
				let res = await this.$http('/accounts/charging/pay', params)
				if (res.code === 200) {
					let payInfo = res.data
					this.loginLogic(payInfo)
				} else {
					uni.showToast({
						icon: "none",
						title: res.message
					})
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.payment {
		.btn {
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #55aaff;
			font-size: 36rpx;
			color: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;
		}

	}
</style>