uni-app微信小程序支付、支付宝小程序支付、微信网页H5微信支付和非微信网页H5唤起支付宝支付

做移动端项目时，大多数都会遇到支付问题，这里大概说一下uni-app在各个环境下的支付问题
通过官网文档支付(uni.requestPayment)可以解决微信小程序支付和支付宝小程序支付，大致代码如下：

// this.payInfo是后台接口返回的订单数据

// #ifdef MP-ALIPAY
uni.requestPayment({
	provider: 'alipay', // 服务提供商 支付宝支付: alipay   微信支付: wxpay
	orderInfo: this.payInfo.orderNo, // 支付宝订单号
	success: function (res) {
		console.log('success:' + JSON.stringify(res))
		// DOTO 支付成功后的代码逻辑
	},
	fail: function (err) {
		console.log('fail:' + JSON.stringify(err))
	}
})
// #endif
// #ifdef MP-WEIXIN
uni.requestPayment({
	provider: 'wxpay',
	"appId": this.payInfo.appId, //公众号名称，由商户传入
	"timeStamp": this.payInfo.timeStamp, //时间戳
	"nonceStr": this.payInfo.nonceStr, //随机串
	"package": this.payInfo.package, //扩展包
	"signType": "MD5", //微信签名方式:MD5
	"paySign":  this.payInfo.paySign, //微信签名
	success: function (res) {
		console.log('success:' + JSON.stringify(res))
		// DOTO 支付成功后的代码逻辑
	},
	fail: function (err) {
		console.log('fail:' + JSON.stringify(err))
	}
})
// #endif

微信网页H5微信支付：

// #ifdef H5
WeixinJSBridge.invoke('getBrandWCPayRequest', {
    "appId": this.payInfo.appId, //公众号名称，由商户传入
    "timeStamp": this.payInfo.timeStamp, //时间戳
    "nonceStr": this.payInfo.nonceStr, //随机串
    "package": this.payInfo.package, //扩展包
    "signType": "MD5", //微信签名方式:MD5
    "paySign":  this.payInfo.paySign //微信签名
}, function (res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
	uni.showToast({
		title: '支付成功',
		icon: 'none'
	})			
} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
	uni.showToast({
		title: '支付取消',
		icon: 'none'
	})
} 
}, function (err) {
	console.log('err', err)
})
// #endif

普通浏览器(非微信内置浏览器)H5唤起支付宝支付:
支付宝网页支付文档
后端在创建完订单后会返回给前端一个 form 表单，然后我们调用这个 submit 发放就可以拉起支付宝支付(确保手机已安装支付宝)

<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST' style='display:none;'><input  name='app_id' value='2018112862379107'/><input  name='biz_content' value='{"out_trade_no":"128364080120200410215712135779","product_code":"QUICK_WAP_WAY","quit_url":"https://xxx.xxx.com/","total_amount":1.00,"subject":"5折乘车优惠券","timeout_express":"12h"}'/><input  name='charset' value='UTF-8'/><input  name='format' value='json'/><input  name='method' value='alipay.trade.wap.pay'/><input  name='notify_url' value='https://xxx.xxx.com/TenPay/AliReturnUrl'/><input  name='sign_type' value='RSA2'/><input  name='timestamp' value='2020-04-10 21:57:12'/><input  name='version' value='1.0'/><input  name='sign' value='pDoQrB8xCrSzhBh+M6JK2mveDEW8aY92BvIi7l52bYYIBD6mBveJjPKqcLLBsc2Zj1bNVODK5k5cCSoDHFJMipwJf8Amqbu9O4N72DiA/XEYMJgHYQKqM0oBFMfbPQDnURj+Z4yX2c9EU4Pb6fzT9BwVtHKgkc/13GiQCMLnoUUksYj81J+VLK1OLEW6POtIrQTSm9SL+WC9yWPTMWh646/f7ZqrCNydcrgljrErAaOgtdGRGPmvowSdWy+3To65aS1tz2uvcndD/vmFsgezkHS8f+aWqklN+s94+HPx58c3nVPFKSAR2gSpk7x/pc/WC/6DpjHX9K3X0unrVX/kDg=='/><input type='submit' value='POST' style='display:none;'></form><script>document.forms['alipaysubmit'].submit();</script>

// 创建支付订单的接口成功回调
...
success: (res) => {
	const div = document.createElement('div')
	div.innerHTML = res.data.aliPayBody // 返回的 form
	document.body.appendChild(div)
}
...

// 点击支付 通过 document.forms.alipaysubmit.submit() 提交表单唤起支付宝支付
// #ifdef H5
const inBrowser = typeof window !== 'undefined'
const UA = inBrowser && window.navigator.userAgent.toLowerCase()
if (!(/micromessenger/ig.test(UA))) { // 非微信浏览器
	document.forms.alipaysubmit.submit()
}
// #endif

没有安装支付宝APP就是这个样子，安装了的就会唤起支付宝APP进入支付页面