转载声明：文章来源https://blog.csdn.net/CRMEB/article/details/119969860 

在前段时间的开发需求中，有一项uniapp H5和APP端接入支付宝功能的需求，虽然这项功能前端的工作并不多，但还是根据这次的开发经验和踩过的坑做一个分享。

首先在对项目开启支付功能，在项目的manifest.json文件中勾选APP模块配置中的Payment支付模块，并且勾选支付宝支付和下面列出的ios和Android

根据需要在h5跟APP端都做支付宝的唤起支付，唤起orderInfo 的格式在APP和h5上有很大的差异，在这一点上浪费了一些时间,在此贴出支付宝的文档

支付宝开发文档

H5端唤起支付宝。所需要的参数是后端返回的一个form表单，获取成功后端返回的内容以后将表单内容用v-html置入标签中，然后提交表单便会执行唤起

针对于支付宝支付的使用，截取核心代码如下：

<template>
	<view>
	<!-- 省略无关内容 -->
		<view class="alipaysubmit" v-html="formContent"></view>
	</view>
</template>
<script>
	export default {
		data(){
			return {
				formContent:''
			}
		},
		methods:{
			getOrderPay: function(orderNo, message) {
				let that = this; 
				let goPages = '/pages/order_pay_status/index?order_id=' + orderNo + '&msg=' + message;
				wechatOrderPay({
					orderNo: orderNo,
					payChannel: that.payChannel,
					payType: that.payType,
					scene: that.productType==='normal'? 0 :1177 //下单时小程序的场景值
				}).then(res=>{
					switch (res.data.payType) { //支付类型
						case 'alipay': //支付宝支付
							//#ifdef H5
							if (this.$wechat.isWeixin()) {
								uni.redirectTo({
									url: `/pages/users/alipay_invoke/index?id=${orderNo}`
									//公众号中使用支付宝支付是做了一个到浏览器中支付的引导，因为微信浏览器不支持唤起支付宝
								});
							} else {
								//h5支付
								uni.hideLoading();
								that.formContent = res.data.alipayRequest; //后端给的form表单，也是唤起支付宝的关键
								that.$nextTick(() => {
									document.forms['punchout_form'].submit(); 
									//这里就是提交表单唤起支付宝，中括号中的name名称，要与后端给的form表单name名称一致，
								})
							}
							//#endif
							// #ifdef APP-PLUS
							let alipayRequest = res.data.alipayRequest; 
							uni.requestPayment({
								provider: 'alipay', 
								orderInfo: alipayRequest, //APP端唤起支付宝所需的orderInfo,数据类型为string
								success: (e) => {
									uni.showToast({
										title: "支付成功"
									})
									setTimeout(res => {
										uni.navigateTo({
											url:'/pages/users/alipay_return/alipay_return?out_trade_no=' + orderNo + '&payChannel=' + 'appAlipay'
										})
									}, 1000) 
								},
								fail: (e) => {
									uni.showModal({
										content: "支付失败",
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												//点击确认的操作
												uni.navigateTo({
													url:'/pages/users/alipay_return/alipay_return?out_trade_no=' + orderNo + '&payChannel=' + 'appAlipay'
												})
											} else if (res.cancel) {
												
											}
										}
									})
								},
								complete: () => {
									uni.hideLoading();
								},
							});
							// #endif
							break;
					}
				})
			}
		}
	}
</script>

其实开发完成以后发现APP端唤起支付宝更为简单，但是这个过程中踩过一个坑，我以为orderInfo的值可以参照文档和后端给的一些键值对在前端自己拼接，但是总是唤起失败，后来联系支付宝的蚂蚁技术支持中心的客服，经过沟通以后，才知道这个orderInfo必须在后端用支付宝SDK生成以后返回给前端，这样一来，果然唤起成功。