ionic2混合app开发系列1环境搭建和ionic2项目目录介绍

1环境搭建

一年前研究混合框架&＃xff0c;初步确定了四种方案给公司选择&＃xff0c;ionic&＃xff0c;hbuilder&＃xff0c;wex5,React-native这四个框架各有优缺点&＃xff0c;ionic和react&＃xff0d;native是国外框架&＃xff0c;相对好一点&＃xff0c;文档更新很快&＃xff0c;就不一一说了&＃xff0c;大概的思路都是一样的&＃xff0c;js逻辑实现&＃xff0c;同时调用原生功能&＃xff0c;h5&＃xff0c;CSS3 UI实现&＃xff0c;其实他们都有自己的ui框架&＃xff0c;当时选择了国内的hbuiler&＃xff0c;开发了三款应用&＃xff0c;iOS和Android都有&＃xff0c;今天同样公司发展的改变&＃xff0c;整体框架都变了&＃xff0c;ionic2框架重新提上了方案&＃xff0c;决定用ionic2开发hybird应用(具体原因你猜)&＃xff0c;后续会有系列的博客分享。

 

安装ionic最新版本

ionic官网地址&＃xff1a;http://ionicframework.com

1.准备工作

下载 Node.js&＃xff08;下载包&＃xff09;&＃xff0c;WebStorm&＃xff08;IDE&＃xff0c;编写代码&＃xff0c;浏览器调试&＃xff09;,JDK&＃xff08;webstorm 运行环境&＃xff09;&＃xff0c;Android SDK(android编译)

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

要创建 Ionic 2 项目&＃xff0c;你需要安装最新版本的 CLI 和 Cordova 。在此之前你需要安装最新版本的 Node.js 。点这里 下载安装 node.js&＃xff0c;然后继续安装 Ionic CLI 和 Cordova 来进行应用程序开发&＃xff1a;

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

安装 Ionic

npm install -g ionic

 

安装 Cordova

npm install -g cordova

 

查看ionic版本

ionic –v

 

查看cordova版本

cordova –v

 

更新ionic和cordova包

npm update -g cordova ionic

 

更新已建ionic项目中的js类库&＃xff0c;命令行中先进入项目所在目录

ionic lib update

 

展现ionic项目结果&＃xff08;显示在iOS和Android上的样式&＃xff09;

ionic serve –lab

 

创建项目

ionic start myApp blank&＃xff08;空项目&＃xff09; 

ionic start myApp tabs&＃xff08;带导航条&＃xff09; 

ionic start myApp sidemenu&＃xff08;带侧滑菜单&＃xff09;

 

添加android/ios平台

ionic platform add android/ios&＃xff08;添加android平台/ios&＃xff09; 

ionic platform remove android/ios&＃xff08;移除android平台/ios&＃xff09; 

ionic build android/ios&＃xff08;编译项目apk,ipa&＃xff09;

ionic emulate android/ios&＃xff08;运行项目apk 手机连接在手机运行 模拟器连接在模拟器运行&＃xff09; 

 

生成android&＃xff0f;ipa安装包(生成后apk&＃xff0f;ipa的存放路径在终端种可以看到)

ionic build android/ios

ionicrun android/ios &＃xff08;相当于build &＃43; emulate&＃xff09; 

ionicserve &＃xff08;开启服务调试&＃xff09; 

 

指明一个外部的ip地址&＃xff0c;可以让外部用户查看。

ionic serv --address 68.52.96.10

 

使用设备运行应用&＃xff0c;如果无设备可用将自动使用模拟器

ionic run ios [options]

//options的选项包括&＃xff1a;

-l livereload&＃xff0c; 实时刷新变化。

-c 打印app里的console

-s 打印设备的console

-p 指定设备的端口

-i 指定livereload的重刷端口

--debug|--release

//当处于livereload模式时&＃xff0c;使用r重启客户端&＃xff0c;使用 g your_url 跳转到指定url&＃xff0c; 使用c启动或关闭console&＃xff0c;使用s启动或关闭设备的console&＃xff0c; 使用q退出。

 

//查看系统情况

ionic info

 

安卓自带浏览器性能不好&＃xff0c;可以强行安装一个壳&＃xff0c;这将安装一个Chromium内核。

ionic browser add crosswalk

 

查看可用的browser

ionic browser list

 

删除安装的browser

ionic browser revert android

2 项目目录分析

安装完成后来创建你的第一个 Ionic 应用&＃xff1a;

ionic start MenuDemo sidemenu --v2

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

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

cd MenuDemo

ionic serve

浏览器运行起来是这样的

 

 

 

 

 

 

 

 

 

 

 

 

 

项目结构

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

src/index.html

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

为了让应用正常运作&＃xff0c;Ionic 2 会在HTML中寻找 标记。 在这个例子中&＃xff0c;我们有&＃xff1a;

并且在下方我们还能看到这样的脚本引用&＃xff1a;

 

 

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

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

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

 

./src/app/app.component.ts

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

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

在文件中我们能够看到这样的结构&＃xff1a;

&＃64;Component({

  templateUrl: &＃39;app.html&＃39;

})

export class MyApp {

  constructor(

  )

}

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

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

./src/app/app.html

app.html 里是我们应用的主模版&＃xff1a;

 
   
      Menu
   
 

 
   
     
        {{p.title}}
     
   
 

 

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

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

添加页面

现在我们对Ionic 2应用的布局有一个基本的掌握&＃xff0c;让我们来了解一下在应用中创建和导航到页面的过程。

让我们看一下 app.html 页面的底部&＃xff1a;

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

在 app.component.ts 中&＃xff0c; MyApp 组件在其构造函数中指定&＃xff1a;

import { Component, ViewChild } from &＃39;&＃64;angular/core&＃39;;
import { Nav, Platform } from &＃39;ionic-angular&＃39;;
import { StatusBar, Splashscreen } from &＃39;ionic-native&＃39;;import { Page1 } from &＃39;../pages/page1/page1&＃39;;
import { Page2 } from &＃39;../pages/page2/page2&＃39;;&＃64;Component({templateUrl: &＃39;app.html&＃39;
})
export class MyApp {&＃64;ViewChild(Nav) nav: Nav;rootPage: any &＃61; Page1;pages: Array<{title: string, component: any}>;constructor(public platform: Platform) {this.initializeApp();// used for an example of ngFor and navigationthis.pages &＃61; [{ title: &＃39;Page One&＃39;, component: Page1 },{ title: &＃39;Page Two&＃39;, component: Page2 }];}initializeApp() {this.platform.ready().then(() &＃61;> {// Okay, so the platform is ready and our plugins are available.// Here you can do any higher level native things you might need.StatusBar.styleDefault();Splashscreen.hide();});}openPage(page) {// Reset the content nav to have just this page// we wouldn&＃39;t want the back button to show in this scenariothis.nav.setRoot(page.component);}
}

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

而page1指向的页面是import { Page1 } from &＃39;../pages/page1/page1&＃39;;

创建一个页面

接下来&＃xff0c;让我们看看我们正在导入的 Page1。在 src/ pages/page1/page1 文件夹中&＃xff0c;找到并打开 page1.ts 。

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

然后我们找到 page1类&＃xff0c;在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意&＃xff0c;如果页面是动态加载的&＃xff0c;那么它们没有选择器&＃xff08; selector &＃xff09;&＃xff1a;

import { Component } from &＃39;&＃64;angular/core&＃39;;
import { NavController } from &＃39;ionic-angular&＃39;;
&＃64;Component({selector: &＃39;page-page1&＃39;,templateUrl: &＃39;page1.html&＃39;
})
export class Page1 {constructor(public navCtrl: NavController)  }
}

所有的页面都会有一个类和一个关联的模版。让我们再看一下 src/ pages/ page1/ page1.html &＃xff0c;这是一个模版页面&＃xff1a;

Page One

Ionic Menu Starter

If you get lost, the docs will show you the way.

Toggle Menu

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

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

创建其他页面

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

让我们来看一下 src/pages/page2/ page2.ts。在这里&＃xff0c;你会看到一个新的页面被定义&＃xff1a;

import { Component } from &＃39;&＃64;angular/core&＃39;;
import { NavController, NavParams } from &＃39;ionic-angular&＃39;;
&＃64;Component({selector: &＃39;page-page2&＃39;,templateUrl: &＃39;page2.html&＃39;
})
export class Page2 {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 paramthis.selectedItem &＃61; navParams.get(&＃39;item&＃39;);// Let&＃39;s populate this page with some filler content for funziesthis.icons &＃61; [&＃39;flask&＃39;, &＃39;wifi&＃39;, &＃39;beer&＃39;, &＃39;football&＃39;, &＃39;basketball&＃39;, &＃39;paper-plane&＃39;,&＃39;american-football&＃39;, &＃39;boat&＃39;, &＃39;bluetooth&＃39;, &＃39;build&＃39;];this.items &＃61; [];for (let i &＃61; 1; i <11; i&＃43;&＃43;) {this.items.push({title: &＃39;Item &＃39; &＃43; i,note: &＃39;This is item #&＃39; &＃43; i,icon: this.icons[Math.floor(Math.random() * this.icons.length)]});}}itemTapped(event, item) {// That&＃39;s right, we&＃39;re pushing to ourselves!this.navCtrl.push(Page2, {item: item});}
}

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

总的来说&＃xff0c;这个页面和我们之前看到的 Page1非常相似。在下一节中&＃xff0c;我们将学习如何导航到新页面&＃xff01;

导航到页面

回想上一部分我们在 Page2类中有一个函数&＃xff0c;看起来像这样&＃xff1a;

itemTapped(event, item) {
  // That&＃39;s right, we&＃39;re pushing toourselves!
  this.navCtrl.push(Page2, {
    item: item
  });
}

你可能已经注意到我们引用了一个page2。自己跳到自己&＃xff0c;这是一个包含在教程启动器中的页面。

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

工作原理

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

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

•   建议熟悉一下TypeScript的基本语法和使用&＃xff0c;包括&＃64;types使用和d.ts编写。

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

•   熟悉Ionic 2的所有Components和API。

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