手机网站支付在uniapp同时支持H5和app!

在 Uniapp 中实现移动网站支付，同时支持 H5 和 App

什么是移动网站支付？

移动网站支付是一种通过手机浏览器在网上进行购买的支付方式。这种支付方式既方便又安全，只需要几步操作就可以完成付款。

如何使用 Uniapp 实现移动网站支付？

要使用 Uniapp 实现移动网站支付，可以使用 renderjs 和 uni.webview()。renderjs 是一个可以在 App 中调用视图层 DOM 操作的库，而 uni.webview() 是一个可以在 App 中打开 Webview 的函数。

步骤：

1. 使用 renderjs 提交表单

import renderjs from 'renderjs';

export default {
  methods: {
    submitForm() {
      // 获取表单元素
      const form = document.getElementById('form');

      // 提交表单
      renderjs.call('submit', form);
    }
  }
}

2. 使用 uni.webview() 处理支付成功时的回调页面跳转

import uni from '@dcloudio/uni-mp-weixin';

export default {
  methods: {
    onPaymentSuccess() {
      // 关闭 webview
      uni.webview.close();

      // 跳转到支付成功页面
      uni.navigateTo({
        url: '/pages/payment-success/payment-success'
      });
    }
  }
}

注意事项：

• 在 App 中使用 renderjs 时，需要先在 App 的 config.json 文件中配置 renderjs 的路径。
• 在 App 中使用 uni.webview() 时，需要先在 App 的 manifest.json 文件中配置 webview 的权限。
• 在 App 中处理支付成功时的回调页面跳转时，需要在 App 的 config.json 文件中配置跳转的页面路径。

结论：

通过以上方法，就可以在 Uniapp 中实现移动网站支付，同时支持 H5 和 App。这种方法既简单又方便，可以为用户提供流畅的支付体验。

常见问题解答：

1. 为什么需要使用 renderjs 和 uni.webview() 而不是直接在 App 中实现支付？

使用 renderjs 和 uni.webview() 可以实现跨平台的移动网站支付，同时避免与 App 中的支付系统冲突。

2. 如何在 App 中配置 renderjs？

在 App 的 config.json 文件中添加以下代码：

{
  "usingComponents": {
    "renderjs": "/static/renderjs/dist/renderjs.js"
  }
}

3. 如何在 App 中配置 uni.webview()？

在 App 的 manifest.json 文件中添加以下代码：

{
  "permission": {
    "webview": {
      "domain": "*"
    }
  }
}

4. 如何处理支付失败的情况？

可以使用 uni.webview() 中的 onMessage 事件监听支付结果，并根据支付结果进行相应的处理。

5. 在开发过程中遇到问题时，可以向谁寻求帮助？

可以向 Uniapp 社区或其他开发者寻求帮助，也可以在 Uniapp 官方文档中查找相关资料。