You've already forked Pandona-Engine
84 lines
2.8 KiB
Markdown
84 lines
2.8 KiB
Markdown
# 基础教程
|
||
|
||
在本章节中，你将学习PE引擎的核心概念。我们假定你已经完成了[快速上手](../quick-start)指南，并对HTML、CSS和JavaScript有基本的了解。
|
||
|
||
## 目录
|
||
|
||
- [创建应用实例](./application)
|
||
- [元素系统](./elements)
|
||
- [场景系统](./scenes)
|
||
- [样式处理](./styling)
|
||
- [事件处理](./event-handling)
|
||
- [生命周期](./lifecycle)
|
||
|
||
## 什么是PE引擎？
|
||
|
||
PE（Pandona Engine）是一个现代化的前端应用开发框架，专注于提供简洁的API和高效的开发体验。它采用编译时架构，支持基于路由表的场景管理，让开发者能够快速构建交互式Web应用。
|
||
|
||
PE的核心特性包括：
|
||
|
||
1. **基于路由的场景管理**：通过简单的路由配置，轻松管理应用的不同状态和视图。
|
||
2. **声明式模板语法**：使用类似HTML的模板语法，让代码更直观易懂。
|
||
3. **组件化开发**：将UI拆分为独立的可复用组件，提高代码的可维护性。
|
||
4. **内置动画系统**：提供丰富的动画API，轻松实现流畅的交互动画。
|
||
5. **响应式数据绑定**：自动追踪数据变化，确保UI与数据保持同步。
|
||
6. **强大的样式系统**：支持CSS预处理器，提供灵活的样式管理方案。
|
||
|
||
## 核心概念概览
|
||
|
||
在深入了解每个概念之前，让我们先快速了解一下PE引擎的核心概念：
|
||
|
||
### 应用实例
|
||
|
||
每个PE应用都从创建一个应用实例开始：
|
||
|
||
```javascript
|
||
import PE from 'pe-engine'
|
||
|
||
const game = PE.create()
|
||
```
|
||
|
||
这个实例包含了所有PE引擎的功能，是整个应用的核心。
|
||
|
||
### 元素系统
|
||
|
||
PE提供了丰富的内置元素类型，包括：
|
||
|
||
- `sprite`：精灵元素，可用于显示图像或创建基本图形
|
||
- `box`：盒子元素，用于创建矩形区域
|
||
- `text`：文本元素，用于显示文本内容
|
||
- `html`：HTML元素，用于嵌入原生HTML内容
|
||
- `svg`：SVG元素，用于创建矢量图形
|
||
|
||
### 场景系统
|
||
|
||
场景是PE应用的基本构建块。每个场景对应一个路由路径，包含：
|
||
|
||
- 模板定义（`<sence>`标签）
|
||
- 样式定义（`.less`文件）
|
||
- 逻辑代码（`<script>`标签）
|
||
|
||
### 样式处理
|
||
|
||
PE使用Less作为CSS预处理器，每个场景可以有对应的样式文件。样式会自动作用于场景内的元素，避免全局样式污染。
|
||
|
||
### 事件处理
|
||
|
||
PE提供简洁的事件绑定语法，通过`@`前缀可以直接在模板中绑定事件处理器：
|
||
|
||
```html
|
||
<box @click="handleClick">点击我</box>
|
||
```
|
||
|
||
### 生命周期
|
||
|
||
每个场景都有完整的生命周期钩子，包括：
|
||
|
||
- `onLoad`：场景加载时调用
|
||
- `onShow`：场景显示时调用
|
||
- `onHide`：场景隐藏时调用
|
||
- `onDestory`：场景销毁时调用
|
||
|
||
这些钩子让你能够在适当的时机执行初始化、清理等操作。
|
||
|
||
在接下来的章节中，我们将深入探讨这些概念，帮助你掌握PE引擎的使用方法。 |