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

Flutter 三方库 xid 的鸿蒙化适配指南 - 实现顶级高性能分布式唯一 ID 生成、高精时间有序序列与极致 ID 碰撞治理,助力鸿蒙应用构建“全局一致”的数字化底座

Flutter 三方库 xid 的鸿蒙化适配指南 - 实现顶级高性能分布式唯一 ID 生成、高精时间有序序列与极致 ID 碰撞治理,助力鸿蒙应用构建“全局一致”的数字化底座

欢迎加入开源鸿蒙跨平台社区:https://openharmonycrossplatform.ZEEKLOG.net Flutter 三方库 xid 的鸿蒙化适配指南 - 实现顶级高性能分布式唯一 ID 生成、高精时间有序序列与极致 ID 碰撞治理,助力鸿蒙应用构建“全局一致”的数字化底座。 前言 在 HarmonyOS 的分布式生态与大规模并发数据交互工程中。跨设备的数据同步与协同是其核心竞争力。当数以亿计的鸿蒙设备在并发产生数据资产(如分布式数据库记录、实时日志条目或订单号指纹)时。如何确保每个条目都拥有一个全球唯一、可排序且生成效率极高的标识符(ID)。是决定系统一致性的核心。传统的 UUID 过于冗长且非顺序。而自增 ID 在分布式环境下又面临严重的碰撞风险。xid 作为一个基于 MongoDB ObjectID 理念优化而来的 12 字节分布式 ID 生成库。提供了一套能够实现无锁化生成与毫秒级有序排布的方案。在鸿蒙系统上适配此库,将为您应用的分布式标识链路注入一份“

By Ne0inhk
用 Rust 打造二维码艺术大师:从想法到实现

用 Rust 打造二维码艺术大师:从想法到实现

二维码已经渗透到我们生活的方方面面,从支付到网站链接,几乎无处不在。但你有没有想过,二维码是怎么生成的?这些黑白方块也可以变得有趣和美观?今天我就来分享一下我用 Rust 实现的一个小项目:二维码艺术生成器(qr-artist)。 项目起源 这个想法源于一个简单的需求:如何让二维码既实用又美观?普通的黑白二维码虽然功能强大,但看起来有些单调。我想,能不能让二维码变得更有艺术感,比如用彩色像素来呈现? 技术选型 我选择了 Rust 作为开发语言,因为它在系统编程方面的优秀表现和内存安全特性。项目中主要使用了以下几个库: 1. qrcode - 用于生成二维码数据 2. image - 用于图像处理和保存 3. clap - 用于构建命令行界面 这些库都很成熟且文档完善,让我能够专注于核心功能的实现。 核心实现 1. 基础二维码生成 项目的核心是将 URL 转换为二维码数据,然后将其渲染为图像: // 创建二维码let code =QrCode::new(

By Ne0inhk
实战教程:Leaflet+SpringBoot 实现地图任意点位点击查看时间功能

实战教程:Leaflet+SpringBoot 实现地图任意点位点击查看时间功能

目录 前言 一、需求解析 1、地图展示 2、时区和时间的关系 3、经纬度和时区的关系 二、应用实现 1、经纬度和时区求解 2、Leaflet 实现地图点击 3、前后台交互 三、成果展示 1、亚洲地区 2、欧洲地区 3、拉美地区 4、澳洲地区 四、总结 前言         在数字化、全球化的当下,地理位置与时间信息的结合应用,已经渗透到出行导航、跨境调度、物流追踪、国际业务展示等众多场景。用户不再满足于单纯查看地图点位,更需要点击地图任意位置,即可快速获取当地真实时间,比如针对国外新闻的展示,对于我国的用户需要知晓事件发生的时间,一般有两个时间的概念,即北京时间和当地时间。北京时间是跟我们同一时区,让我们清楚的知道在我们的时间时刻中,在何时发生。而全球是个分为多个时区的模式,

By Ne0inhk
vue3:最新实现腾讯人脸核身+增强版人脸核身使用方法及示例源码,Vue3如何使用腾讯云慧眼人脸核身,提供人脸核身案例、身份信息核验、活体检测与核身比对等示例代码(后端spring与thinkphp)

vue3:最新实现腾讯人脸核身+增强版人脸核身使用方法及示例源码,Vue3如何使用腾讯云慧眼人脸核身,提供人脸核身案例、身份信息核验、活体检测与核身比对等示例代码(后端spring与thinkphp)

功能说明 vue3(H5端/微信公众号网页/PC端) 实现腾讯人脸核身+增强版人脸核身使用教程及示例代码,详解Vue3项目如何集成使用腾讯云人脸核身功能的流程及完整源码,提供多个示例代码:基础人脸核身使用教程+增强版人脸核身+活体检测与核身对比+身份信息验证+实名信息认证等,包括前后端对接,后端Java(Spring boot)与PHP(thinkphp)。 完整源码,多种示例开箱即用! 😃 付费后没解决问题直接找我+指导你解决为止 第一步 先来看下基本的功能介绍以及如何申请。

By Ne0inhk