当前位置：首页 > uni-app

uniapp实现支付功能

2026-01-13 18:16:49uni-app

支付功能实现概述

在UniApp中实现支付功能通常需要对接第三方支付平台（如微信支付、支付宝支付等）。以下是基于微信支付和支付宝支付的通用实现流程。

微信支付实现步骤

1. 配置支付权限
在微信开放平台申请支付权限，获取AppID、商户号（MCHID）、API密钥等信息。
在UniApp项目的manifest.json中配置微信AppID：

"mp-weixin": {  
    "appid": "你的微信AppID",  
    "setting": {  
        "urlCheck": false  
    }  
}

2. 后端生成预支付订单
前端调用后端接口，后端生成微信预支付订单并返回prepay_id等参数。示例请求：

uniapp实现支付功能

uni.request({  
    url: '后端生成预支付订单的接口',  
    method: 'POST',  
    data: {  
        amount: 100, // 金额（单位：分）  
        orderId: '订单号'  
    },  
    success: (res) => {  
        const paymentData = res.data;  
        this.requestWxPayment(paymentData);  
    }  
});

3. 前端调用微信支付
使用uni.requestPayment发起支付：

requestWxPayment(paymentData) {  
    uni.requestPayment({  
        provider: 'wxpay',  
        timeStamp: paymentData.timeStamp,  
        nonceStr: paymentData.nonceStr,  
        package: paymentData.package,  
        signType: paymentData.signType,  
        paySign: paymentData.paySign,  
        success: (res) => {  
            uni.showToast({ title: '支付成功' });  
        },  
        fail: (err) => {  
            uni.showToast({ title: '支付失败', icon: 'error' });  
        }  
    });  
}

支付宝支付实现步骤

1. 配置支付宝信息
在支付宝开放平台申请支付权限，获取AppID、RSA密钥等信息。

uniapp实现支付功能

2. 后端生成支付订单
后端生成支付宝订单并返回支付参数（如orderInfo）。

3. 前端调用支付宝支付
使用uni.requestPayment：

uni.request({  
    url: '后端生成支付宝订单的接口',  
    method: 'POST',  
    data: { amount: 100, orderId: '订单号' },  
    success: (res) => {  
        uni.requestPayment({  
            provider: 'alipay',  
            orderInfo: res.data.orderInfo,  
            success: (res) => {  
                uni.showToast({ title: '支付成功' });  
            },  
            fail: (err) => {  
                uni.showToast({ title: '支付失败', icon: 'error' });  
            }  
        });  
    }  
});

注意事项

跨平台兼容性：通过uni.requestPayment的provider参数区分支付平台（wxpay或alipay）。
支付结果校验：支付成功后需向后端查询订单状态，避免客户端结果不可靠。
权限与签名：确保后端生成的签名参数正确，否则支付会失败。

示例后端接口逻辑（Node.js）

以微信支付为例，后端需调用微信支付统一下单接口：

const crypto = require('crypto');  
function generateWxPayParams(orderId, amount) {  
    const params = {  
        appid: '微信AppID',  
        mch_id: '商户号',  
        nonce_str: crypto.randomBytes(16).toString('hex'),  
        body: '订单描述',  
        out_trade_no: orderId,  
        total_fee: amount,  
        spbill_create_ip: '用户IP',  
        notify_url: '支付回调地址',  
        trade_type: 'APP'  
    };  
    // 生成签名并返回前端所需参数  
    return params;  
}

以上流程覆盖了UniApp中微信支付和支付宝支付的核心实现步骤，需根据实际业务调整参数和逻辑。