uniappx 创建插件，然后引入支付宝的支付sdk

一、创建 UniAppX 项目

新建项目

打开 HBuilderX → 文件 → 新建 → 项目
选择 uni-app项目模板 → 勾选 uni-app x 和 Vue 3 → 输入项目名称 → 创建。

my-project/
  ├── uni_modules/          # 存放插件的目录（需手动创建）
  ├── src/                  # 项目源码
  └── manifest.json         # 项目配置文件

🔌 二、创建原生插件

1,新建插件目录

在 uni_modules/下新建插件目录，例如 uni-alipay-sdk。
目录结构如下

uni-alipay-sdk/
  ├── utssdk/             # UTS 插件核心目录
  │   ├── app-android/    # Android 平台代码
  │   │   ├── libs/       # 存放支付宝 SDK 的 JAR/AAR 文件
  │   │   └── index.uts   # Android 端业务逻辑
  │   ├── app-ios/        # iOS 平台代码（可选）
  │   └── interface.uts   # 统一接口定义
  └── package.json        # 插件描述文件

2,配置插件信息编辑 package.json

{
  "id": "uni-alipay-sdk",
  "displayName": "支付宝支付插件",
  "version": "1.0.0",
  "description": "集成支付宝SDK的支付功能"
}

⬇️ 三、引入支付宝 SDK

1,获取支付宝 SDK

前往支付宝开放平台→ 下载 Android 版 SDK（通常为 .aar文件）。
将 SDK 文件（如 alipaySdk-xx.x.x.aar）复制到 app-android/libs/目录。

2,配置依赖在 app-android/index.uts中声明 SDK 依赖：

// app-android/index.uts
import AlipaySdk from 'alipaySdk-xx.x.x' // 替换为实际文件名

📝 四、定义插件接口

在 interface.uts中统一声明支付方法：

export interface AlipayPlugin {
  pay(orderInfo: string): Promise<string>;
}

🤖 五、实现 Android 端逻辑

在 app-android/index.uts中编写支付功能：

import { AlipayPlugin } from '../../interface.uts'
import { UniModule } from 'dcloudio/types'

// 继承 UniModule 并实现接口
export default class AlipayModule extends UniModule implements AlipayPlugin {
  private alipaySdk: any;

  // 初始化 SDK
  onCreate() {
    const context = this.getUniContext();
    this.alipaySdk = new AlipaySdk(context, "your_app_id"); // 替换为支付宝 AppID
  }

  // 支付方法
  pay(orderInfo: string): Promise<string> {
    return new Promise((resolve, reject) => {
      this.alipaySdk.pay(orderInfo, new AlipayCallback({
        onSuccess: (result: any) => resolve("支付成功"),
        onFailure: (code: number, msg: string) => reject(`支付失败: ${msg}`)
      }));
    });
  }
}

your_app_id需替换为支付宝开放平台申请的 AppID。
orderInfo由后端生成（需调用支付宝接口生成签名订单）。

📲 六、在项目中调用插件

1,安装插件

在 manifest.json中声明插件依赖：

{
  "uni_modules": {
    "dependencies": {
      "uni-alipay-sdk": "^1.0.0"
    }
  }
}

2,前端调用支付

<script setup>
import { ref } from 'vue'
const alipay = uni.requireNativePlugin('uni-alipay-sdk')

const handlePay = async () => {
  try {
    // 1. 请求后端生成订单信息
    const res = await uni.request({
      url: 'https://your-server.com/create-order',
      method: 'POST'
    })

    // 2. 调用插件支付
    const result = await alipay.pay(res.data.orderInfo)
    uni.showToast({ title: result, icon: 'success' })
  } catch (err) {
    uni.showToast({ title: err, icon: 'none' })
  }
}
</script>

<template>
  <button @click="handlePay">支付宝支付</button>
</template>

⚠️ 七、注意事项

1,密钥安全

切勿在前端存储私钥！订单生成必须由后端完成。
支付宝公钥需在开放平台配置，用于验签。

2,Android 权限在 manifest.json中添加网络权限：

"app-plus": {
  "distribute": {
    "android": {
      "permissions": ["INTERNET"]
    }
  }
}