使用 SvelteKit 和 Capacitor 构建移动应用

本教程将从新建一个 SvelteKit 应用开始，逐步过渡到使用 Capacitor 的原生移动开发。您也可以选择在此基础上集成 Konsta UI 以增强 Tailwind CSS 移动 UI。

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

按照本教程逐步转换您的 SvelteKit 应用为移动应用，使用 Capacitor，并在需要时使用 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__ 添加到您的 SvelteKit 应用程序中

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

首先，安装 Capacitor __CAPGO_KEEP_1__

__CAPGO_KEEP_0__ sync __CAPGO_KEEP_1__

__CAPGO_KEEP_2__ Capacitor CLI 作为开发依赖项并在项目中设置它。在设置过程中，您可以按“回车”键以接受名称和捆绑 ID 的默认值。

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

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

# 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

此时，您应该在 SvelteKit 项目中看到新的 ios 和 android 文件夹。

这些是真正的本机项目！

要在将来访问 Android 项目，需要安装 Android Studio。对于 iOS，需要 Mac，并应安装 Xcode.

另外，您应该在项目中找到一个 capacitor.config.ts 文件，其中包含一些基本的Capacitor设置，用于同步过程。您需要注意的是 webDir，它必须指向您的构建命令的结果。目前，它是错误的。

要修复此问题，请打开 capacitor.config.ts 文件并更新 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 更新后，我们需要在 src/routes 中创建一个 +layout.js 页面，并仅在 +layout.js 中添加以下导出 ：:

export const prerender = true

添加和更新页面后，我们需要添加我们的移动平台，重新构建项目以创建文件夹 __CAPGO_KEEP_0__ 重新构建项目以创建文件夹 build 您可以通过运行以下命令来完成：

第一个命令

npm run build
npx cap sync

将构建您的 SvelteKit 项目并复制静态构建，而第二个命令 npm run build 将同步所有 web __CAPGO_KEEP_0__ 到原生平台的正确位置，以便在应用中显示 npx cap sync will sync all the web code into the right places of the native platforms so they can be displayed in an app.

__CAPGO_KEEP_0__ Capacitor plugins是时候运行 npx cap sync 再次确认。

你已经完成了整个过程,现在让我们看看在设备上运行的应用程序!

构建和部署原生应用

为了开发iOS应用,你需要 Xcode 安装,而对于Android应用,你需要 Android Studio 安装。另外,如果你打算在应用商店上发布你的应用,你需要在iOS上注册Apple Developer Program,在Android上注册Google Play Console。

如果你是原生移动开发的新手,你可以使用Capacitor CLI轻松打开原生项目:

npx cap open ios
npx cap open android

一旦你设置好了原生项目,就可以轻松地将应用程序部署到连接的设备上。在Android Studio中,你只需要等待所有内容就绪,然后你就可以在不改变任何设置的情况下将应用程序部署到连接的设备上。以下是一个例子:

在Xcode中,你需要设置签名账户才能将应用程序部署到真实设备,而不是仅仅在模拟器上运行。如果你之前没有做过, Xcode会指导你完成整个过程(但再次确认,你需要注册开发者计划)。之后,你只需点击播放即可在连接的设备上运行应用程序,你可以在顶部选择设备。以下是一个例子:

恭喜!您已经成功将 SvelteKit 网站应用部署到移动设备。以下是一个例子：

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

Capacitor Live Reload

到目前为止，您可能已经习惯了所有现代框架中的热重载功能，好消息是您可以在移动设备上实现相同的功能 仅需最少的努力！ 启用对您的本地托管应用程序的访问，具有实时重载

在您的网络上 通过让 __CAPGO_KEEP_0__ 应用程序从特定 URL 加载内容。 by having the Capacitor app load the content from the specific URL.

__CAPGO_KEEP_0__

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 和端口，如上例所示。

现在，我们可以将这些更改应用到我们的原生项目中：

npx cap copy

命令与 copy 类似，但它只会 sync将对 web 文件夹所做的更改复制到原生项目中 命令的参数与 和配置，

您可以通过 Android Studio 或 Xcode 再次部署您的应用程序。之后，如果您在 Svelte 应用程序中更改了什么内容， 应用程序将自动重新加载 并显示更改！

请记住 如果您安装了新插件，如摄像头插件，它仍然需要重新构建您的原生项目。这是因为原生文件已更改，无法在实时进行。

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

使用 Capacitor 插件

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

npm i @capacitor/share

没有什么特别的 分享插件，但它会弹出原生分享对话框！ share() 从我们的应用程序中选择一个功能，所以让我们改变 __CAPGO_KEEP_0__ 安装新插件时，我们需要执行同步操作，然后重新部署应用程序到我们的设备。要执行此操作，请运行以下命令：

<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 src/routes/index.svelte

现在我们需要设置主 App 组件，以便我们可以设置一些全局参数（如 theme).

我们需要将整个应用程序包裹在 App 中 src/routes/+layout.svelte:

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

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

示例页面

现在当一切设置就绪时，我们可以在 SvelteKit 页面中使用 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>

如果安装所有必要组件后，live reload 出现了同步问题，请尝试重新启动一切。一旦你完成了这一步，你应该看到一个使用 SvelteKit 和 Capacitor 构建的具有某种本机外观的移动应用程序。

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

结论

Capacitor 是基于现有 web 项目构建原生应用的出色选择，提供一种简单的方式来共享 code 并保持一致的 UI。

并且通过添加 Capgo，使得添加实时更新到您的应用变得更加容易，确保您的用户始终可以访问最新的功能和 bug 修复。

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

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