uniapp离线打包如何实现微信支付功能

在uniapp中进行离线打包时，如何正确集成微信支付功能？我已经按照官方文档配置了AppID和签名，但调用支付接口时一直返回失败。具体需要注意哪些配置细节？是否需要单独申请微信开放平台的移动应用资质？调试阶段有哪些常见错误需要排查？

2 回复

在HBuilderX中配置微信支付参数，使用离线SDK打包。需在manifest.json中配置微信AppID，并在微信开放平台申请支付权限。打包后通过uni.requestPayment调用支付接口。


在 UniApp 中实现微信支付功能，离线打包需通过原生插件集成微信 SDK，并配置相关参数。以下是关键步骤：

1. 准备工作

  • 注册微信开放平台账号，创建应用并获取 AppID。
  • 申请微信支付权限，获取商户号（mch_id）和 API 密钥。

2. 集成微信 SDK（Android 示例）

  • 下载微信 SDK（如 libammsdk.jar），放入 Android 项目的 libs 目录。
  • 在 app/build.gradle 中添加依赖：
    implementation files('libs/libammsdk.jar')

3. 配置 AndroidManifest.xml

添加权限和微信 Activity：

<uses-permission android:name="android.permission.INTERNET" />
<activity
    android:name=".wxapi.WXPayEntryActivity"
    android:exported="true" />

4. 创建 WXPayEntryActivity

在包名目录下创建 wxapi/WXPayEntryActivity.java，处理支付结果回调：

public class WXPayEntryActivity extends Activity implements IWXAPIEventHandler {
    private IWXAPI api;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        api = WXAPIFactory.createWXAPI(this, "你的AppID");
        api.handleIntent(getIntent(), this);
    }
    @Override
    public void onReq(BaseReq req) {}
    @Override
    public void onResp(BaseResp resp) {
        // 处理支付结果，通过 UniApp 事件机制返回给前端
        if (resp.getType() == ConstantsAPI.COMMAND_PAY_BY_WX) {
            // 将 resp.errCode 发送给 UniApp 页面
        }
    }
}

5. UniApp 前端调用

在 UniApp 页面中，通过 uni.request 向服务端请求支付参数，然后调用原生方法：

// 请求服务端生成支付参数
uni.request({
    url: 'https://your-server.com/pay',
    success: (res) => {
        // 调用原生插件触发微信支付
        uni.invokeNative('WXPay', res.data, (result) => {
            if (result.code === 0) {
                uni.showToast({ title: '支付成功' });
            } else {
                uni.showToast({ title: '支付失败：' + result.errMsg });
            }
        });
    }
});

6. 服务端生成签名

服务端需生成预付单并签名（示例为 Node.js）：

const crypto = require('crypto');
function generatePayParams(orderId, totalFee) {
    const params = {
        appid: '你的AppID',
        mch_id: '商户号',
        nonce_str: Math.random().toString(36).substr(2),
        body: '商品描述',
        out_trade_no: orderId,
        total_fee: totalFee,
        spbill_create_ip: '用户IP',
        notify_url: 'https://your-server.com/notify',
        trade_type: 'APP'
    };
    // 生成签名（按参数名排序后拼接并MD5加密）
    const sign = generateSign(params, '你的API密钥');
    params.sign = sign;
    return params;
}

注意事项

  • iOS 配置：需在 Xcode 添加 URL Types（weixin），并在 AppDelegate 中处理微信回调。
  • 签名验证：确保服务端和客户端使用相同的签名算法。
  • 测试：使用微信沙箱环境进行测试，避免正式环境出错。

通过以上步骤，即可在 UniApp 离线打包中实现微信支付功能。重点在于原生模块与 UniApp 的通信，以及服务端的参数生成和签名验证。

回到顶部