UXP Photoshop 插件示例项目教程

1. 项目的目录结构及介绍

UXP Photoshop 插件示例项目的目录结构如下：

uxp-photoshop-plugin-samples/
├── cross-compatible-js-sample/
├── desktop-helper-sample/
├── direct-action-js-sample/
├── hello-world-js-sample/
├── ui-react-starter/
├── ui-svelte-starter/
├── ui-vue-starter/
├── wasm-rust-sample/
├── web-service-call-js-sample/
├── README.md
├── LICENSE
└── CODE_OF_CONDUCT.md

目录结构介绍

• cross-compatible-js-sample/: 展示如何在 PS 和 XD 开发中捆绑兼容的插件。
• desktop-helper-sample/: 展示如何使用 Electron 和 socket.io 与 UXP 插件通信。
• direct-action-js-sample/: 展示如何创建包含活动 Photoshop 文档中所有图层名称的文件。
• hello-world-js-sample/: 基本的 "Hello World" 示例。
• ui-react-starter/: 展示如何在插件中使用 React。
• ui-svelte-starter/: 展示如何在插件中使用 Svelte。
• ui-vue-starter/: 展示如何在插件中使用 Vue。
• wasm-rust-sample/: 展示如何使用 Rust 和 WebAssembly 在 UXP 插件中进行开发。
• web-service-call-js-sample/: 展示如何从 Web API 获取数据并在 Photoshop 中创建文本层。
• README.md: 项目说明文件。
• LICENSE: 项目许可证文件。
• CODE_OF_CONDUCT.md: 项目行为准则文件。

2. 项目的启动文件介绍

每个示例项目都有一个 main.js 文件，这是插件的入口文件。以下是 hello-world-js-sample 示例项目的启动文件介绍：

// hello-world-js-sample/main.js

async function main() {
    const app = require("photoshop").app;
    await app.activeDocument.save();
    console.log("Hello, World!");
}

main();

启动文件介绍

• main.js: 这是插件的主入口文件，负责初始化插件并执行主要功能。

3. 项目的配置文件介绍

每个示例项目都有一个 manifest.json 文件，这是插件的配置文件。以下是 hello-world-js-sample 示例项目的配置文件介绍：

{
    "manifestVersion": 5,
    "id": "hello-world-js-sample",
    "version": "1.0.0",
    "type": "UXPPlugin",
    "name": "Hello World JS Sample",
    "requiredPermissions": {
        "filesystem": "readWrite"
    },
    "entryPoints": [
        {
            "type": "host",
            "id": "hello-world-js-sample",
            "label": "Hello World JS Sample",
            "script": "main.js"
        }
    ]
}

配置文件介绍

• manifestVersion: 指定 manifest 文件的版本。
• id: 插件的唯一标识符。
• version: 插件的版本号。
• type: 插件的类型，这里是 UXPPlugin。
• name: 插件的名称。
• requiredPermissions: 插件所需的权限。
• entryPoints: 插件的入口点配置。

以上是 UXP Photoshop 插件示例项目的教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望这些内容能帮助你更好地理解和使用该项目。