Expo React Native 微信支付集成指南

Expo React Native 项目集成微信支付需安装第三方 SDK 并配置原生环境。主要步骤包括使用 expo install 安装依赖，修改 app.json 配置 iOS URL Schemes 及 Android 包名，执行 prebuild 生成原生目录。代码层面需在入口注册 AppID 并配置 Universal Link，监听支付回调事件，从后端获取参数后调用 pay 方法发起请求。关键注意点包括签名校验必须由后端完成，iOS Universal Link 配置正确性，以及包名一致性。

墨染流年发布于 2026/3/2更新于 2026/4/181 浏览

本文介绍如何在 Expo 项目中集成微信支付功能。

第一步：安装依赖

首先，在你的 Expo 项目中安装 SDK。推荐使用 expo install 以确保版本兼容性：

npx expo install expo-react-native-wechat-v2

第二步：环境配置

微信支付需要原生环境的支持，因此我们需要在 app.json 中进行必要的配置，并使用 Expo 的 prebuild 功能。

1. 修改 `app.json`

在 expo 配置项下，添加 iOS 的 URL Schemes 和白名单：

{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.yourname.app",
      "infoPlist": {
        "LSApplicationQueriesSchemes": ["weixin", "weixinULAPI", "weixinURLParamsAPI"],
        "CFBundleURLTypes": [
          {
            "CFBundleTypeRole": "Editor",
            "CFBundleURLName": "weixin",
            "CFBundleURLSchemes": ["wx 你的 AppID"]

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

npx expo prebuild

import * as WeChat from 'expo-react-native-wechat-v2';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    WeChat.registerApp('wx 你的 AppID', 'https://你的域名.com/');
  }, []);
  
  // ...
}

import { DeviceEventEmitter } from 'react-native';

useEffect(() => {
  const subscription = DeviceEventEmitter.addListener('WeChat_Resp', (resp) => {
    if (resp.type === 'PayReq.Resp') {
      if (resp.errCode === 0) {
        console.log('支付成功！');
      } else {
        console.log('支付失败或取消', resp.errStr);
      }
    }
  });

  return () => subscription.remove();
}, []);

const handlePay = async () => {
  // 1. 检查是否安装微信
  const isInstalled = await WeChat.isWXAppInstalled();
  if (!isInstalled) {
    alert('请先安装微信');
    return;
  }

  // 2. 调用支付（参数由后端返回）
  try {
    await WeChat.pay({
      partnerId: '商家 ID',
      prepayId: '预支付订单 ID',
      nonceStr: '随机字符串',
      timeStamp: '时间戳',
      package: 'Sign=WXPay',
      sign: '签名'
    });
  } catch (error) {
    console.error('发起支付失败', error);
  }
};

Expo React Native 微信支付集成指南

第一步：安装依赖

第二步：环境配置

1. 修改 `app.json`

更多推荐文章

相关免费在线工具

2. 生成原生目录

第三步：代码实现

1. 初始化 SDK

2. 监听支付回调

3. 发起支付请求

关键注意事项

结语

Expo React Native 微信支付集成指南

第一步：安装依赖

第二步：环境配置

1. 修改 app.json

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2. 生成原生目录

第三步：代码实现

1. 初始化 SDK

2. 监听支付回调

3. 发起支付请求

关键注意事项

结语

1. 修改 `app.json`