Ionic Vue项目中使用InAppPurchase2插件实现内购遇阻求助

核心问题分析 #

你遇到的verbosity undefined、register不是函数以及插件未安装的错误，根源在于导入了Angular专属的插件版本，同时未遵循Ionic Vue中Cordova插件的正确使用流程。

步骤1：修正导入路径 #

移除/ngx后缀（这是Angular封装的标识），正确导入Vue项目可用的插件版本：

// 错误导入（Angular专用）
// import { InAppPurchase2 } from '@ionic-native/in-app-purchase-2/ngx';

// 正确导入
import { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2';

步骤2：等待平台就绪后初始化 #

Cordova插件必须在Ionic平台完全就绪后才能调用，否则会触发“插件未安装”的错误。结合Platform.ready()确保时机正确：

import { Platform } from '@ionic/vue';
import { InAppPurchase2 } from '@awesome-cordova-plugins/in-app-purchase-2';

const MY_PRODUCT_ID = '你的实际产品ID';

export async function initializeIAP() {
  await Platform.ready();

  // 非Cordova/Capacitor环境（如浏览器）直接跳过
  if (!window.cordova) {
    console.log("[IAP] 当前非原生环境，跳过初始化");
    return;
  }

  console.log("[IAP] 开始初始化IAP");
  InAppPurchase2.verbosity = InAppPurchase2.DEBUG;
  console.log("[IAP] verbosity: " + InAppPurchase2.verbosity);

  InAppPurchase2.register({
    id: MY_PRODUCT_ID,
    type: InAppPurchase2.NON_CONSUMABLE,
  });

  // 添加错误监听排查问题
  InAppPurchase2.on('error', (err) => {
    console.error("[IAP] 错误信息:", err);
  });

  InAppPurchase2.refresh();
}

步骤3：额外检查项 #

• 确保在真实设备或模拟器上测试，浏览器环境不支持Cordova插件
• 若使用Capacitor，执行npx cap sync同步插件到原生项目
• 核对产品ID与苹果App Store/谷歌Play后台配置完全一致
• 重新安装插件后，清理项目缓存并重启开发服务：

  npm install
  npx cap sync
  ionic serve --clean # 或对应平台的运行命令
  

为什么之前的尝试无效？ #

1. 导入/ngx版本：该版本是为Angular的依赖注入系统设计的，Vue项目无法正确解析，导致无法获取插件的真实实例，从而出现方法未定义的错误。
2. 手动实例化new InAppPurchase()：@awesome-cordova-plugins封装的插件均为单例模式，无需手动实例化，直接调用静态方法即可。
3. 未等待平台就绪：Cordova插件依赖原生环境，未就绪时调用会被判定为“未安装”。

内容的提问来源于stack exchange，提问作者Kojiro Hiori