使用电容器😱将您的网站转换为 Android 应用程序。

2025-05-25

使用电容器😱将您的网站转换为 Android 应用程序。

根据 Atwood 定律，“任何可以用 JavaScript 编写的应用程序最终都将用 JavaScript 编写”。

在本文中，我们将学习如何使用 Ionic 的 Capture 库将网站或 Web 应用转换为 Android 应用，以便部署到 Android Play 商店或安装在移动设备上。我将在本演示中使用 React，但您也可以使用任何其他框架，甚至是普通的 JavaScript。

先决条件

  • 生产环境的构建文件夹。大多数框架都提供构建命令来为您创建构建文件夹。如果您使用的是原生 JavaScript，请将所有资源和文件添加到该文件夹​​中。
  • Android 工作室

步骤 1：创建一个 React 应用程序。

我们将首先使用以下命令创建一个 React 应用程序。如果您已有项目和构建文件夹，则可以跳过步骤 1 和 2。



npx create-react-app my-app
cd my-app
Enter fullscreen mode Exit fullscreen mode

现在要运行我们的 React 应用程序，我们使用以下命令



npm start
Enter fullscreen mode Exit fullscreen mode

我们的演示应用程序看起来像这样。

演示应用程序

第 2 步：为您的应用程序创建一个 Build 文件夹。

在将 React 应用转换为 Android 应用的过程中，构建文件夹至关重要。我们使用以下命令为 React 应用创建一个构建文件夹。如果您使用的是其他框架，则可能包含不同的命令，因此建议您阅读该框架的文档。如果您使用的是纯 JavaScript，请创建一个包含所有文件和资源的文件夹。



npm run build
Enter fullscreen mode Exit fullscreen mode

步骤3：安装电容器

为了创建我们的 android 应用程序，我们首先安装 CaptureCli 及其核心库。



npm install @capacitor/core 
npm install -D @capacitor/cli 
npx cap init
Enter fullscreen mode Exit fullscreen mode

第一个问题是输入您的应用程序的名称，第二个问题是输入应用程序的包 ID com.yourAppName.android。

电容器cli

现在，打开 webDir 中的capacitor.config.ts 文件，如果构建文件夹的名称不同，请输入该文件夹的名称。

电容器配置文件

步骤 4：创建你的 Android 应用程序

要创建 Android 应用程序，请确保您已正确安装并配置了 Android Studio。

假设以上所有内容均已设置完毕，请运行以下命令。



npm install @capacitor/android
npx cap add android
Enter fullscreen mode Exit fullscreen mode

使用第一个命令，我们将把 Capture Android 库下载到我们的项目中，使用第二个命令，我们将生成 Android 代码。
现在，是时候使用以下命令打开 Android Studio 了。



npx cap open android
Enter fullscreen mode Exit fullscreen mode

或者，您可以打开 Android Studio 并将 android/ 目录导入为 Android Studio 项目。
应用程序打开需要一些时间，但准备就绪后应该如下所示。

Android Studio项目结构

通过单击 Android Studio 中的播放按钮，您现在就可以运行您的 Android 应用程序。

打开模拟器

我的土豆笔记本电脑上的模拟器屏幕不知何故完全黑屏了。不过，如果你也遇到同样的问题，可以创建一个 apk 文件，然后在 Android 模拟器（例如 Windows 版 Nox Player）或真正的 Android 设备上运行它。

构建 apk

点击Build >> Build Bundle(s) / APK(s) >> Build APK(s)生成可安装的调试apk文件。

要将应用提交到 Play 商店，我们需要创建一个签名的 bundle。现在为了测试，我们将创建一个调试应用。
如果构建成功，它将在右下角显示类似的消息。

构建 apk 成功

点击“定位文件夹”或导航至 android\app\build\outputs\apk。现在，您可以在 Android 手机或 Android 模拟器（例如 nox 播放器等）上运行您的应用程序。

应用程序演示 gif1

好极了！它起作用了🥳🥳🥳。

奖励部分：为你的 Android 应用程序创建自定义启动画面

如果没有自定义的启动画面和图标，应用程序就不完整。如果我们想要创建启动画面和自定义图标，必须先安装 Capture 插件。



npm install -g cordova-res
Enter fullscreen mode Exit fullscreen mode

cordova-resresources期望类似 Cordova 的结构：将一个图标和一个启动画面文件放在项目的顶级文件夹中 ，如下所示：



resources/
├── android/
        └── icon-background.png
        └── icon-foreground.png
├── icon.png
└── splash.png
Enter fullscreen mode Exit fullscreen mode

文件夹结构

我使用的图标和启动画面是我之前两个月做的一个项目的成果。通过我的新项目，加密货币新手投资者可以毫无风险地尝试投资加密货币。如果您想了解更多信息，请订阅我的新闻通讯，并在 https://blog.webdrip.in/上接收更新。

接下来，运行以下命令为您的应用生成不同大小的图标和启动画面。



cordova-res android --skip-config --copy
Enter fullscreen mode Exit fullscreen mode

该命令应该会生成两个文件夹图标和一个启动画面。您无需配置任何内容，因为此文件夹中生成的所有资源都将复制到您的 Android 代码文件夹中。

图标文件夹结构

现在，要测试我们的启动画面，请再次按照步骤 4 操作。

最终的应用程序演示！！！

参考

https://media.giphy.com/media/xUPOqo6E1XvWXwlCyQ/giphy.gif

我希望这篇文章对您有所帮助。💪🏾如果您有任何疑问，请随时发表评论或联系我。在下一篇博客中，我们将为电容器应用添加推送通知功能。

如需更多此类见解，请访问我的博客网站blog.webdrip.in

文章来源：https://dev.to/narottam04/convert-your-website-into-an-android-app-using-capacitor--5bh2
Devto 翻译
PREV
为您的下一个项目提供免费的 Tailwind 组件。
NEXT
如何在 React 中创建标签管理器