介绍

什么是 EDGE？

EDGE（元素定义和生成引擎）是 NativePHP for Mobile 的组件系统，它将 Blade 模板语法转换为平台原生的 UI 元素，无论用户使用哪种设备都能呈现出色的外观。

EDGE 组件不是在 Web 视图中渲染，而是编译成真正的原生元素，独立于 Web 视图的生命周期存在。这意味着它们是持久的，并提供真正的原生性能。

没有自定义渲染引擎和复杂的预编译过程，只有一个在运行时发生的轻量级转换步骤。你最终得到的是纯粹、快速和灵活的原生组件——全部由 PHP 配置！

我们的第一组组件专注于导航，用美观的、平台相关的 UI 组件来构建你的应用框架。这些熟悉的导航元素将帮助你的用户在应用中立即感到舒适，并提升你的应用感觉像是为他们选择的平台量身打造的，就像真正的原生应用一样。

而且所有这些都不会影响你使用最熟悉的工具和技术进行构建的能力。

目前，我们有 3 个可以配置的主要原生组件：

blade

<native:bottom-nav>
    <native:bottom-nav-item id="home" icon="home" label="Home" url="/home" />
</native:bottom-nav>

你只需在 Blade 中定义组件，EDGE 会在每次请求期间处理这些，将指令传递给原生端。原生 UI 渲染管道接管并按用户期望的方式生成你定义的组件并构建界面，使你的应用能够使用每个平台最新最强大的部分，例如 iOS 上的 Liquid Glass。

在底层，Blade 组件被编译成简单的 JSON 配置，我们将其传递给原生端。原生代码已经包含了编译进去的通用组件。然后根据 JSON 配置按需渲染这些组件。

听起来像_服务器驱动 UI_...

没错！这种方法借鉴了服务器驱动 UI 的很多思路。不同之处在于它可以大大简化，因为不涉及网络——所有的生成和渲染都在设备上进行，PHP 直接与 UI 状态管理器通信。

它甚至不依赖 Web 视图！

Blade 是一种表达力强且简单直接的模板语言，对大多数 Laravel 用户来说非常熟悉，对任何习惯编写 HTML 的人来说也非常容易上手。我们所有的组件都是 Blade 组件，这使我们能够使用 Blade 久经考验的处理引擎来即时快速编译必要的转换。

它们可以在任何 Blade 文件中定义，但为了使它们被处理，该 Blade 文件需要被渲染。我们建议将你的组件放在一个可能在每次请求中都会被渲染的 Blade 组件中，例如你的主布局，如 layouts/app.blade.php 或其子视图/组件之一。

EDGE 组件强制执行必需的 props 验证以防止配置错误。如果你缺少必需的 props，你会看到一条清晰的错误消息，告诉你确切缺少什么以及如何修复。

例如，如果你忘记了底部导航项的 label prop：

EDGE Component <native:bottom-nav-item> is missing required properties: 'label'.
Add these attributes to your component: label="..."

错误消息会列出所有缺少的必需 props，并准确显示你需要添加哪些属性。这种验证在渲染时发生，使得在开发期间很容易捕获配置问题。

每个组件的文档页面都指出了哪些 props 是必需的，哪些是可选的。

EDGE 组件中的每个链接都会完整回传到 PHP，如果你使用 Inertia，这可能不是你想要的。要将这些请求转换为 Inertia <Link>，请将 router 添加到你的 window 对象：

typescript

import { router } from '@inertiajs/vue3';

declare global {
    interface Window {
        router: typeof router;
    }
}

window.router = router;