NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

简介: NativePHP v4 推出 SuperNative 技术,支持用 Blade 直接编译生成原生 SwiftUI(iOS)与 Jetpack Compose(Android)界面,告别 WebView。组件即 PHP 类,共享内存、零网络往返,内置无障碍支持,Pest 可测试,扫码即真机预览。(239字)

NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

NativePHP 现在可以将 Blade 组件渲染为 iOS 上真正的 SwiftUI 视图和 Android 上的 Jetpack Compose 视图,整个过程无需 WebView 或 HTML。NativePHP 将这项技术称为 SuperNative。Simon Hamp 与 Shane Rosenthal 于 7 月 30 日在二人于波士顿主办的 The Vibes 活动上发布了 SuperNative。这场活动共有 100 人参加,举办时间为 Laracon US 闭幕次日。

如果曾在一年前了解过 NativePHP,并将其视为运行在 WebView 中的 Laravel,v4 值得重新审视。WebView 仍然可用,现有应用也可以继续采用这种方式,但构建界面已经有了新的选择。SuperNative 是 v4 的默认方案,截至 4.1 版本仍处于 beta 阶段,因此文档提醒开发者为快速迭代做好准备。

主要亮点:

  • 使用 Blade 构建原生 UI。组件集名为 EDGE,即 Element Definition and Generation Engine,它会直接编译为 SwiftUI 和 Jetpack Compose 视图。
  • 无需经过网络。PHP 与原生层直接共享内存,因此组件与屏幕之间没有往返请求,也不需要 WebView 桥接。
  • 采用类似 Livewire 的组件模型。它支持公共属性、mount()、操作方法,以及 #[Poll]、#[Computed]、#[Lazy] 和 #[Locked] 等 Attribute(特性)。
  • 使用 Pest 测试原生界面。测试可以在进程内挂载组件,并对组件发布的内容执行断言,因此无需模拟器即可在 CI 中运行。
  • 四个插件并入核心。Device、Dialog、File 和 System 现在随 nativephp/mobile 一同提供,这是该版本唯一的破坏性变更。

SuperNative 的工作原理

SuperNative 的架构有别于 Skia 或 Impeller 这样的完全自定义渲染器、运行在 PHP 上层或与 PHP 并行的虚拟机、转译器,以及 HTML 到原生界面的转换器。

NativePHP 的架构文档描述了其实现方式:

传统 Blade 引擎生成 HTML;NativePHP 构建的专用 Blade 引擎会将真正的 Blade 组件转换为一种简单的二进制表示。

这种表示形式是一个定长字节数组,由原生端的解释器读取,并据此构建 SwiftUI 和 Compose 视图。

SuperNative 界面的启动速度快于 WebView 界面。它无需启动 WebView、解析 bundle,也无需在每次点击时通过桥接层执行序列化。

无障碍功能通常是 WebView 应用的薄弱环节。由于界面由真正的 SwiftUI 和 Compose 视图构成,VoiceOver、TalkBack、动态字体以及平台辅助功能控件无需额外适配即可工作。仅含图标的控件仍需显式设置 a11y-label。

编写 SuperNative 界面

在 v3 中,一个界面对应一条 Web 路由。Blade、Livewire 或 Inertia 负责生成 HTML,再由 WebView 渲染;EDGE 则使用 Blade 中的声明为界面包裹原生外壳,例如真正的顶部栏、底部导航或悬浮操作按钮。界面本身没有对应的 PHP 类。

在 v4 中,界面本身就是组件。它由一个继承 NativeComponent 的 PHP 类和一个 Blade 视图组成。公共属性负责保存状态,公共方法提供视图调用的操作,#[Poll] 等 Attribute 用于处理周期性任务。下面这个配送跟踪器会轮询状态变化:

<?php

namespace App\NativeComponents;

use App\Models\Delivery;
use Illuminate\View\View;
use Native\Mobile\Attributes\Locked;
use Native\Mobile\Attributes\Poll;
use Native\Mobile\Edge\NativeComponent;

class DeliveryTracker extends NativeComponent
{
   
    #[Locked]
    public int $deliveryId;

    public string $status = 'awaiting_pickup';

    public ?string $courier = null;

    public function mount(): void
    {
   
        $this->syncFromDatabase();
    }

    #[Poll(5000)]
    public function syncFromDatabase(): void
    {
   
        $delivery = Delivery::findOrFail($this->deliveryId);

        $this->status = $delivery->status;
        $this->courier = $delivery->courier_name;
    }

    public function confirmReceipt(): void
    {
   
        Delivery::findOrFail($this->deliveryId)->markReceived();

        $this->syncFromDatabase();
    }

    public function render(): View
    {
   
        return view('native.delivery-tracker');
    }
}

路由位于 routes/mobile.php 中,并通过 Route::native 宏注册。该宏接收组件类,而非控制器。原生外壳来自继承 NativeLayout 的自定义布局类,通过 ->layout() 关联;Route::nativeGroup 则可以为多条路由应用同一个布局:

Route::native('/deliveries/{deliveryId}', DeliveryTracker::class)
    ->layout(DeliveryLayout::class)
    ->name('deliveries.show');

视图仍然使用 Blade,其中采用的是原生基础元素。解析器会将 Tailwind 类名映射到对应的平台布局:

<column class="flex-1 p-6 gap-4 bg-theme-background safe-area">
    <text class="text-2xl font-bold text-theme-on-background">
        {
  { str($status)->headline() }}
    </text>

    @if ($courier)
        <text class="text-sm text-gray-500">Courier: {
  { $courier }}</text>
    @endif

    <pressable @tap="confirmReceipt" class="px-6 py-4 rounded bg-theme-primary items-center">
        <text class="text-theme-on-primary font-semibold">Confirm receipt</text>
    </pressable>
</column>

<column> 在 iOS 上会成为真正的 SwiftUI 布局,在 Android 上则会成为 Compose Column。@tap 处理器会直接调用 PHP 类中的方法。v4 还为触摸按下与松开事件新增了 @pressDown 和 @pressUp,可用于实现按住操作;单次点击则由 @tap 处理。

在手机上运行这个界面无需安装 Xcode 或 Android Studio。php artisan native:jump 会启动开发服务器并输出二维码。使用 App Store 和 Google Play 上免费的配套应用 Jump 扫描二维码,即可通过 Wi-Fi 在设备上加载应用。原生调用会转发至开发计算机上运行的 PHP,因此相机和生物识别功能与打包应用中的表现一致。当 NATIVEPHP_START_URL 指向 Route::native 界面时,Jump 会直接渲染原生 UI。这是目前在真实设备上查看 SuperNative 的最快方式。

保留现有 WebView

现有 v3 应用可以继续使用原有实现。WebView 现在是放置在原生界面中的一个组件:

<webview php url="/" fullscreen />

将原生路由指向包含该元素的界面,再在 .env 中设置 NATIVEPHP_START_URL=/home,routes/web.php 中的视图便会像之前一样继续渲染。两种方式可以混合使用:在尚未转换的界面中保留 WebView,并在其周围使用原生导航。每个采用 PHP 模式的嵌入式 WebView 都拥有独立的 PHP 运行时,因此不会与原生界面的运行时竞争资源。

v4 只有在 Web 路由实际渲染时才会启动 WebView。

使用 Pest 测试原生界面

由于界面是一个负责发布元素树的 PHP 对象,因此无需设备即可进行测试。测试套件提供 FakeBridge,用于捕获组件发布的每一棵树和发起的每一次原生调用;测试本身就是普通的 Pest 测试:

use App\NativeComponents\DeliveryTracker;
use Native\Mobile\Testing\Native;

it('confirms receipt of a delivery', function () {
   
    $delivery = Delivery::factory()->create(['status' => 'out_for_delivery']);

    Native::visit("/deliveries/{$delivery->id}")
        ->assertSee('Out For Delivery')
        ->tap('Confirm receipt')
        ->assertSet('status', 'received');
});

Native::test() 会直接挂载组件类,Native::visit() 会经过已注册的原生路由并解析路由参数,tap() 会触发与指定 ref 或可见文本匹配的 pressable,随后重新渲染。php artisan native:make-test DeliveryTracker 可以生成测试文件。开发者还可以使用 FakeBridge 宏添加自定义断言,测试插件发起的原生调用。

4.1 版本

4.1 版本于 8 月 7 日发布。#[Locked] 用于标记双向绑定无法写入的属性(#260)。如果误写 native:model="deliveryId",系统会抛出错误,从而阻止文本输入框改写当前界面上的记录。

TreeObservers 可以观察运行时发布的元素树(#259),为会话录制和调试工具提供所需能力。同一版本还提供基于该钩子的 TreeSpy 测试工具,使测试既能对中间帧执行断言,也能检查最终状态。

此外还有两项较小的更新:NativeRouteFallback 用于设置浏览器访问仅限原生端的路由时看到的内容(#268);Tailwind 解析器现在会对超出支持范围的类名发出警告(#296)。

从 v3 升级

v4 的大部分改动都是新增内容,升级指南说明应用代码无需改动。唯一的破坏性变更来自依赖项。Device、Dialog、File 和 System 现在属于核心组件,而 nativephp/mobile 会通过 Composer 声明与这四个独立插件包冲突,因此必须先移除它们,Composer 才能完成依赖解析:

php artisan native:plugin:uninstall --core-v4

该命令会移除全部四个插件,并从 NativeServiceProvider 中取消注册。添加 --force 可以跳过提示。随后将版本约束升级到 ~4.0.0,并重新生成原生项目文件:

composer update
php artisan native:install --force

Facade 和事件保持不变,因此现有的 Dialog::alert() 调用仍可继续工作。Vite 开发服务器现在改为按需启用:需要使用时,为 native:watch 或 native:run 传入 --vite,并从脚本中移除 --no-vite 参数。插件作者应将版本约束扩展为 ^3.0|^4.0。该软件包还在内置 Boost skills 中提供了一个 v3 到 v4 的升级 skill,开发者也可借助智能体完成升级。

针对 NativePHP 的常见质疑是,原生外壳中的 WebView 算不上原生应用。对于开发者选择转换的界面,v4 已经给出了回应,同时无需学习 Swift 或 Kotlin。组件是 PHP 类,模板使用 Blade,测试则由 Pest 编写。

界面还可以逐个转换。由于 <webview> 已成为组件,团队可以优先迁移存在滚动性能或无障碍问题的界面,其余部分继续沿用现有实现。

原文链接 NativePHP v4 让 Blade 构建原生 iOS 与 Android 界面

目录
相关文章
|
2月前
|
移动开发 编解码 运维
想做短剧出海?搭建自主海外短剧平台需要注意哪些问题?
想自主搭建海外短剧平台?本文系统梳理从需求定位、模块化架构(四层设计)、五步落地流程,到本地化适配、多端支持、合规支付与安全运维的全流程方案,助企业低成本、高效率打造可控、可扩展的自有短剧平台。(239字)
|
2天前
|
NoSQL Cloud Native 关系型数据库
【云原生架构实战】基于 ThinkPHP 与 Uniapp 重构企业级赛事中台:分布式锁与复杂状态机设计
本文深度解析高并发体育赛事报名系统的架构设计,涵盖跨端Uniapp开发、私有化物理隔离部署、DDD领域建模、Redis分布式锁防重、InnoDB强一致性事务,以及GD库动态证书渲染等核心技术,体现工程化落地能力。(239字)
38 5
|
8天前
|
存储 NoSQL 安全
用 Java 接入大模型(五):多轮对话的上下文怎么管
本文深入剖析多轮对话的核心误区:大模型本身无记忆,所谓“遗忘”实为上下文管理失当。从messages结构化封装、token精准截断策略,到Redis会话存储与三步排错法,系统讲解如何可靠构建长程对话能力。
94 7
|
5天前
|
人工智能 前端开发 API
阿里云百炼api入口官网:前台和后台,免费领超7000万Tokens
阿里云百炼是其AI大模型服务平台,提供前台官网(介绍、计费、领券)与后台控制台(API Key管理、Token用量查询、模型配置)。新用户可免费领取超7000万Tokens(每模型100万),支持按量付费或订阅计划降本。在阿里云百炼官网:https://t.aliyun.com/U/fPVHqY 免费领取千万Tokens
|
19天前
|
安全 JavaScript API
PHP 8.6 只是个小版本,三十项弃用却已在为 PHP 9.0 铺路
PHP 8.6 虽为小版本,却以30项精准弃用、部分函数应用(PFA)和全新`Time\Duration`类为核心,悄然为PHP 9.0铺路。PFA赋能管道运算符,`Duration`统一超时语义,弃用清单直指语言演进方向——安全加固、类型严谨、异步就绪。(239字)
143 5
|
7月前
|
编译器 Go PHP
FrankenPHP 原生支持 Windows 了
FrankenPHP 正式原生支持 Windows!基于 Go 1.26 对 MSVC Clang 的 CGO 支持,成功打通与官方 PHP(MSVC 编译)的链接难题,实现 100% 特性兼容——含 Worker Mode、Hot Reloading 及全部扩展。性能较 Nginx/PHP-FPM 提升超 260%,开箱即用。(239字)
565 157
|
7月前
|
缓存 NoSQL API
当你的 PHP 应用的 API 没有限流时会发生什么?
PHP API若无限流,易遭流量洪峰、爬虫或攻击冲击,导致服务器过载、响应延迟甚至宕机。本文剖析限流缺失的性能与安全风险,指出常见误区(如忽略用户分级、算法低效、云环境适配失败),并提供基于Redis的中间件实现方案及生产部署要点,助你构建健壮、可扩展的API防护体系。(239字)
451 168
|
6月前
|
人工智能 JavaScript PHP
Laravel + Vue 免费可商用 PHP 管理后台 CatchAdmin V5.3.0 发布:支持 AI Agent 开发
CatchAdmin V5.3.0 是基于 Laravel 13 + Vue3 的免费可商用后台框架,支持企业级权限、动态路由、代码生成等;本次重磅升级AI开发体验,内置AGENTS指引、9大AI Skills、多平台兼容及Context7实时文档,大幅提升后台开发效率。(239字)
554 1
Laravel + Vue 免费可商用 PHP 管理后台 CatchAdmin V5.3.0 发布:支持 AI Agent 开发
|
6月前
|
JavaScript 前端开发 PHP
Laravel13 + Vue3 的免费可商用 PHP 管理后台 CatchAdmin V5.2.0 发布
CatchAdmin V5.2.0发布!基于Laravel 13 + Vue3的免费可商用后台系统,支持Token鉴权、RBAC权限、动态路由、代码生成、多云上传等,模块化设计,开箱即用,助力快速构建CMS/OA/CRM等企业级应用。(239字)
494 1
|
7月前
|
人工智能 PHP 开发工具
用 Laravel AI SDK 构建多智能体工作流
Laravel AI SDK 提供轻量、灵活的多智能体工作流实现方案,支持 Prompt Chaining、Routing、Parallelization、Orchestrator-Workers 和 Evaluator-Optimizer 五种经生产验证的模式,一行 `agent()` 即可启动,Pipeline/Concurrency 等 API 让复杂任务模块化、可编排。(239字)
357 7

热门文章

最新文章