UniApp 中实现微信支付或支付宝支付功能

最新推荐文章于 2025-05-23 17:25:28 发布

原创最新推荐文章于 2025-05-23 17:25:28 发布 · 3.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信

本文详细介绍了在UniApp中集成微信支付和支付宝支付的功能，包括申请权限、配置参数、调用接口以及处理支付成功和失败的回调结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信支付实现步骤：

申请微信支付接入权限：
- 在微信支付平台注册账号，完成商户认证，获取相应的商户号和密钥等信息。
配置支付参数：
- 在需要支付的页面中，准备好支付所需的参数，包括订单信息、金额、商户号等。
调用微信支付接口：
- 使用 uni.requestPayment() 方法调用微信支付接口，在参数中传入微信支付所需的参数（如timeStamp、nonceStr、package、signType、paySign等）。
处理支付结果：
- 监听支付接口的回调结果，并根据支付结果进行相应的业务逻辑处理，如更新订单状态、跳转支付成功页面等。

支付宝支付实现步骤：

申请支付宝开发者账号：
- 在支付宝开放平台注册账号，创建应用并获取应用ID、应用私钥等信息。
配置支付宝支付参数：
- 在需要支付的页面中，准备支付宝支付所需的参数，包括订单信息、金额、应用ID等。
调用支付宝支付接口：
- 可以使用支付宝官方提供的小程序支付组件，或者通过调用支付宝的接口进行支付请求。
处理支付结果：
- 处理支付接口的回调结果，根据支付结果进行相应的业务逻辑处理，如更新订单状态、跳转支付成功页面等。

在 UniApp 中如何实现微信支付功能：

<template>
  <view>
    <button @tap="handlePay">发起支付</button>
  </view>
</template>

<script>
export default {
  methods: {
    handlePay() {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: '时间戳',
        nonceStr: '随机字符串',
        package: '统一下单接口返回的 prepay_id',
        signType: 'MD5',
        paySign: '签名',
        success: res => {
          console.log('支付成功', res);
          // 处理支付成功逻辑
        },
        fail: err => {
          console.error('支付失败', err);
          // 处理支付失败逻辑
        }
      });
    }
  }
}
</script>

在 UniApp 中如何实现支付宝支付功能：

<template>
  <view>
    <button @tap="handlePay">发起支付</button>
  </view>
</template>

<script>
export default {
  methods: {
    handlePay() {
      uni.request({
        url: '支付接口地址',
        method: 'POST',
        data: {
          order_no: '订单号',
          total_amount: '支付金额',
          subject: '订单标题',
          body: '订单描述'
        },
        success: res => {
          const {
            status,
            data
          } = res.data;
          if (status === 0) {
            uni.showToast({
              title: '支付成功'
            });
            // 处理支付成功逻辑
          } else {
            uni.showToast({
              title: '支付失败'
            });
            // 处理支付失败逻辑
          }
        },
        fail: err => {
          console.error('支付失败', err);
          // 处理支付失败逻辑
        }
      });
    }
  }
}
</script>