uniapp前端实现微信支付（小程序、公众号H5、app）

在现代移动互联网应用中，微信支付已成为一种普遍的支付方式，尤其是在小程序、微信公众号H5和APP中。本文将详细介绍如何在uniapp中实现微信支付，并提供相应的代码示例。

一、基本概述

uniapp是一个跨平台框架，能够让我们通过一次开发，便可以在多种平台上运行，包括小程序、H5和APP。要在uniapp中实现微信支付，首先需要了解其支付流程。微信支付的流程通常包括以下几个步骤：

1. 客户端发起支付请求，服务器生成订单并返回预支付信息。
2. 客户端调用微信的支付接口进行支付。
3. 微信支付处理支付结果，并返回支付结果信息给客户端。

二、准备工作

1. 申请微信支付商户号：访问微信商户平台（https://pay.weixin.qq.com）申请并设置相关参数。
2. 配置uniapp：确保你的uniapp项目中已经设置了相关的appid和商户号。

三、服务端生成预支付订单

首先，我们需要在服务端生成一个预支付订单并返回给前端。以下是一个简单的Node.js示例代码：

const express = require('express');
const crypto = require('crypto');
const axios = require('axios');
const xml2js = require('xml2js');

const app = express();
const PORT = 3000;

app.use(express.json());

app.post('/createOrder', async (req, res) => {
    const { totalFee, openid } = req.body;

    const appid = 'your_appid';
    const mch_id = 'your_mchid';
    const key = 'your_api_key';
    const nonce_str = Math.random().toString(36).substr(2, 15);
    const body = '商品描述';
    const trade_type = 'JSAPI';

    const params = {
        appid,
        mch_id,
        nonce_str,
        body,
        out_trade_no: `${Date.now()}`,
        total_fee: totalFee,
        spbill_create_ip: req.ip,
        notify_url: 'https://yourdomain.com/pay/notify', // 接收支付结果通知的URL
        trade_type,
        openid,
    };

    // 签名
    const stringA = Object.keys(params).sort().map(key => `${key}=${params[key]}`).join('&');
    const stringSignTemp = `${stringA}&key=${key}`;
    const sign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase();
    params.sign = sign;

    const builder = new xml2js.Builder();
    const xml = builder.buildObject(params);

    // 发起请求
    try {
        const response = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', xml, {
            headers: {
                'Content-Type': 'text/xml',
            },
        });

        const result = await xml2js.parseStringPromise(response.data);
        res.json(result.xml);
    } catch (error) {
        console.error(error);
        res.status(500).send('Server Error');
    }
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

四、uniapp前端调用微信支付

在uniapp中，我们通过调用下述方法来发起支付请求：

// 发起支付请求
async function initiatePayment(orderData) {
    const response = await uni.request({
        url: 'https://yourdomain.com/createOrder',
        method: 'POST',
        data: {
            totalFee: orderData.totalFee,  // 订单金额
            openid: orderData.openid,        // 用户openid
        },
    });

    if (response.statusCode === 200) {
        const payData = response.data;

        // 调用支付接口
        uni.requestPayment({
            provider: 'wxpay',
            timeStamp: payData.timeStamp,
            nonceStr: payData.nonceStr,
            package: payData.package,
            signType: 'MD5',
            paySign: payData.sign,
            success(res) {
                console.log('支付成功', res);
            },
            fail(err) {
                console.error('支付失败', err);
            }
        });
    } else {
        console.error('订单创建失败', response);
    }
}

// 例如在页面的某个按钮的点击事件中调用
methods: {
    async onPay() {
        const orderData = {
            totalFee: 1, // 订单金额
            openid: '用户openid',
        };
        await initiatePayment(orderData);
    }
}

五、总结

通过上述方法，我们可以实现uniapp中微信支付的集成。服务端负责生成订单与签名，而前端则利用uni.requestPayment调用微信支付接口进行支付。这种结构清晰的实现方式，可以帮助开发者快速上手并集成微信支付功能。

注意事项： - 在实际开发中，记得处理支付结果的回调逻辑。 - 确保请求的安全性，例如使用HTTPS。 - 进行充分的测试，以确保在不同场景下支付能够成功进行。