Photon 技术文档

Photon 技术文档

Photon Clone native desktop UI's like cocoa and develop native feeling applications using web technologies 项目地址: https://gitcode.com/gh_mirrors/photon5/Photon

1. 安装指南

1.1 安装环境要求

• Node.js 环境
• npm 包管理器

1.2 安装步骤

1. 打开终端或命令行工具。
2. 运行以下命令安装 electron-photon：

npm install electron-photon

3. 安装完成后，您可以在项目中引入 Photon 模块。

2. 项目的使用说明

2.1 引入 Photon

在您的 Electron 项目中，通过以下方式引入 Photon：

// 引入 Photon
const Photon = require("electron-photon");

2.2 在浏览器中使用

如果您希望在浏览器中使用 Photon，需要进行以下配置：

1. 嵌入 photon.browser.js 文件：

<script src="photon.browser.js"></script>

2. 设置相对路径以加载组件：

<script>
  Photon.__baseDir = "/myPhotonMaster";
</script>

2.3 常见问题及解决方法

• 错误 ERR_FILE_NOT_FOUND：确保 Photon.__baseDir 设置正确，指向包含 /dist 文件夹的路径。

3. 项目API使用文档

3.1 设置样式

Photon 支持多种样式，默认根据操作系统自动选择样式。您可以通过以下方式手动设置样式：

// 设置样式
Photon.style = "cocoa";

3.2 组件使用

Photon 提供了丰富的组件，如 Panes、Toolbar、Button 等。以下是一些常用组件的使用示例：

3.2.1 窗口布局

<ph-window>
  <!--顶部工具栏-->
  <tool-bar type="header">
    Toolbar Header
  </tool-bar>
  <!--窗口内容-->
  <window-content>
    Window Content
  </window-content>
  <!--底部工具栏-->
  <tool-bar type="footer">
    Footer Header
  </tool-bar>
</ph-window>

3.2.2 按钮组件

<button>按钮</button>

3.3 自定义组件

您可以根据项目结构，通过自定义组件来扩展 Photon 的功能。

4. 项目安装方式

4.1 通过 npm 安装

使用以下命令安装 electron-photon：

npm install electron-photon

4.2 手动安装

1. 克隆项目仓库：

git clone https://github.com/mauriceconrad/Photon.git

2. 进入项目目录并安装依赖：

cd Photon
npm install

3. 运行示例项目：

npm start

通过以上步骤，您可以顺利安装并使用 Photon 开发原生外观的 Electron 应用。

Photon Clone native desktop UI's like cocoa and develop native feeling applications using web technologies 项目地址: https://gitcode.com/gh_mirrors/photon5/Photon