共计 2106 个字符，预计需要花费 6 分钟才能阅读完成。
在前段时间的开发需要中，有一项 uniapp H5 和 APP 端接入支付宝性能的需要，尽管这项性能前端的工作并不多，但还是依据这次的开发教训和踩过的坑做一个分享。
<font face=” 黑体 ”> 首先在对我的项目开启领取性能，在我的项目的 manifest.json 文件中勾选 APP 模块配置中的 Payment 领取模块，并且勾选支付宝领取和上面列出的 ios 和 Android</font>
<font face=” 黑体 ”> 依据须要在 h5 跟 APP 端都做支付宝的唤起领取，唤起 orderInfo 的格局在 APP 和 h5 上有很大的差别，在这一点上节约了一些工夫, 在此贴出支付宝的文档 </font>
支付宝开发文档
<font face=” 黑体 ”>H5 端唤起支付宝。所须要的参数是后端返回的一个 form 表单，获取胜利后端返回的内容当前将表单内容用 v -html 置入标签中，而后提交表单便会执行唤起 </font>
<font face=” 黑体 ”> 针对于支付宝领取的应用，截取外围代码如下 </font>
<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><font face=” 黑体 ”> 其实开发实现当前发现 APP 端唤起支付宝更为简略，然而这个过程中踩过一个坑，我认为 orderInfo 的值能够参照文档和后端给的一些键值对在前端本人拼接，然而总是唤起失败，起初分割支付宝的蚂蚁技术支持核心的客服，通过沟通当前，才晓得这个 orderInfo 必须在后端用支付宝 SDK 生成当前返回给前端，这样一来，果然唤起胜利。</font>
正文完
