标签：alipay uniapp 支付宝 res 支付 uni orderNo 前端开发

uniapp支付宝支付的前端开发经验分享

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

根据需要在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; // 这里是后端返回的支付所需的订单信息，后端用支付宝SDK生成，前端切勿拼接
							uni.requestPayment({
								provider: 'alipay', 
								orderInfo: alipayRequest, 
								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>

h5示例: CRMEB-JAVA.
gitee开源地址: CRMEB-JAVA.
都看到这里了，点击上面gitee链接给个star吧

标签：alipay,uniapp,支付宝,res,支付,uni,orderNo,前端开发
来源： https://blog.csdn.net/yesterdaycss/article/details/120513034

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。