资讯专栏INFORMATION COLUMN

Ionic2入坑基础教程和安装指南

jayce / 2976人阅读

摘要:安装程序主要通过命令行工具来创建和开发,并使用来构建和部署为原生应用程序。基础教程确保完成之前的安装并测试启动成功。

安装Ionic

Ionic 2 程序主要通过Ionic命令行工具CLI来创建和开发,并使用Cordova来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。

安装Ionic CLI 和 Cordova

要创建 Ionic 2 项目,你需要安装最新版本的 CLICordova。在此之前你需要安装最新版本的Node.js。点这里 下载安装Node.js,然后继续安装Ionic CLICordova来进行应用程序开发:

安装 Ionic

npm install -g ionic

安装 Cordova

npm install -g cordova

命令前面可能需要添加sudo提权来进行全局安装。

安装完成后来创建你的第一个 Ionic 应用:

ionic start cutePuppyPics --v2

cutePuppyPics可以替换成你的应用程序名称。--v2表示当前生成的是 Ionic 2 版本的应用,不添加则生成 Ionic 1 应用。

创建完成后cd到你的程序目录中,执行ionic serve来启动你的Ionic应用,并确保测试在浏览器中能够正常显示:

cd cutePuppyPics
ionic serve
平台指南

对于那些为iOS和Android构建原生应用程序(大多数人),每个平台都有一定的功能和安装要求,才能充分利用Ionic和Cordova开发。

对于iOS开发人员,请查看Cordova iOS平台指南,并按照说明安装或升级Xcode,并注册开发人员帐户,开始为iOS开发应用程序。

对于Android开发人员,请查看Cordova Android平台指南,并按照说明安装SDK或Android Studio,开始为Android开发应用程序。

Ionic 2 基础教程

确保完成之前的安装并测试启动成功。下面我们将启动新的应用程序,添加页面,并在这些页面之间导航等过程。 让我们开始吧!

启动一个新的Ionic 2应用

start命令来创建一个新的Ionic 2应用。别忘了添加--v2来指定这是一个 Ionic 2 的应用程序。再添加一个tutorial参数,指定使用tutorial模版创建该应用。这样一个基于TypeScript的Ionic 2应用就被成功创建了。

ionic start MyIonic2Project tutorial --v2

在这个过程中将会下载 Ionic 2 库包,安装所需的npm模块,并为应用配置好Cordova。如果在创建时不指定tutorial参数,ionic默认使用 tabs模版来创建应用。

在浏览器中查看应用

现在你可以cd到创建好的项目文件夹中,使用serve命令在浏览器中预览你的应用。

cd MyIonic2Project/
ionic serve

如果成功启动,你将看到上面这样的欢迎界面。

项目结构

让我们来剖析一下Ionic 2应用,在我们创建的文件夹中,我们可以看到一个典型的Cordova项目结构。我们可以在其中安装原生插件,并创建平台特定的项目文件。

./src/index.html

src/index.html是 Ionic 2 应用的主入口文件,其目的是设置脚本和CSS引导,然后开始运行我们的应用程序。 我们不会在这个文件中花费大量的时间。

为了让应用正常运作,Ionic 2 会在HTML中寻找标记。 在这个例子中,我们有:

并且在下方我们还能看到这样的脚本引用:

  
  
  

cordova.js是Cordova应用的需求文件,我们在开发过程中这个文件将会提示404错误,这不需要担心。Cordova将会在构建过程中自动注入这个文件。

build/polyfills.js 是在构建过程中自动生成的,我们不需要过多关注。

build/main.js是一个包含了Ionic, Angular和你的JS脚本的文件。

./src/app/app.component.ts

app文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行ionic serve时,app中的代码将被编译成当前浏览器能够执行的javascript版本(当前是ES5)。也就是说我们可以使用TypeScript或更高级别的 ES6+ 进行开发,而在编译时会自动降级为浏览器可识别的版本。

app.component.ts 是应用的入口文件。

在文件中我们能够看到这样的结构:

@Component({
  templateUrl: "app.html"
})
export class MyApp {
  constructor(
  )
}

每个应用程序都有一个根组件,用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的ng-app非常相似。原先的启动配置被放倒了app.module.ts文件中。

在这个组件中,我们设置了模版文件app.html,下面我们来看一下这个文件。

./src/app/app.html

app.html里是我们应用的主模版:



  
    
      Pages
    
  

  
    
      
    
  



在这个模板中,我们设置了一个ion-menu作为侧面菜单,然后一个ion-nav组件作为主要内容区域。ion-menu菜单的[content]属性绑定到了我们ion-nav的本地变量content上。所以我们知道哪里会发生动作变化。

接下来,我们来看看如何创建更多页面并执行基本的导航。

添加页面

现在我们对Ionic 2应用的布局有一个基本的掌握,让我们来了解一下在应用中创建和导航到页面的过程。
让我们看一下app.html页面的底部:

注意[root]属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时,变量rootPage引用的组件将是根页面。

app.component.ts中,MyApp组件在其构造函数中指定:

...
import { HelloIonicPage } from "../pages/hello-ionic/hello-ionic";
...

export class MyApp {
  ...
  
  // make HelloIonicPage the root (or first) page
  rootPage: any = HelloIonicPage;

    constructor(
      public platform: Platform,
      public menu: MenuController
    ) {
    ...
  }

  ...
}

我们看到rootPage设置成了HelloIonicPage ,所以HelloIonicPage将是在nav控制器中加载的第一个页面。

创建一个页面

接下来,让我们看看我们正在导入的HelloIonicPage。在src/app/pages/hello-ionic/文件夹中,找到并打开hello-ionic.ts

你可能已经注意到每个页面都有自己的文件夹,该文件夹以页面命名。 在每个文件夹内,我们还可以看到一个.html和一个.scss同名文件。 例如,在hello-ionic/我们将找到hello-ionic.tshello-ionic.htmlhello-ionic.scss。 虽然使用这种模式不是必需的,但它可以有助于保持项目的组织结构。

然后我们找到HelloIonicPage类,在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意,因为页面是动态加载的,所以它们没有选择器(selector ):

import { Component } from "@angular/core";


@Component({
  templateUrl: "hello-ionic.html"
})
export class HelloIonicPage {
  constructor() {

  }
}

所有的页面都会有一个类和一个关联的模版。让我们再看一下src/app/pages/hello-ionic/hello-ionic.html,这是一个模版页面:


  
    
    Hello Ionic
  





  

Welcome to your first Ionic app!

This starter project is our way of helping you get a functional app running in record time.

Follow along on the tutorial section of the Ionic docs!

是这个页面中导航栏的模版。当我们导航到这个页面,导航栏的按钮和标题作为页面转换的一部分进行过渡。

模板的其余部分是标准的Ionic代码,用于设置我们的内容区域并输出我们的欢迎信息。

创建其他页面

要创建一个其他的页面,我们不需要太多的事情,只要确保配置标题和我们期望在导航栏显示的东西即可。

让我们来看一下src/app/pages/list/list.ts。在这里,你会看到一个新的页面被定义:

import { Component } from "@angular/core";

import { NavController, NavParams } from "ionic-angular";

import { ItemDetailsPage } from "../item-details/item-details";


@Component({
  templateUrl: "list.html"
})
export class ListPage {
  selectedItem: any;
  icons: string[];
  items: Array<{title: string, note: string, icon: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // If we navigated to this page, we will have an item available as a nav param
    this.selectedItem = navParams.get("item");

    this.icons = ["flask", "wifi", "beer", "football", "basketball", "paper-plane",
    "american-football", "boat", "bluetooth", "build"];

    this.items = [];
    for(let i = 1; i < 11; i++) {
      this.items.push({
        title: "Item " + i,
        note: "This is item #" + i,
        icon: this.icons[Math.floor(Math.random() * this.icons.length)]
      });
    }
  }

  itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  }
}

此页面将创建一个包含多个项目的基本列表页面。

总的来说,这个页面和我们之前看到的HelloIonicPage非常相似。 在下一节中,我们将学习如何导航到新页面!

导航到页面

回想上一部分我们在ListPage类中有一个函数,看起来像这样:

  itemTapped(event, item) {
    this.navCtrl.push(ItemDetailsPage, {
      item: item
    });
  }

你可能已经注意到我们引用了一个ItemDetailsPage。这是一个包含在教程启动器中的页面。我们要在list.ts中导入它,我们可以这样导入:

...
import { ItemDetailsPage } from "../item-details/item-details";
...

保存好之后。你会发现ionic serve将重新编译应用程序并刷新浏览器,你的修改将会出现在程序中。让我们在浏览器中重新访问我们的应用程序,当我们点击一个项目,它将导航到项目详细信息页面!请注意,菜单切换按钮将被替换为后退按钮。这是Ionic遵循的原生风格,但可以按需配置。

工作原理

Ionic 2 导航的工作原理就像一个简单的堆栈,我们通过push将一个页面推到堆栈的顶端,这会让我们的应用前进一步并显示一个返回按钮。反之,我们也可以pop掉一个页面。因为我们在构造函数中设置了this.navCtrl,我们可以调用this.navCtrl.push(),并传递我们要导航到的页面。我们还可以传递一个数据对象给我们想要导航到的页面。使用push导航到新页面很简单,而且Ionic的导航系统非常的灵活。你可以查看导航文档找到更多高级导航示例。

当涉及到URL,Ionic 2的工作方式有点不同于Ionic 1。不使用URL导航,可以确保我们可以总是回到一个页面(例如应用程序启动)。这意味着我们不只是限于使用href来导航。无论怎样,我们仍然可以选择在必要时使用网址导航到某个网页。

后续步骤

到此你已经完成了Ionic 2基本教程,了解了Ionic 2并开始朝着掌握Ionic 2进发。有能力的话最好去Ionic官网阅读完整的技术文档。

建议熟悉一下TypeScript的基本语法和使用,包括@types使用和d.ts编写。

掌握Angular2的基本原理和开发思路。

熟悉Ionic 2的所有Components和API。

了解Cordova的使用方法和插件。

祝在Ionic踩坑之路上越走越远。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87954.html

相关文章

  • 使用Docker创建Ionic2 PWA开发环境 1

    摘要:它使用作为其开发语言。关于为了避免环境搭建污染我的,我选择将我的开发环境限制在一个容器中,同时避免了自制软件和不可逆的本地安装程序。我们将使用来构建一个新的镜像创建一个新的。下一篇文章将详细介绍如何用搭建真正用于生产环境的项目。 我想创建一个简单的渐进式Web应用程序(PWA),在移动设备上运行,接收用户数据并将其保存到后台。 我选择了Ionic 2(忽略了它创建本地应用程序的能力),...

    cod7ce 评论0 收藏0
  • 使用Docker创建Ionic2 PWA开发环境 1

    摘要:它使用作为其开发语言。关于为了避免环境搭建污染我的,我选择将我的开发环境限制在一个容器中,同时避免了自制软件和不可逆的本地安装程序。我们将使用来构建一个新的镜像创建一个新的。下一篇文章将详细介绍如何用搭建真正用于生产环境的项目。 我想创建一个简单的渐进式Web应用程序(PWA),在移动设备上运行,接收用户数据并将其保存到后台。 我选择了Ionic 2(忽略了它创建本地应用程序的能力),...

    Anchorer 评论0 收藏0
  • 前端入坑指南

    摘要:作为自学两年的初级前端,希望对那些想入门前端开发的人分享一些观点。尤其是这几年前端领域飞速的发展,新东西层出不穷。或者关注下我的微信公众号前端获取每天分享前端入门知识。为什么选择前端 做一件事之前最好问问自己为什么要做,然后再去思考该怎么做。如果只是看到别人做了,并且有很不错的收入,然后自己就决定做了,很可能中途放弃浪费掉很多时间。起码问自己一个问题:我是否真的热爱这个领域,并且很乐意在这个...

    junnplus 评论0 收藏0
  • FIBOS入坑指南——本地开发环境搭建

    摘要:如果出错,需要查看一下本地节点是否正在运行,在浏览器输入后记完至此,本地的开发环境基本搭建完成,如果你想试试在本地环境编写部署调用智能合约,可以参考官方开发文档,当然,后续有时间,我也会把在智能合约开发过程中踩到的坑写写。 FIBOS是什么? FIBOS 是一个结合 FIBJS 以及 EOS 的 JavaScript 的运行平台,它使得 EOS 提供可编程性,并允许使用 JavaSc...

    goji 评论0 收藏0
  • Ionic2入门教程(二)进阶配置:Android打包

    摘要:打包两个命令就可以啦成功啦安装到手机,很棒吧发布需要签名为什么要签名那么多要给一个唯一身份有了这个唯一身份才能上传到商店中升级应用时若包名一致但签名不一致,也会安装失败所以正式版都要签名,详细我后续再添加 0、前提 需要Java jdk、Android sdk、Android 签名 1、安装 Java jdk 并配置环境变量 (1)去oracle官网下载jdk,按照如下操作,也可直接点...

    Kylin_Mountain 评论0 收藏0

发表评论

0条评论

jayce

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<