ウェブフロントエンド開発--Ionic 3.0 [アショカの教室でのトレーニング専門のフロントエンド]

イオン
移動方向は、三辺を開発します

プライマルAPPの開発、

モバイルWeb開発を終了

（二つ以上の間に介在する）ハイブリッド開発

アプレット型マイクロ手紙

reactNativeは、文法と反応し、アプリを開発しました。コンポーネントとブラウザのではなく、同じセット

その角度、イオンなどの代わりにhybird、コルドバなど、ブラウザカーネルはプライマルアプリを達成するためのビューをレンダリングするので、HTMLをサポートして使用して、CSS、JS、その他のフロントエンド言語

エンタープライズクラスの大規模プロジェクト開発のためのangular6.0は、したがって、あなたは部品、配管等の指示、サービス、モジュールをインストールすることができますエンジニアリング、自動化を実現するが、そのような単一の命令としてUIコンポーネントの一部を提供していませんので、我々はする必要がありますスタートからフィニッシュ書き込みスタイルに。

イオンangular6.0は、UIスタイルの開発フレームワークの肩の上に立っている、フレームワークの移動端である、などのコンポーネント、サービスの富を提供し、大幅に私たちの開発効率を向上させることができます。

1.1体验イオン
1.1.1 githubの
https://github.com/ionic-team/ionic

ウェブサイトの1.1.2
の公式サイトは：https://ionicframework.com/docs/（推奨します）

中国のウェブサイト：http://www.ionic.wang/css_doc-v3.html

1.1.3インストールの
イオンはNG6のように、また命令を提供するので、我々はNPMでグローバルにイオンインストールすることができます

NPM -gイオンをインストール

インストールが完了すると、イオン性の指示を提供し、あなたは、イオン-vでバージョン番号を表示することができます

プロジェクトの作成1.1.4
プロジェクトを作成し、NG6等もイオンの命令を使用することができます

イオンプロジェクト名を開始

この時点で、私たちは、プロジェクトの種類を選択してみましょう

ページのタブタブタイプ

空白の空のプロジェクト

サイドバーでプロジェクトを作成しますslideMenu

超超プロジェクト（ページの数十が含まれています）

チュートリアルガイドは、プロジェクトのページを持っています

インストール時に、ネイティブ関数をダウンロードするかどうか、我々は中に書いていない、n個選びます

イオンは、SASSを建てたので、私たちは直接SCSSを使用することができます

1.1.5は、プロジェクト開始
プロジェクトを開始するのに役立つ私たちはイオン性の実行を

1.1.6ディレクトリ配備
達成NG6系イオン、そのシステムアーキテクチャNG6の使用が、NG6で、唯一のコンポーネントは、テンプレートとスタイルを持って、私たちは簡単にするためのファイルを作成するためにそうイオニア式、スタイルやテンプレート機能の名前成分の一部を除去し、デフォルトの単一の測定をキャンセルしました。

機能拡張名の名前：しかし、他の文書は、まだ3つの部分に分かれています。

ほとんどの先進ディレクトリのsrc作業

アプリのアプリケーションディレクトリ

アプリケーションコンポーネントをapp.compoennt.ts

app.htmlアプリケーションコンポーネントのテンプレート

グローバルコンフィギュレーションアプリケーションをapp.module.ts

app.scssアプリケーションスタイル

main.tsアプリケーションエントリファイル

静的リソース資産

ページのすべてのページ、各ページには、コンポーネントの機能を削除するために、3つのファイル、スクリプト、スタイル、テンプレート、およびスクリプトが含まれています

homeホーム

連絡先お問い合わせページ

ページで

タブタブページ

テーマテーマのスタイル設定

index.htmlホーム

mainifest.jsonのプロジェクト構成

サービスwork.jsウェブ作品服务

WWWプロジェクトの公開アドレス

1イオンサーブ

1.2コンポーネント
のイオンは、多数の部品を内蔵し、大幅に私たちの開発効率を向上させることができ、これらのコンポーネントは、私たちが直接使用することができます

1.3 Buttonコンポーネント
イオンで、私たちはイオン命令を使用したい、、ボタンでボタンが通常のボタンで定義するボタンコンポーネント内のイオンになりたい、内蔵の命令は、イオンし始めています

ボタンアセンブリ命令：イオン-ボタン

并且我们可以通过color属性定义按钮的背景色，sass在主题中定义几种默认的样式，我们可以直接使用，并且我们还可以更改这些主题，让我们的项目变得与众不同

1.4字体图标
ionic中，为让图标不会因为放缩而出现锯齿状，使用了css3中的字体图标

我们可以通过ion-icon组件使用字体图标

通过name属性定义图标样式

由于这些图标是通过字体实现的，因此改变这些图标，我们要改变font-size

ionic内置了700多个图标

1 <!-- 指令 -->

2 <button ion-button>按钮</button>

3 <!-- 定义按钮颜色 -->

4 <button ion-button color="dark">按钮</button>

5 <!-- 字体图标 -->

6 <ion-icon name="basket"></ion-icon>

7 <!-- 更改字体大小，就是更改图标大小 -->

8 <ion-icon name="battery-charging" style="font-size: 100px;"></ion-icon>

1.5徽章
我们通过ion-badge组件定义徽章

是一个行内元素，所以可以直接添加在文本后面

1.6栅格系统
bootstrap提供了栅格系统，定义容器用.container,container-fluid等类

ionic中，我们用ion-grid组件定义容器

bootstrap中，

定义行用row类

定义类用col类

ionic中，

定义行用ion-row组件

定义列用ion-col组件

注意：

bootstrap中将整行分成12份，是几占几份

ionic使用的是css3中的flex布局，每个都是均分的，所以里面有几个，都会均分整行

1 <!-- 使用徽章 -->

2 <button ion-button>按钮<ion-badge>10</ion-badge></button>

3 <!-- 使用栅格系统 -->

4 <ion-grid>

5 <ion-row>

6 <ion-col>001</ion-col>

7 <ion-col>002</ion-col>

8 <ion-col>003</ion-col>

9 </ion-row>

10 </ion-grid>

1.7卡片
我们通过ion-card组件定义卡片

通过ion-card-header定义卡片头部

通过ion-card-content定义卡片内容

1.8分享
在ionic中，我们通过ion-fab组件定义分享按钮

通过添加top, left, bottom, right定义所在位置

通过edge属性，定义是否基于屏蔽边缘定义（默认基于父容器边缘定义）

我们通过button定义按钮，添加ion-fab指令，即可让按钮变成圆形，我们为按钮添加mini，即可让按钮缩小。

我们通过ion-fab-list定义下拉按钮组

我们添加side属性，即可定义按钮列表的弹出方向

在内部通过ion-fab指令将每一个按钮变成圆形

1 <!-- 定义卡片 -->

2 <ion-card>

3 <ion-card-header>卡片标题</ion-card-header>

4 <ion-card-content>卡片内容</ion-card-content>

5 </ion-card>

6 <ion-card>

7 <ion-card-header>卡片标题2</ion-card-header>

8 <ion-card-content>卡片内容2</ion-card-content>

9 </ion-card>

10 <!-- 定义分享按钮 -->

11 <ion-fab right top edge>

12 <!-- 定义按钮 -->

13 <button ion-fab mini><ion-icon name="add"></ion-icon></button>

14 <!-- 定义下拉分享按钮 -->

15 <ion-fab-list side="left">

16 <button ion-fab>

17 <ion-icon name="logo-facebook"></ion-icon>

18 </button>

19 <button ion-fab>

20 <ion-icon name="logo-github"></ion-icon>

21 </button>

22 <button ion-fab>

23 <ion-icon name="logo-twitch"></ion-icon>

24 </button>

25 </ion-fab-list>

26 </ion-fab>

1.9事件
ionic是基于ng6实现的， 因此也只是ng6绑定事件的语法，ionic又是移动端的框架，因此也支持移动端事件，如tap, swipe, rotate等

语法 (tap)=”fn()”

事件回调函数添加参数集合，并且定义在组件类中，默认没有参数，使用什么传递什么，使用事件对象传递$event

1.10列表
我们通过ion-list组件定义列表

通过ion-list-header定义列表的标题

通过ion-item组件定义每一个成员

注意：ion-item不仅仅可以作为组件来使用，也可以作为指令来使用

默认每个成员之间有边线，想取消边线，我们可以添加no-lines属性

在渲染成员的时候，我们可以为成员的子元素添加

item-start 渲染在前面

item-end 渲染在后面

其它子元素自适应

1.11头像
我们通过ion-avatar组件定义头像，在内部通过img标签引入图片

效果：用圆形呈现这张图片

1.12缩略图
我们可以通过ion-thumbnail组件定义缩列图

1 <!-- 定义按钮 -->

2 <button ion-button (tap)="fn(true, 100, $event)">按钮</button>

3

4 <!-- 定义列表 -->

5 <ion-list>

6 <ion-list-header>列表标题</ion-list-header>

7 <!-- 定义成员 -->

8 <ion-item *ngFor="let item of colors" no-lines>{{item}}</ion-item>

9 <!-- ion-item还可以作为指令来用 -->

10 <div ion-item *ngFor="let item of colors">{{item}}</div>

11 <!-- 成员比较复杂 -->

12 <ion-item *ngFor="let item of colors">

13 <!-- 引入头像 -->

14 <ion-avatar item-start>

15 <img src="assets/imgs/01.jpg" alt="">

16 </ion-avatar>

17 <h1>{{item}}</h1>

18 <p>成员内容</p>

19 <!-- <button ion-button item-end>按钮</button> -->

20 <ion-thumbnail item-end>

21 <img src="assets/imgs/01.jpg" alt="">

22 </ion-thumbnail>

23 </ion-item>

24 </ion-list>

1.13表单组件
ionic内置了表单组件，我们可以使用

在ion中，表单组件通常都是前面添加ion-指令

例如

label => ion-label

fixed 用来让label与后面的表单元素对其，如input

floating 浮动到input上，实现遮盖

input => ion-input

select => ion-select

option => ion-option

radio => ion-radio

一组单选框，我们通常放在一个具有radio-group指令的元素内

check => ion-checkbox

新增组件

ion-range 进度条

ion-toggle 开关按钮

ion-datatime 日期组件

我们可以定义日期格式

pickerFormate 选择日期时候的格式

displayFormat 展示日期时候的格式

Y 表示年

M 表示月

D 表示日

H | h 表示小时

m 表示分

s 表示秒

个数不同展示的形式也不同

1 <!-- 定义表单 -->

2 <ion-list>

3 <ion-item>

4 <ion-label>用户名</ion-label>

5 <!-- <ion-label fixed>用户名</ion-label> -->

6 <ion-input style="background: green"></ion-input>

7 </ion-item>

8 <ion-item>

9 <ion-label floating>密码</ion-label>

10 <ion-input style="background: pink"></ion-input>

11 </ion-item>

12 <ion-item>

13 <ion-label>选择色彩</ion-label>

14 <ion-select multiple>

15 <ion-option *ngFor="let item of colors">{{item}}</ion-option>

16 </ion-select>

17 </ion-item>

18 <ion-item>

19 <ion-label>调节屏幕亮度</ion-label>

20 <ion-range></ion-range>

21 </ion-item>

22 <ion-item>

23 <ion-label>是否打开wifi</ion-label>

24 <ion-toggle></ion-toggle>

25 </ion-item>

26 <ion-item>

27 <ion-label>选择时间</ion-label>

28 <ion-datetime pickerFormat="YYYY MMMM DD HH:mm:ss" displayFormat="hh:mm:ss"></ion-datetime>

29 </ion-item>

30 </ion-list>

31 <!-- 单选框 -->

32 <ion-list radio-group>

33 <ion-list-header>兴趣爱好</ion-list-header>

34 <ion-item>

35 <ion-label>篮球</ion-label>

36 <ion-radio value="basketball"></ion-radio>

37 </ion-item>

38 <ion-item>

39 <ion-label>足球</ion-label>

40 <ion-radio value="football"></ion-radio>

41 </ion-item>

42 <ion-item>

43 <ion-label>乒乓球</ion-label>

44 <ion-radio value="pingpang"></ion-radio>

45 </ion-item>

46 </ion-list>

1.14导航
ionic不但提供了大量的组件，还提供了大量服务（功能）

每个页面都引入了一个NavController服务，用来管理导航的服务

push方法用来打开新的页面的

第一个参数表示页面组件

第二个参数表示打开该页面时候，传递的数据

导航的切换也实现了一个堆栈，打开页面就是进入栈，返回页面就是推出栈，所以想返回上一个页面，可以执行pop方法

注意：tab页面的切换，要清空栈，因此没有页面进入栈，就不会有返回按钮了

获取导航信息数据

我们可以注入NavParams服务，来获取导航的数据信息

其中data属性存储接收到的数据

1 // 进入关于页面

2 showAboutPage() {

3 // 进入about页面

4 this.navCtrl.push(AboutPage, {

5 color: 'red'

6 })

7 }

1.15 tab页面
在ion中，通过ion-tabs定义tabs组件（页面底部切换页面的按钮）

ion-tab定义每一个页面项

root 将要被打开的页面组件

tabTitle 页面按钮的标题

tabIcon 页面按钮的图片（可以在内置的700个字体图标中选择）

rootParams 打开页面时传递的数据

默认显示第一个ion-tab定义的页面

1.16登录页面
在ng6中，创建组件，我们用 ng g component指令

在ionic中，为了创建页面方便，提供了

ionic g page 页面名称

通过该指令，可以快速创建页面，页面会自动存储在pages目录下

创建页面后，会自动添加四个文件：模板文件，脚本文件，样式文件，模块文件

ng6中，创建的组件会自动在全局声明，但是ionic中，创建的页面不会全局声明，我们要手动在全局声明

在全局配置中，app.module.ts文件中的declarations，以及entryComponents配置中声明

declarations 表示全局声明，声明以后就可以在任何地方使用

entryComponents 是否可以作为页面来使用

1.17页面组件
ionic模拟了html中的body，head， title等元素，定义了一些页面级别的组件

ion-header 定义页面头部

ion-content 定义页面内容

ion-footer 定义页面底部

ion-navbar 定义页面头部的导航

ion-title 定义页面的标题

1 <ion-tabs>

2 <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>

3 <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="logo-android" [rootParams]="{num: 100}"></ion-tab>

4 <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>

5 </ion-tabs>

1.18搜索组件
我们通过ion-searchbar定义搜索组件

我们可以通过placeholder定义提示文案

通过ionInput事件获取提交的数据

每次更新的时候，都会执行，

我们传递$event获取事件对象，通过e.target.value获取内容值

1 <ion-searchbar placeholder="请搜索内容" (ionInput)="searchValue($event)"></ion-searchbar>

1.19轮播图组件
我们ion-slides定义轮播图组件

默认占满整个屏幕

通过autoplay定义轮播的事件 单位是毫秒

通过loop属性，定义是否无限轮播

通过ion-slide定义每一个页面

我们不仅仅可以在内部引入图片，还可以定义任何元素

1 <ion-slides loop autoplay="3000">

2 <ion-slide style="background: pink;">

3 <h2 (tap)="showPage('home')">这是第一个页面</h2>

4 <p>第一个页面内容</p>

5 </ion-slide>

6 <ion-slide style="background: gold;">

7 <h2 (tap)="showPage('about')">这是第二个页面</h2>

8 <p>第二个页面内容</p>

9 </ion-slide>

10 <イオンスライドスタイル=「背景：スカイブルー;」>

11 <H2（タップ）= "のshowPage（ '接点'）">これは、3ページ目である</ H2>

12 <P>第3ページコンテンツ</ P>

13 </イオンスライド>

14 </イオンスライド>

1.20アプリケーションスイッチは、ページの開始
スタートページの切り替えを実現するために、我々はViewChild注釈クラスによってナビゲーションサービスを注入したいので、アプリケーション・コンポーネントは、からNavControllerサービスを導入することができません

@ViewChild（）NAV：ナビゲーション。

この時点では、ページを切り替える方法をthis.nav.setRootすることができます

1のsetTimeout（（）=> {

2 //タブページを入力してください

3 this.nav.setRoot（TabsPage）

4}、3000）

**ノー社会的関心「icketang」、最新の学習資料とフリーラインで場所を学習へのアクセス