手机网站支付(在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|✨用户点击支付

js 复制代码

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都支持的提交表单调起支付方式

html 复制代码

<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: 作为一个网页，放到线上服务器，注意需要与传递给后端回调地址保持一致

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，这里就不赘述了

css 复制代码

以上就是app和h5使用支付宝手机网站支付的全部流程了。
app有点小瑕疵(app提交表单页面后，支付宝页面导航栏会塌陷到状态栏，用户体验稍微差点)
我的猜想：
    h5按正常表单提交走，而app利用<webview src="本地网页？表单参数" />本地网页，获取表单参数并拼接表单提交
还没具体去实现这个猜想，或者大家有更好的解决方式，欢迎评论区展示!!!