📜  Ionic框架:现代 Web 应用程序背后的力量

📅  最后修改于: 2021-10-22 03:41:01             🧑  作者: Mango

在本文中,我们将接触 ionic 框架。正如标题中所建议的,很明显它用于创建强大的 Web 应用程序并部署到 Android 或 iOS 等本机环境中。

无需学习任何 android、swift 或客观 C(早期用于创建 iOS 应用程序)来创建应用程序,即,如果您不了解这些技术中的任何一项,但仍想创建出色的应用程序并希望您的名字被发布在Play 商店或 iStore,那么它是一种很好的方式。这样做的先决条件是,如果您熟悉 HTML、CSS 和 JavaScript,那么您就可以开始了。如果您了解 Angular,那当然是一个加分项。

现在,一些人可能会遇到的一个基本问题是,一个使用 Web 技术设计的应用程序如何能够在 Android 或 iOS 等本机环境中运行。这个问题由 Apache Cordova(也称为 PhoneGap)回答。它是移动应用程序开发框架,或者只是用于部署 Web 应用程序,使其适合我们希望将其作为最终产品的本机环境。

下面的示例图像清楚地表明了cordova 的工作方式

有关更多详细信息,请在此处阅读

创建第一个离子应用程序的步骤

  1. 下载并安装 Iconic :第一步是在您的系统上下载并安装 ionic。在这里要清楚,由于 ionic 是 npm 模块,因此它只能通过 npm ie 节点包管理器安装。换句话说,您的系统上必须已经安装了 nodejs。从这里下载 nodejs.. 我建议安装 LTS 版本,因为它很稳定。安装 nodejs 后,您可以安装 ionic,因为 npm 将自动安装。下面我将展示安装过程。
    我使用过 ubuntu,但如果您使用的是 Windows,请不要担心,我也会指导 Windows 粉丝:)。仅对于 linux 用户,在终端上写入以下命令以更新安装 ionic 下面的存储库。Windows 用户无需执行任何操作。
    sudo apt-get update

    然后使用linux或windows中不同的命令安装ionic。对于 linux 用户

    sudo apt-get -g install ionic

    由于它是全局安装,所以你需要编写 -g 和 sudo
    对于 Windows 用户,请遵循以下命令。您可能需要以管理员身份运行命令提示符

    npm install ionic
  2. 安装后运行以下命令:
    ionic --version

    这基本上是为了测试你的系统是否已经成功安装了ionic
    下一步是使用以下命令制作您的 ionic 应用程序

    ionic start name_of_project template_name

    该命令是要遵循的基本语法。对于 windows 和 linux 用户来说都是一样的。下图清楚地描述了这个过程:

    让我解释一下上面的命令。从这里开始,基本上告诉创建一个新的 ionic 应用程序,接下来是应用程序的名称,然后是启动模板。 ionic 提供了各种其他模板,具体取决于选项卡、侧菜单、空白等要求。这是将进一步构建的应用程序的基本布局。运行该命令后,它还会询问您是否要将应用程序与cordova 集成,您只需键入yes

  3. 项目目录:最后一步是通过键入以下命令在项目目录中移动
    cd project_name


    也可以登录ionic官网安装ionic pro sdk,享受炫酷环境。 也可以设置SSH,不想也可以暂时跳过
    接下来输入以下命令

    ionic serve

    瞧!!您已经创建了您的第一个应用程序。

    Ionic框架的优缺点

    优点简述:

    • 一次开发,随处部署
    • 由于它正在构建,因此在创建强大而健壮的应用程序方面非常有用。
    • 开发速度快,维护成本低

    也不要忽视缺点。这些是:

    • 与本机应用程序相比,性能不佳。(不要误解这里是比较)
    • 复杂应用的高技能要求
    • 内置导航可能很复杂