手机网站支付(在uniapp同时支持H5和app!)
前言
uniapp开发项目时，遇到对接
支付宝手机网站支付。如果仅仅是H5端，那分分钟搞定的(不就是调用后端接口，提交返回表单即可调起支付)。然而，这次需求是H5和App都使用该支付。这倒是新奇了，App中能使用支付宝手机网站支付吗？那它怎么提交表单，怎么处理支付成功时的回调页面跳转？
若你仅H5使用支付宝手机网站支付参考我的文章
一、使用技术
- 解决app如何提交表单:
renderjs: app-vue 中调用在视图层操作dom，运行for web的js库
参考文章 - 解决app处理支付成功时的回调页面跳转:
uni.webview.1.5.4.js: 引入该js，使得普通的H5支持uniapp路由跳转接口参考uniapp文档
二、思路描述
注意：此处会详细描述思路，请根据自身项目需要自行更改
step1|✨用户点击支付
async aliPhonePay() {
let urlprefix = baseUrl == '/api' ?
'http://192.168.105.43'
:
baseUrl;
let params = {
/**1. 支付成功回调页面-中转站*/
// #ifdef H5
frontUrl: `${urlprefix}/middle_html/h5.html?type=${this.formartOrderType(this.orderInfo.orderSn)}`,
// #endif
// #ifdef APP
frontUrl: `${urlprefix}/middle_html/app.html?type=${this.formartOrderType(this.orderInfo.orderSn)}`,
// #endif
goodsDesc: this.orderInfo.itemName,
goodsTitle: this.orderInfo.itemName,
orderSn: this.orderInfo.orderSn,
orderType: this.formartOrderType(this.orderInfo.orderSn),
paymentPrice: (this.orderInfo.paymentPrice*1).toFixed(2),
payChannel: this.paymentType,
// 快捷支付必传
bizProtocolNo: this.bankInfo.bizProtocolNo, //用户业务协议号 ,
payProtocolNo: this.bankInfo.payProtocolNo, //支付协议号
}
this.$refs.dyToast.loading()
let { data } = await PayCenterApi.executePayment(params)
this.$refs.dyToast.hide()
/**2. 保存请求得到的表单到strorage，跳转页面*/
uni.setStorageSync('payForm', data.doPost);
uni.redirectTo({
url:`/pages/goods/goodsOrderPay/new-pay-invoke`
})
},
/pages/goods/goodsOrderPay/new-pay-invoke： h5和app都支持的提交表单调起支付方式
<template>
<view class="new-pay-invoke-container">
<view :payInfo="payInfo" :change:payInfo="pay.openPay" ref="pay"></view>
<u-loading-page loading loading-text="调起支付中"></u-loading-page>
</view>
</template>
<script>
export default {
name: 'new-pay-invoke',
data() {
return {
payInfo: ''
}
},
onLoad(options) {
this.payInfo = uni.getStorageSync('payForm');
}
}
</script>
<script module="pay" lang="renderjs">
export default {
methods: {
/**h5和app都支持的提交表单调起支付方式*/
openPay(payInfo, oldVal, ownerInstance, instance) {
// console.log(payInfo, oldVal, ownerInstance, instance);
if(payForm) {
document.querySelector('body').innerHTML = payInfo
const div = document.createElement('div')
div.innerHTML = payForm
document.body.appendChild(div)
document.forms[0].submit()
}
}
}
}
</script>
<style lang="scss" scoped>
</style>
step2|✨支付成功回调页面
app.html: 作为一个网页，放到线上服务器，注意需要与传递给后端回调地址保持一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>app支付成功回调页面-中转站</title>
</head>
<body>
<!-- uni 的 SDK -->
<!-- 需要把 uni.webview.1.5.4.js 下载到自己的服务器 -->
<script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
/**引入uni.webview.1.5.4.js后，就支持uni各种路由跳转，使得该H5页面能控制uniapp App页面跳转*/
/**这里做的事是判断订单类型，跳转到app对应的订单支付成功页面 */
uni.reLaunch({
url: '对应支付成功页面?payCallback=1'
// 加payCallback=1参数原因：支付成功页面有时是订单记录，而订单
// 记录不用走支付流程，用户也能进入。这时就需要该参数判断点击
// 返回是 返回上一级 还是 返回首页了
});
});
</script>
</body>
</html>
h5.html：与app.html做法一致，但不需要用到uni.webview.1.5.4.js，这里就不赘述了
以上就是app和h5使用支付宝手机网站支付的全部流程了。
app有点小瑕疵(app提交表单页面后，支付宝页面导航栏会塌陷到状态栏，用户体验稍微差点)
我的猜想：
h5按正常表单提交走，而app利用<webview src="本地网页？表单参数" />本地网页，获取表单参数并拼接表单提交
还没具体去实现这个猜想，或者大家有更好的解决方式，欢迎评论区展示!!!
作者：爆竹
来源：juejin.cn/post/7276692859967864891
来源：juejin.cn/post/7276692859967864891
