一、創(chuàng)建 UniAppX 項目

新建項目

打開 HBuilderX → 文件 → 新建 → 項目
選擇 uni-app項目模板 → 勾選 uni-app x 和 Vue 3 → 輸入項目名稱 → 創(chuàng)建。

my-project/
  ├── uni_modules/          # 存放插件的目錄（需手動創(chuàng)建）
  ├── src/                  # 項目源碼
  └── manifest.json         # 項目配置文件

?? 二、創(chuàng)建原生插件

1,新建插件目錄

在 uni_modules/下新建插件目錄，例如 uni-alipay-sdk。
目錄結(jié)構(gòu)如下

uni-alipay-sdk/
  ├── utssdk/             # UTS 插件核心目錄
  │   ├── app-android/    # Android 平臺代碼
  │   │   ├── libs/       # 存放支付寶 SDK 的 JAR/AAR 文件
  │   │   └── index.uts   # Android 端業(yè)務邏輯
  │   ├── app-ios/        # iOS 平臺代碼（可選）
  │   └── interface.uts   # 統(tǒng)一接口定義
  └── 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中統(tǒng)一聲明支付方法：

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

?? 五、實現(xiàn) Android 端邏輯

在 app-android/index.uts中編寫支付功能：

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

// 繼承 UniModule 并實現(xiàn)接口
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由后端生成（需調(diào)用支付寶接口生成簽名訂單）。

?? 六、在項目中調(diào)用插件

1,安裝插件

在 manifest.json中聲明插件依賴：

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

2,前端調(diào)用支付

<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. 調(diào)用插件支付
    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 權(quán)限在 manifest.json中添加網(wǎng)絡(luò)權(quán)限：

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