根据阿特伍德定律,“任何可以用 JavaScript 编写的应用程序,最终都会用 JavaScript 编写。”
在本文中,我们将学习如何使用 Ionic 的一个名为电容器的库将网站或 Web 应用程序转换为可以部署在 Android Play 商店或安装在移动设备上的 Android 应用程序。我将在这个演示中使用 react,但你可以使用任何其他框架,甚至是普通的旧 JavaScript。
先决条件
- 生产构建文件夹。大多数框架都有一个构建命令来为你创建一个构建文件夹。如果您使用的是 vanilla JavaScript,请将所有资产和文件添加到文件夹中。
- 安卓工作室
第 1 步:创建一个反应应用程序
我们将首先使用以下命令创建一个反应应用程序。如果您已经有一个现有的项目和构建文件夹,则可以跳过第 1 步和第 2 步。
npx create-react-app my-app
cd my-app
现在要运行我们的反应应用程序,我们使用以下命令
npm start
我们的演示应用程序看起来像这样。
第 2 步:为您的应用程序创建一个 Build 文件夹。
构建文件夹对于将我们的 react 应用程序转换为 android 应用程序至关重要。我们使用以下命令为我们的 react 应用程序创建一个构建文件夹。如果您使用的是另一个框架,它可能有不同的命令,所以我建议您阅读您正在使用的框架的文档。如果您使用的是纯 JavaScript,请创建一个包含所有文件和资产的文件夹。
npm run build
第 3 步:安装电容器
要创建我们的 android 应用程序,让我们首先安装电容器 cli 及其核心库。
npm install @capacitor/cli @capacitor/core
npx cap init
第一个问题将输入您的应用程序的名称,第二个问题将输入应用程序 com.yourAppName.android 的包 id。
现在,打开 webDir 中的电容器.config.ts 文件并输入您的构建文件夹的名称(如果它不同)。
第 4 步:创建您的安卓应用程序
要创建一个 android 应用程序,请确保您已正确安装和配置您的 android studio。
假设上述所有内容都已设置,请运行以下命令。
npm install @capacitor/android
npx cap add android
使用第一个命令,我们将把电容器 android 库下载到我们的项目中,使用第二个命令,我们将生成 android 代码。现在,是时候使用以下命令打开 android studio 了。
npx cap open android
或者,您可以打开 Android Studio 并将 android/ 目录作为 Android Studio 项目导入。打开您的应用程序需要一些时间,但是一旦准备好,它应该看起来像这样。
通过单击 android studio 中的播放按钮,您现在可以运行您的 android 应用程序。
由于某种原因,我的土豆笔记本电脑上的模拟器屏幕全黑。但是,如果您遇到与我相同的问题,请创建一个 apk 并在 Android 模拟器(如适用于 Windows 的 Nox 播放器)或实际的 Android 设备上运行它。
单击 Build >> Build Bundle(s) / APK(s) >> Build APK(s) 以生成可安装的调试 apk 文件。
要将应用程序提交到 Play 商店,我们需要创建一个签名包,但现在为了测试,我们将创建一个调试应用程序。如果成功构建,它将在右下角显示类似的消息。
单击定位文件夹或导航到 android\app\build\outputs\apk。现在您可以在您的 android 手机或 android 模拟器(如 nox player 等)上运行您的应用程序。
奖励部分:为您的 android 应用程序创建自定义启动画面
如果没有自定义的初始屏幕和图标,应用程序将是不完整的。如果我们要创建闪屏和自定义图标,我们必须先安装电容器插件。
npm install -g cordova-res
cordova-res需要一个类似于 Cordova 的结构:将一个图标和一个启动画面文件放在项目的顶级resources文件夹中,如下所示:
resources/
├── android/
└── icon-background.png
└── icon-foreground.png
├── icon.png
└── splash.png
接下来,运行以下命令为您的应用生成不同大小的图标和启动画面。
cordova-res android --skip-config --copy
该命令应生成两个文件夹图标和一个启动画面。您无需进行任何配置,因为在此文件夹中生成的所有资产都将复制到您的 Android 代码文件夹中。
现在要测试我们的启动屏幕,请再次执行第 4 步。