跳至主要内容
版本: v2.9.0

SvelteKit

本指南将介绍

  1. 最小安装步骤 - 使 SvelteKit 的最小 Wails 设置正常工作所需的步骤。
  2. 安装脚本 - 用于完成最小安装步骤的 Bash 脚本，可以选择 Wails 品牌。
  3. 重要提示 - 使用 SvelteKit + Wails 时可能遇到的问题和解决方法。

1. 最小安装步骤​

为 Svelte 安装 Wails。​
  • wails init -n myapp -t svelte
删除 svelte 前端。​
  • 导航到您新创建的 myapp 文件夹。
  • 删除名为“frontend”的文件夹
在 Wails 项目根目录中。使用您喜欢的包管理器安装 SvelteKit 作为新的前端。按照提示操作。​
  • npm create svelte@latest frontend
修改 wails.json。​
  • 添加 "wailsjsdir": "./frontend/src/lib", 请注意，这是您的 Go 和运行时函数将出现的位置。
  • 如果您没有使用 npm，请在此更改您的包管理器前端。
修改 main.go。​
  • 第一个注释 //go:embed all:frontend/dist 需要更改为 //go:embed all:frontend/build
修改 .gitignore​
  • 行 frontend/dist 需要替换为 frontend/build
使用您喜欢的包管理器安装/删除依赖项。​
  • 导航到您的“frontend”文件夹。
  • npm i
  • npm uninstall @sveltejs/adapter-auto
  • npm i -D @sveltejs/adapter-static
更改 svelte.config.js 中的适配器。​
  • 将文件的第一行更改 import adapter from '@sveltejs/adapter-auto'; 为 import adapter from '@sveltejs/adapter-static';
将 SvelteKit 放在具有预渲染功能的 SPA 模式下。​
  • 在 myapp/frontend/src/routes/ 中创建一个名为 +layout.ts/+layout.js 的文件。
  • 在新建文件中添加两行 export const prerender = true 和 export const ssr = false
测试安装。​
  • 导航回 Wails 项目根目录（向上一个目录）。
  • 运行 wails dev
  • 如果应用程序没有运行，请检查之前的步骤。

2. 安装脚本​

此 Bash 脚本执行上面列出的步骤。请确保仔细阅读脚本并了解脚本在您的计算机上的执行情况。​
  • 创建一个文件 sveltekit-wails.sh
  • 将下面的代码复制到新文件中，然后保存。
  • 使用 chmod +x sveltekit-wails.sh 使其可执行。
  • Brand 是一个可选参数，它将添加 Wails 品牌。将第三个参数留空以不插入 Wails 品牌。
  • 示例用法：./sveltekit-wails.sh pnpm newapp brand
sveltekit-wails.sh:​
manager=$1
project=$2
brand=$3
wails init -n $project -t svelte
cd $project
sed -i "s|npm|$manager|g" wails.json
sed -i 's|"auto",|"auto",\n  "wailsjsdir": "./frontend/src/lib",|' wails.json
sed -i "s|all:frontend/dist|all:frontend/build|" main.go
if [[ -n $brand ]]; then
    mv frontend/src/App.svelte +page.svelte
    sed -i "s|'./assets|'\$lib/assets|" +page.svelte
    sed -i "s|'../wails|'\$lib/wails|" +page.svelte
    mv frontend/src/assets .
fi
rm -r frontend
$manager create svelte@latest frontend
if [[ -n $brand ]]; then
    mv +page.svelte frontend/src/routes/+page.svelte
    mkdir frontend/src/lib
    mv assets frontend/src/lib/
fi
cd frontend
$manager i
$manager uninstall @sveltejs/adapter-auto
$manager i -D @sveltejs/adapter-static
echo -e "export const prerender = true\nexport const ssr = false" > src/routes/+layout.ts
sed -i "s|-auto';|-static';|" svelte.config.js
cd ..
wails dev

3. 重要提示​

服务器文件会导致构建失败。​
  • +layout.server.ts、+page.server.ts、+server.ts 或任何名称中包含“server”的文件都将无法构建，因为所有路由都是预渲染的。
Wails 运行时在全页面导航时会卸载！​
  • 任何会导致全页面导航的操作：window.location.href = '/<some>/<page>' 或使用 wails dev 时上下文菜单重新加载。这意味着您最终可能会失去调用任何运行时的能力，从而导致应用程序崩溃。有两种方法可以解决这个问题。
  • 使用 import { goto } from '$app/navigation'，然后在您的 +page.svelte 中调用 goto('/<some>/<page>')。这将阻止全页面导航。
  • 如果无法阻止全页面导航，可以通过将以下内容添加到 myapp/frontend/src/app.html 的 <head> 中，将 Wails 运行时添加到所有页面。
<head>
...
    <meta name="wails-options" content="noautoinject" />
    <script src="/wails/ipc.js"></script>
    <script src="/wails/runtime.js"></script>
...
</head>

有关更多信息，请参见 https://wails.golang.ac.cn/docs/guides/frontend。

可以从 +page.ts/+page.js 加载和刷新初始数据到 +page.svelte。​
错误处理​
  • 使用 Throw error 在 +page.ts/+page.js 中与 +error.svelte 页面结合使用效果很好。https://kit.svelte.net.cn/docs/errors#expected-errors
  • 意外错误会导致应用程序无法使用。从意外错误中恢复的唯一方法（目前为止已知）是重新加载应用程序。为此，请创建一个文件 myapp/frontend/src/hooks.client.ts，然后将以下代码添加到该文件中。
import { WindowReloadApp } from '$lib/wailsjs/runtime/runtime' 
export async function handleError() {
    WindowReloadApp()
}
使用表单和处理函数​
  • 最简单的方法是从表单中调用函数，这是标准的，将您的变量绑定到 value 并阻止提交 <form method="POST" on:submit|preventDefault={handle}>
  • 更高级的方法是使用：增强（渐进式增强），这将允许方便地访问 formData、formElement、submitter。需要注意的是，始终取消() 表单，这会阻止服务器端行为。https://kit.svelte.net.cn/docs/form-actions#progressive-enhancement 示例
<form method="POST" use:enhance={({cancel, formData, formElement, submitter}) => {
    cancel()
    console.log(Object.fromEntries(formData))
    console.log(formElement)
    console.log(submitter)
    handle()
}}>