怎样通过浏览器导航栏打开应用程序_使用Capacitor和Vue.js构建移动应用程序

如何使用Capacitor和尖端Web技术(如Vue.js和Ionic 4 Web组件)为Android和iOS构建跨平台移动应用程序？还可以利用Capacitor以使用相同的代码库来定位其他平台，例如桌面和Web应用？

了解Ionic开发者都知道Ionic团队宣布了Apache Cordova和Adobe PhoneGap的开源精神继承者，称为Capacitor。Capacitor允许使用现代Web技术构建应用程序，并在任何地方都可以运行它，从Web浏览器到本机移动设备(Android和iOS)，甚至是通过Electron的桌面平台，用于使用Node.js构建跨平台桌面应用程序的流行GitHub平台和前端Web技术。

Ionic是受欢迎的混合移动框架，Capacitor将成为Ionic应用程序的默认选项。Capacitor还提供兼容层，允许在Capacitor项目中使用现有的Cordova插件。

除了在Ionic应用程序中使用Capacitor之外，还可以在没有Ionic的情况下使用它，是一个不错的首选的前端框架或UI库，例如Vue，React，Angular with Material，Bootstrap等。

Capacitor特点

Capacitor具有许多功能，使其成为Cordova等其他解决方案的良好替代品。让我们看看Capacitor的一些功能：

• 开源和免费
• Capacitor是一个开源项目，根据许可的MIT许可证授权，由Ionic和社区维护。
• 跨平台
• 可以使用Capacitor构建具有一个代码库的应用程序并定位多个平台。可以运行一些命令行界面(CLI)命令来支持另一个平台。
• 对平台SDK的本机访问
• 当需要访问本机SDK时，Capacitor不会妨碍。
• 标准Web和浏览器技术
• 使用Capacitor构建的应用程序使用标准Web API，因此应用程序也将是跨浏览器的，并且将在遵循该标准的所有现代浏览器中运行良好。
• 可扩展
• 可以通过添加插件来访问底层平台的本机功能，或者，如果找不到符合需求的插件，则可以通过简单的API创建自定义插件。

开发环境要求：

• 需要计算机上安装Node v8.6 +和npm v5.6 +。
• 要构建iOS应用程序，需要一台带Xcode的Mac。
• 要构建Android应用程序，需要使用Android SDK安装Java 8 JDK和Android Studio。

创建Vue项目

我们将安装Vue CLI并生成一个新的Vue项目。然后，我们将使用Vue路由器向我们的应用程序添加导航。最后，我们将使用Ionic 4组件构建一个简单的UI。

安装VUE CLI V3

让我们首先从命令行运行以下命令从npm安装Vue CLI v3：

$ npm install -g @vue/cli

生成一个新的VUE项目

安装Vue CLI之后，让我们通过从CLI运行以下命令来生成新的Vue项目：

$ vue create vuecapacitordemo

可以通过在项目的根文件夹中导航并运行以下命令来启动开发服务器：

$ cd vuecapacitordemo $ npm run serve

前端应用程序将从中运行

http://localhost:8080/

在Web浏览器中访问，则应该看到以下页面：

添加Capacitor

可以通过两种方式使用电容器：

• 从头开始创建一个新的Capacitor项目。
• 将Capacitor添加到现有的前端项目中。

将Capacitor与VUE集成

Capacitor旨在被放入任何JavaScript应用程序中。要将Capacitor添加到Vue Web应用程序，需要执行几个步骤。

首先，从npm安装Capacitor CLI和核心软件包。确保在Vue项目中，并运行以下命令：

$ cd vuecapacitordemo

$ npm install --save @capacitor/core @capacitor/cli

接下来，运行以下命令，使用应用程序的信息初始化Capacitor：

$ npx cap init

我们npx用来运行Capacitor命令。

npx是一个npm v5.2.0附带的实用程序，旨在使运行在npm注册表中托管的CLI实用程序和可执行文件变得容易。例如，它允许开发人员使用本地安装的可执行文件，而无需使用npm运行脚本。

输入所需的详细信息后，Capacitor将添加到Vue项目中。

使用Capacitor插件

Capacitor提供了一个运行时，使开发人员能够使用Web的三大支柱，HTML，CSS和JavaScript来构建在Web上以及主要桌面和移动平台上本机运行的应用程序。但它还提供了一组插件来访问设备的本机功能，例如相机，而无需为每个平台使用特定的低级代码; 该插件完成，并为此提供规范化的高级API。

Capacitor还提供了一个API，可以使用该API为Ionic团队提供的官方插件集未涵盖的本机功能构建自定义插件。

为目标平台构建应用程序

为了构建项目并为目标平台生成本机二进制文件，需要执行几个步骤。

让我们首先看一下它们：

1. 生成Vue应用程序的生成版本。
2. 将所有Web资产复制到Capacitor生成的本机项目。
3. 在Android Studio(或Xcode for iOS)中打开Android项目，并使用本机集成开发环境(IDE)在真实设备(如果已连接)或模拟器上构建和运行应用程序。

因此，运行以下命令来创建生成版本：

$ npm run build

接下来，使用copyCapacitor CLI的命令将Web资产复制到本机项目：

$ npx cap copy

最后，可以使用open Capacitor CLI 的命令在本机IDE：

$ npx cap open android

Android Studio将与项目一起打开，或者将打开包含本机项目文件的文件夹。

如果没有打开Android Studio，只需手动打开IDE，转到“文件”→“打开.”，然后导航到项目并android从IDE中打开该文件夹。

​可以使用Android Studio使用模拟器或真实设备启动应用。

我们使用了Ionic Capacitor和Vue以及Ionic 4 Web组件来创建一个带有Web技术的移动Android应用程序。

​