跳过主要内容
Capgo logo
教程

使用SvelteKit和Capacitor构建移动应用

学习如何使用SvelteKit、Capacitor和Konsta UI构建一个移动应用

马丁·多纳迪厄

马丁·多纳迪厄

内容营销人员
使用SvelteKit和Capacitor构建移动应用

在本教程中，我们将从一个新的 SvelteKit 应用开始，逐步过渡到使用Capacitor进行原生移动开发。您还可以选择集成 Konsta UI 为 Tailwind CSS 移动 UI 提供增强功能。

Capacitor 可以让您轻松将 SvelteKit 网站应用转换为原生移动应用，无需进行重大修改或学习新的技能，如 React Native。

请按照以下步骤使用 Capacitor 将您的 SvelteKit 应用转换为移动应用，并如果需要，可以使用 Konsta UI 来增强您的移动 UI。

关于 Capacitor

CapacitorJS 是一个革命性的工具！它可以轻松地与任何 web 项目集成，包裹您的应用程序在一个原生 webview 中，并为您生成原生 Xcode 和 Android Studio 项目。其插件提供对本机设备功能的访问，例如通过 JavaScript 桥访问摄像头。

Capacitor enables you to create a fantastic native mobile app without any complicated setup or steep learning curve. Its slim API and streamlined functionality make it easy to integrate into your project. You’ll be amazed at how simple it is to achieve a fully functional native app with Capacitor!

为 SvelteKit 应用做好准备

要创建一个新的 SvelteKit 应用，请运行以下命令：

npm create svelte@latest my-app
cd my-app
npm install
npm run build

运行命令后，您应该在项目根目录下看到一个新的文件夹。 build 此文件夹将由 __CAPGO_KEEP_0__ 后来使用，但现在我们需要正确设置它。 dist 关于 __CAPGO_KEEP_0__

This folder will be used by Capacitor later, but for now, we need to set it up correctly.

将 Capacitor 添加到您的 SvelteKit 应用程序中

将任何 Web 应用程序打包到原生移动容器中，我们需要遵循几个初始步骤。之后，只需运行一个命令就可以了。 sync 首先，安装

__CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Capacitor CLI 接下来，安装核心包和 iOS 和 Android 平台的相关包。

最后，添加平台，__CAPGO_KEEP_0__ 将在您的项目根目录下创建每个平台的文件夹：

Finally, add the platforms, and Capacitor will create folders for each platform at the root of your project:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your SvelteKit project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

ios 和 android __CAPGO_KEEP_2__ SvelteKit 项目中的文件夹。

这些是真正的本地项目！

为了以后访问 Android 项目，您需要安装 Android Studio对于 iOS，您需要一台 Mac，并应安装 Xcode.

此外，您应该找到一个 capacitor.config.ts file in your project, which contains some basic Capacitor settings used during the sync. The only thing you need to pay attention to is the __CAPGO_KEEP_0__设置，用于同步过程中。您需要注意的是

webDir capacitor.config.ts __CAPGO_KEEP_0__文件和更新 webDir:

import { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
}

export default config

现在我们已经更新了Capacitor设置，让我们将Sveltekit项目更改为静态应用程序，通过下载适当的静态适配器包：

npm i -D @sveltejs/adapter-static

安装包后，我们需要修改 svelte.config.js 文件从自动适配器更改为静态：

import adapter from '@sveltejs/adapter-static'
import { vitePreprocess } from '@sveltejs/kit/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
  preprocess: vitePreprocess(),

  kit: {
    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
    adapter: adapter({
      // default options are shown. On some platforms
      // these options are set automatically — see below
      pages: 'build',
      assets: 'build',
      fallback: null,
      precompress: false,
      strict: true
    })
  }
}

export default config

在 svelte.config.js 更新后，我们需要添加一个 prerender 选项，通过创建一个 +layout.js 页面到 src/routes 然后只需在 +layout.js:

export const prerender = true

添加并更新后 +layout.js 页面后，我们需要添加我们的移动平台，重新构建我们的项目以创建 build 文件夹

您可以通过运行以下命令来完成：

npm run build
npx cap sync

第一个命令 npm run build 会构建您的 SvelteKit 项目并复制静态构建，而第二个命令 npx cap sync 会同步所有的 web code 到原生平台的正确位置，以便在应用中显示。

此外，同步命令可能会更新原生平台并安装插件，因此当您安装新的 Capacitor 插件, npx cap sync 时，

重新运行

。

不经意间，您已经完成了整个过程，所以让我们在设备上看看应用! 构建和部署原生应用 为了开发 iOS 应用，您需要安装 Xcode 已安装。另外，如果您打算在应用商店上发布应用，需要在iOS中注册Apple Developer Program，在Android中注册Google Play Console。

如果您是新手，native mobile开发者，可以使用Capacitor CLI轻松打开native项目：

npx cap open ios
npx cap open android

一旦您设置了native项目，部署应用到连接设备就很容易了。在Android Studio中，只需等待所有内容就绪，然后您可以在不更改任何设置的情况下将应用部署到连接设备。以下是示例：

android-studio-run

在Xcode中，您需要设置签名账户才能将应用部署到真实设备，而不是仅在模拟器上运行。如果您之前没有这样做过，Xcode会引导您完成整个过程（但请再次注意，您需要注册开发者计划）。之后，您只需点击播放即可在连接设备上运行应用，您可以在顶部选择设备。以下是示例：

xcode-run

恭喜您！您已成功将SvelteKit web应用部署到移动设备。以下是示例：

sveltekit-mobile-app

但等一下，还有更快的方法可以在开发期间完成此操作……

Capacitor Live Reload

到目前为止，您可能已经习惯了所有现代框架的热重载功能，好消息是您可以在移动设备上实现相同的功能 在移动设备上 轻松实现!

通过实时重载，启用对本地托管应用程序的访问 在您的网络上 通过让Capacitor应用程序从特定URL加载内容

第一步是确定您的本地IP地址。如果您使用Mac，可以通过在终端中运行以下命令来找到它：

ipconfig getifaddr en0

在Windows上运行：

ipconfig

然后查找IPv4地址

我们可以通过在文件中添加另一个条目来指示Capacitor从服务器直接加载应用程序： capacitor.config.ts 请务必使用

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

正确的IP和端口 如上面的示例所示__CAPGO_KEEP_0__

现在，我们可以将这些更改应用到本地项目中：

npx cap copy

命令与 copy 类似，但它只会 sync将 web 文件夹和配置中的更改复制到本地项目中，而不更新本地项目。 您可以通过 Android Studio 或 Xcode 再次部署您的应用。之后，如果您在 Svelte 应用中更改了什么内容， 应用将自动重新加载

并显示更改！ 请注意 如果您安装了新插件，如摄像头插件，它仍然需要重新构建本地项目。这是因为本机文件发生了变化，不能在实时环境中完成。

请注意，您应该在配置中使用正确的 IP 和端口。上面的 __CAPGO_KEEP_0__ 块显示了用于演示目的的 SvelteKit 默认端口。 __CAPGO_KEEP_0__

code

使用 Capacitor 插件

让我们看看如何使用一个 Capacitor 插件的示例，我们之前提到过几次。要实现这一点，我们可以通过运行以下命令来安装一个简单的插件：

npm i @capacitor/share

没有什么特别的关于" 分享插件",但它会弹出原生分享对话框！对于这个，我们现在只需要导入包并调用 share() 函数从我们的应用中，所以让我们改变 src/routes/index.svelte 到这个：

<script>
  import { Share } from '@capacitor/share';

  async function share() {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  }
</script>

<h1>Welcome to SvelteKit and Capacitor!</h1>
<button on:click={share}>Share now!</button>

如前所述，当安装新插件时，我们需要执行同步操作并重新部署应用到设备上。要实现这一点，请运行以下命令：

npx cap sync

点击按钮后，您可以看到美丽的原生分享对话框！

添加 Konsta UI

要在 Nuxt 3 应用中使用 Konsta UI，您需要 已经安装了 Tailwind 并且要安装以下包:

npm i konsta

此外，您还需要修改以下文件: tailwind.config.js 将扩展默认（或您的自定义）Tailwind CSS 配置文件，添加一些额外的变体和辅助工具，以支持 Konsta UI。

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/routes/**/*.{svelte}',
    './src/components/**/*.{svelte}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig 现在我们需要设置主

App 组件，以便我们可以设置一些全局参数（如 我们需要将整个应用程序包裹在 theme).

中 App 示例页面 src/routes/+layout.svelte:

<script>
  import { App } from 'konsta/svelte';
</script>

<App theme="ios">
  <slot />
</App>

现在，所有设置都完成了，我们可以在 SvelteKit 页面中使用 Konsta UI Svelte 组件。

Konsta UI Svelte 组件

例如，让我们打开 src/routes/index.svelte 并将其更改为以下内容：

<script>
  import {
    Page,
    Navbar,
    Block,
    Button,
    List,
    ListItem,
    Link,
    BlockTitle,
  } from 'konsta/svelte';
</script>

<Page>
  <Navbar title="My App" />

  <Block strong>
    <p>
      Here is your SvelteKit & Konsta UI app. Let's see what we have here.
    </p>
  </Block>
  <BlockTitle>Navigation</BlockTitle>
  <List>
    <ListItem href="/about/" title="About" />
    <ListItem href="/form/" title="Form" />
  </List>

  <Block strong class="flex space-x-4">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </Block>
</Page>

如果安装所有必要组件后，实时重载出现了不一致的情况，请尝试重新启动所有内容。完成后，您应该看到一个使用 SvelteKit 和 Capacitor 构建的具有某种本地外观的移动应用。

您应该看到以下页面作为结果：

konsta-sveltekit

结论

Capacitor 是基于现有 Web 项目构建本地应用的出色选择，提供了一个简单的方式来共享 code 并保持一致的 UI。

并且通过添加 Capgo”，您甚至可以更轻松地为应用添加实时更新，确保您的用户始终可以访问最新的功能和 bug 修复。

如果您想学习如何将 Capgo 添加到您的 SvelteKit 应用中，请查看下一篇文章：

了解 Capgo 如何帮助您快速构建更好的应用。 免费注册 今天。

Capacitor应用实时更新

当web层bug出现时，通过Capgo将修复推送给用户，而不是等待几天的应用商店审批。用户在后台接收更新，而原生变化仍然在正常的审批路径中。

立即开始

最新博客文章

Capgo为您提供创建真正专业的移动应用所需的最佳见解。

Capacitor应用的双向通信
开发,移动,更新
2025年4月26日

Capacitor应用的双向通信

避免的5种OTA更新常见错误
开发、安全、更新
2025年4月13日

避免的5种OTA更新常见错误

移动应用实时更新的5种安全最佳实践
开发、移动、更新
2025年1月14日

移动应用实时更新的5种安全最佳实践

查看我们的博客中的所有内容