Pandona-Engine/guide/essentials

基础教程

在本章节中，你将学习PE引擎的核心概念。我们假定你已经完成了快速上手指南，并对HTML、CSS和JavaScript有基本的了解。

目录

• 创建应用实例
• 元素系统
• 场景系统
• 样式处理
• 事件处理
• 生命周期

什么是PE引擎？

PE（Pandona Engine）是一个现代化的前端应用开发框架，专注于提供简洁的API和高效的开发体验。它采用编译时架构，支持基于路由表的场景管理，让开发者能够快速构建交互式Web应用。

PE的核心特性包括：

1. 基于路由的场景管理：通过简单的路由配置，轻松管理应用的不同状态和视图。
2. 声明式模板语法：使用类似HTML的模板语法，让代码更直观易懂。
3. 组件化开发：将UI拆分为独立的可复用组件，提高代码的可维护性。
4. 内置动画系统：提供丰富的动画API，轻松实现流畅的交互动画。
5. 响应式数据绑定：自动追踪数据变化，确保UI与数据保持同步。
6. 强大的样式系统：支持CSS预处理器，提供灵活的样式管理方案。

核心概念概览

在深入了解每个概念之前，让我们先快速了解一下PE引擎的核心概念：

应用实例

每个PE应用都从创建一个应用实例开始：

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提供简洁的事件绑定语法，通过@前缀可以直接在模板中绑定事件处理器：

<box @click="handleClick">点击我</box>

生命周期

每个场景都有完整的生命周期钩子，包括：

• onLoad：场景加载时调用
• onShow：场景显示时调用
• onHide：场景隐藏时调用
• onDestory：场景销毁时调用

这些钩子让你能够在适当的时机执行初始化、清理等操作。

在接下来的章节中，我们将深入探讨这些概念，帮助你掌握PE引擎的使用方法。