Leptos + Tauri 2 前端配置Trunk + SSG + 移动端热重载一次打通(Leptos 0.6 口径)

1. 三条 Checklist:每一条都对应一个真实的坑

1.1 用 SSG(别走 SSR)

Tauri 的工作方式更像“静态站点宿主”:你给它一份静态资源目录(HTML/CSS/JS/WASM),它在 WebView 里加载并运行。官方明确:Tauri 不官方支持基于服务器的方案(SSR),因此要用 SSG/SPA/MPA 这类静态路线。 (Tauri)

这对 Leptos 意味着:在 Tauri 里通常跑的是 WASM 前端(客户端渲染),而不是把 Leptos 的服务端渲染端也一起塞进去。

1.2 serve.ws_protocol = "ws":移动端热重载的关键开关

在移动端开发时(Android/iOS 真机或模拟器),热重载 websocket 更容易因为协议/网络环境出现连接问题。官方建议在 Trunk 里显式设置:

  • ws_protocol = "ws"

确保热重载 websocket 能正常连上。 (Tauri)

1.3 开启 withGlobalTauri:让 window.__TAURI__ 可用,WASM 才好“抓”到 Tauri API

Leptos(WASM)要调用 Tauri API,最常见的桥接方式之一就是通过浏览器全局对象拿到 window.__TAURI__,再用 wasm-bindgen 或 JS interop 访问。官方要求在 Tauri 配置里打开:

  • app.withGlobalTauri = true

这样 window.__TAURI__ 才会被注入。 (Tauri)

2. 示例配置 1:src-tauri/tauri.conf.json(告诉 Tauri:怎么跑 Trunk、资源在哪)

把下面这段放到 src-tauri/tauri.conf.json(或合并进你的配置):

{"build":{"beforeDevCommand":"trunk serve","devUrl":"http://localhost:1420","beforeBuildCommand":"trunk build","frontendDist":"../dist"},"app":{"withGlobalTauri":true}}

这段配置分别解决什么:

  • beforeDevCommand: trunk serve
    你执行 cargo tauri dev 时,Tauri 会先帮你启动 Trunk 的开发服务器。
  • devUrl: http://localhost:1420
    Tauri 开发模式加载的页面地址就是这个(Trunk 默认端口常用 1420)。
  • beforeBuildCommand: trunk build
    你执行 cargo tauri build 时,先把 Leptos 编译成静态资源。
  • frontendDist: ../dist
    Trunk build 的输出目录(注意这是相对 src-tauri/ 的路径,所以通常是 ../dist)。
  • withGlobalTauri: true
    注入 window.__TAURI__,方便 WASM/vanilla JS 访问。 (Tauri)

3. 示例配置 2:Trunk.toml(Trunk 怎么 build、怎么 serve、怎么热重载)

在项目根目录创建/修改 Trunk.toml

[build] target = "./index.html" [watch] ignore = ["./src-tauri"] [serve] port = 1420 open = false ws_protocol = "ws" 

这里的重点:

  • [build].target = "./index.html"
    指定构建入口页面(Trunk 以它为入口组织资源与 wasm 输出)。
  • [watch].ignore = ["./src-tauri"]
    避免 Trunk 监听 Rust/Tauri 工程目录导致无意义的重编译或文件句柄压力(特别是 Windows/大型工程时会明显)。
  • [serve].ws_protocol = "ws"
    移动端热重载稳定性的关键项。 (Tauri)

4. 开发与构建:你实际只需要记住两条命令

开发(桌面):

cargo tauri dev 

发布构建:

cargo tauri build 

因为你已经在 tauri.conf.json 里配置了 beforeDevCommand/beforeBuildCommand,所以通常不需要你手动先跑 trunk serve/build

5. WASM 侧怎么用 Tauri API(思路)

开启 withGlobalTauri 后,window.__TAURI__ 会存在。官方 JS API 文档也明确:使用全局对象需要这个开关。 (Tauri)

在 Leptos/WASM 里常见做法是:

  • wasm-bindgen / web-syswindow 上取 __TAURI__
  • 再调用你需要的模块(例如 event、window、path、plugin 等)

如果你更偏工程化,也可以在前端用一层 thin wrapper:把需要的 Tauri 能力封装成少量 JS 函数,再让 WASM 调这些函数,边界更清晰、类型更可控。

6. 常见问题速查

  • 启动后白屏,但浏览器访问 http://localhost:1420 正常
    优先检查 tauri.conf.json 里的 devUrl 端口是否与 Trunk 一致,以及是否启动了 trunk serve(看终端输出)。
  • 热重载在移动端不工作
    先确认 Trunk.tomlws_protocol = "ws" 已设置。 (Tauri)
  • WASM 里拿不到 window.__TAURI__
    检查 app.withGlobalTauri 是否为 true,并确认你是在 Tauri 窗口里运行(不是纯浏览器环境)。 (Tauri)

Read more

ESP32 实战教程:搭建 Web 服务器实现 LED 远程开关控制

ESP32 实战教程:搭建 Web 服务器实现 LED 远程开关控制

一.实验材料         1.esp32板子         2.led         3.220欧的电阻         4.面包板 二.实验思路 其实做这个实验的核心就是让 ESP32 既当 “WiFi 热点 / 联网设备”,又当 “Web 服务器”,还能响应网页的操作去控制硬件,说白了就是把 “网络请求” 和 “GPIO 引脚控制” 串起来,具体拆成这几步想就很清晰: 1. 先想清楚 “怎么让设备联网” 首先得让 ESP32 能和电脑 / 手机通信,最直接的就是两种方式:要么让 ESP32 连家里的路由器(STA 模式),要么让它自己建个 WiFi 热点(SoftAP 模式)。新手做的话优先选热点模式,不用依赖路由器,手机直接连

【Python全栈开发】第8讲 | Web 全栈之巅:FastAPI 高性能后端开发

环境声明 * Python版本:Python 3.12+ (建议使用 3.10 以上版本) * 开发工具:PyCharm 或 VS Code * 操作系统:Windows / macOS / Linux (通用) 1. 为什么是 FastAPI? 如果你还在学习传统的 Django 或者 Flask,那这一讲你得认真看看了。 在现代全栈开发里,FastAPI 已经是很多大厂和初创公司的首选。为什么? 1. 速度快:它的运行速度可以和 NodeJS 或 Go 媲美,这在 Python 界是突破性的。 2. 类型驱动:它利用 Python 的类型提示(Type Hints),能自动帮你生成接口文档、做数据校验。

前端人拿不到offer,九成是不知道这个新风向

今年大部分互联网公司面试的题目已经开始小部分八股文,大部分场景题了,公司需要的不仅是知识扎实,而且招进来就能上手项目的面试者… 2026最新高频场景题 * 1. 请求失败会弹出一个toast,如何保证批量请求失败,只弹出一个toast * 2. 如何减少项目里面if-else * 3. babel-runtime 作用是啥 * 4. 如何实现预览PDF文件 * 5. 如何在划词选择的文本上添加右键菜单(划词:鼠标滑动选择一组字符,对组字符进行操作) * 6. 富文本里面,是如何做到划词的(鼠标滑动选择一组字符,对组字符进行操作)? * 7. 如何做好前端监控方案 * 8. 如何标准化处理线上用户反馈的问题 * 9. px如何转为rem * 10. 浏览器有同源策略,但是为何 cdn 请求资源的时候不会有 跨域限制 * 11. cookie可以实现不同域共享吗 * 12. axios是否可以取消请求 * 13. 前端如何实现折叠面板效果? * 14. dom里面,如何判定a元素是否是b元素的子元 * 15. 判断一个对象是否为空,包含了其原型链上是否有自

如何解决PowerShell执行Invoke-WebRequest报Invalid URL和CommandNotFound全流程

如何解决PowerShell执行Invoke-WebRequest报Invalid URL和CommandNotFound全流程

【全网最细】如何解决PowerShell执行Invoke-WebRequest报Invalid URL和CommandNotFound全流程 在Windows系统运维、脚本部署场景中,PowerShell的Invoke-WebRequest是下载远程资源的常用命令,但新手常遇到Invalid URL(URL无效)和CommandNotFound(命令未找到)两类错误。本文将从错误根源分析、分步解决方案、避坑指南三个维度,手把手教你彻底解决这类问题,即使是零基础也能看懂。 文章目录 * 【全网最细】如何解决PowerShell执行Invoke-WebRequest报Invalid URL和CommandNotFound全流程 * 一、问题复现:先看清错误长什么样 * 1. 执行的原始命令 * 2. 核心错误信息 * 二、深度剖析:错误到底是怎么来的? * 错误1:Invalid URL(URL无效)的4个核心原因 * 错误2:CommandNotFound(脚本未找到)的3个核心原因 * 三、分步解决:从根源到表象逐