Angular 入门(三) 手机端开发

2022-01-12 01:13:46

上篇总结:

管道 pipe

相当于vue中的过滤器. 使用时: {{值 | 管道名:参数:参数...}}

angular默认官方提供了一些常用管道, 可以直接使用

也提供了自定义的方式: ng g p 管道名

指令 directive

生成命令: ng g d 指令名, 用于操作元素的 DOM 属性

生命周期

初始化 ngOnInit -> 挂载时 init -> 更新时 checked -> 销毁 destroy

组件间的参数传递

– 父子: 子中用 @Input() 关键词声明属性即可

– 子父: 子中要声明事件, 向外传递数据 @Output(), 父通过事件方式传递一个自身方法给子, 子触发传入的方法向方法中传递数据

– 兄弟: 子1 -> 父 -> 子2 或服务进行全局状态管理.

服务: 同vue 的 Vuex

生成服务命令: ng g s 服务名

使用时, 要通过 依赖注入 机制来完成.

– 依赖注入: 在构造函数的参数中声明类型, 组件在使用时就必须传递对应的类型的值.

– 其中: 我们负责声明依赖即可; 注入操作由系统自动完成;

语法糖用法: constructor(权限词参数名: 服务类型)

网络服务: 官方提供了很多强大的服务, 网络服务是其中一种

– 网络模块默认未加载, 必须到 app.module.ts 文件中加载才可以

话不多说直入主题 ;接下来介绍手机端的开发

Ionic_________________

Vue 有 mintUI, 制作手机端的界面

Angular 有 ionic, 制作手机端的 UI库

脚手架的安装:

npm install -g @ionic/cli --force

生成项目包

ionic start ionicApp blank
//     生成   包名      类型((blank/sidemenu/tabs)
/**
*- blank: 基础包
*- tabs: 带有标签栏导航的包
*- sidemenu: 带有侧边栏导航的包
/

包的运行:

ionic s

vscode插件:

主要容器:

ion-app: 根容器
ion-header: 头部导航栏容器
ion-content: 主体内容部分
ion-footer: 底部容器

更多组件详细介绍请点这里

button按钮组件

<!-- 按钮组件 -->
<!-- https://ionicframework.com/docs/api/button -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>按钮</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- 组件的风格, 默认会自动适配所在操作系统 -->
    <ion-button>我是按钮</ion-button>

    <!-- mode: 指定风格 -->
    <ion-button mode="ios">ios</ion-button>
    <ion-button mode="md">android</ion-button>

    <!-- 官方自带很多主题  theme -->
    <br />
    <ion-button color="primary">primary</ion-button>
    <ion-button color="secondary">secondary</ion-button>
    <ion-button color="tertiary">tertiary</ion-button>
    <ion-button color="success">success</ion-button>
    <ion-button color="warning">warning</ion-button>
    <ion-button color="danger">danger</ion-button>
    <ion-button color="light">light</ion-button>
    <ion-button color="medium">medium</ion-button>
    <ion-button color="dark">dark</ion-button>

    <!-- 大小 -->
    <br />
    <ion-button size="small">small</ion-button>
    <ion-button size="default">default</ion-button>
    <ion-button size="large">large</ion-button>

    <!-- 填充方式 -->
    <br />
    <ion-button fill="outline">outline</ion-button>
    <ion-button fill="solid">solid</ion-button>
    <ion-button fill="clear">clear</ion-button>

    <!-- 扩展方式 -->
    <br />
    <ion-button expand="block">block</ion-button>
    <ion-button expand="full">full</ion-button>

    <!-- 不可用 -->
    <br />
    <ion-button disabled>不可用</ion-button>
  </ion-content>
</ion-app>

View Code

bdge徽章

<!-- 徽章组件 badge -->
<!-- https://ionicframework.com/docs/api/badge -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>badge徽章</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-badge>42</ion-badge>
    <ion-badge color="success">success</ion-badge>
    <ion-badge mode="ios" color="danger">ios</ion-badge>
  </ion-content>
</ion-app>

View Code

icon图标

<!-- 图标库 -->
<!-- https://ionicons.com/ -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>icon</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-icon name="add" style="font-size: 30px"></ion-icon>

    <ion-icon name="logo-alipay" style="font-size: 50px" color="secondary"></ion-icon>
    <!-- 可以搭配按钮使用 -->
    <ion-button>
      <ion-icon name="add"></ion-icon>
    </ion-button>
  </ion-content>
</ion-app>

View Code

card卡片组件

<!-- 卡片组件 -->
<!-- https://ionicframework.com/docs/api/card -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>卡片</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- i-card-full -->
    <ion-card>
      <img src="http://101.96.128.94:9999/mfresh/news_imgs/01.jpg" alt="" />
      <ion-card-header>
        <ion-card-subtitle>此净化器功能优秀, 节能减排, 价格优美.</ion-card-subtitle>
        <ion-card-title>净美仕净化器</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        打掉的的阿达的看了看.马卡龙文件但大家拿健康的宽带连接我已大奖等你
      </ion-card-content>
    </ion-card>
  </ion-content>
</ion-app>

View Code

横向滚动展示

<!-- 横向滚动展示 -->
<!-- https://ionicframework.com/docs/api/slides -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>横向滚动展示</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <!-- slides: 容器;   slide: 项目 -->

    <!-- pager: 页数指示 -->
    <!-- loop: 循环滚动 -->
    <!-- autoplay: 自动滚动 -->
    <!-- disableOnInteraction: 用户触摸之后 让自动滚动失效;  默认为true -->
    <ion-slides
      pager
      [options]="{ loop: true, autoplay: { disableOnInteraction: false } }"
    >
    <!-- 在ts文件先定义好图片路径的数组 -->
      <ion-slide *ngFor="let item of images">
        <img [src]="item" alt="" />
      </ion-slide>
    </ion-slides>
  </ion-content>
</ion-app>

View Code

grid栅格

<!-- 栅格布局 -->
<!-- https://ionicframework.com/docs/api/grid -->

<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>栅格布局</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <!-- i-grid -->
    <!-- 在scss中定义样式grid-lianxi -->
    <ion-grid fixed class="grid-lianxi">
      <ion-row>
        <!-- 每行最多12列,  size代表列数 -->
        <ion-col size="6">6</ion-col>
        <ion-col size="6">6</ion-col>
      </ion-row>

      <ion-row>
        <!-- 超出会换行 -->
        <ion-col size="4">4</ion-col>
        <ion-col size="5">5</ion-col>
        <ion-col size="6">6</ion-col>
        <ion-col size="7">7</ion-col>
      </ion-row>

      <ion-row>
        <ion-col size="3">3</ion-col>
        <!-- 不写会自动填充剩余份数 -->
        <ion-col>不写份数</ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
</ion-app>

View Code

综合这些组件的一个例子

html:

<!-- 新闻 -->
<ion-app>
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>网易新闻</ion-title>
    </ion-toolbar>
  </ion-header>

  <!-- scrollEvents: 允许监听滚动事件, 默认false -->
  <!-- ionScroll: 滚动事件 -->
  <ion-content
    *ngIf="news"
    #content
    [scrollEvents]="true"
    (ionScroll)="onScroll($event)"
  >
    <!-- 下拉刷新 -->
    <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>

    <ion-grid fixed class="news-grid">
      <ion-row>
        <ion-col size="6" *ngFor="let item of news.result">
          <ion-card>
            <img [src]="item.image" alt="" />
            <div class="content">
              <div>{{ item.title }}</div>
              <div>{{ item.passtime }}</div>
            </div>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>

    <!-- 加载更多 -->
    <!-- threshold: 触底阈值. 10% 代表剩余未显示区域的高度 是 显示区域高度 10% 时触发触底操作 -->
    <ion-infinite-scroll
      threshold="10%"
      position="bottom"
      (ionInfinite)="loadData($event)"
    >
      <ion-infinite-scroll-content
        loadingSpinner="dots"
        loadingText="加载中..."
      >
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

    <!-- 悬浮按钮: 可以悬浮在已有内容的上方 -->
    <!-- vertical: 竖向, 可选值 top/center/bottom 对应 上/中/下 -->
    <!-- horizontal: 横向, 可选值 start/center/end -->
    <ion-fab
      [hidden]="!showGoTop"
      vertical="bottom"
      horizontal="end"
      slot="fixed"
    >
      <ion-fab-button (click)="goTop()">
        <ion-icon name="arrow-up-outline"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </ion-content>
</ion-app>

View Code

scss:

.grid-lianxi {
  border: 1px solid red;

  ion-row {
    border: 2px solid orange;

    ion-col {
      border: 1px solid blue;
    }
  }
}

.news-grid {
  padding: 3px;

  img {
    width: 100%;
  }

  ion-col {
    padding: 3px;
  }

  ion-card {
    margin: 0;

    .content {
      padding: 4px;

      div:first-child {
        color: black;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 1.1em;
        margin-bottom: 3px;
      }
    }
  }
}

View Code

ts:

import { HttpClient } from ‘@angular/common/http‘;
import { Component, ViewChild } from ‘@angular/core‘;
import { IonContent } from ‘@ionic/angular‘;

@Component({
  selector: ‘app-root‘,
  templateUrl: ‘app.component.html‘,
  styleUrls: [‘app.component.scss‘],
})
export class AppComponent {
  // 掌控子元素, 绑定变量 content 到 ion-content 组件
  @ViewChild(‘content‘) content: IonContent;

  showGoTop = false; //是否要显示 回到顶部 按钮

  // 绑定到 ion-conent 的滚动监听事件, 当滚动时自动触发
  onScroll(event) {
    console.log(event);

    const y = event.detail.currentY; //当前竖向滚动的 y
    //如果 y > 1200 就显示回到头部按钮
    this.showGoTop = y > 1200;
  }

  goTop() {
    // scrollToTop(动画时长);  单位毫秒
    this.content.scrollToTop(250);
  }

  constructor(public http: HttpClient) {}

  getUrl(pno: number) {
    return ‘https://api.apiopen.top/getWangYiNews?page=‘ + pno;
  }

  news: News;

  ngOnInit(): void {
    const url = this.getUrl(1);

    this.http.get(url).subscribe((res: News) => {
      console.log(res);

      this.news = res;
    });
  }

  page = 1;

  //下拉刷新
  doRefresh(event) {
    console.log(‘下拉刷新触发!‘);
    const url = this.getUrl(1);
    this.http.get(url).subscribe((res: News) => {
      console.log(res);

      this.news = res;
      this.page = 1; //重置为 第一页

      event.target.complete(); //结束下拉刷新动画的显示
    });
  }

  // 触底时触发
  loadData(event) {
    // console.log(event);

    const url = this.getUrl(this.page + 1);

    this.http.get(url).subscribe((res: News) => {
      console.log(res);
      // 合并新旧数据中的数组
      res.result = this.news.result.concat(res.result);

      this.news = res;

      this.page++; //成功后, 页数+1

      //通知组件此次加载操作已完成;   这样组件才会监听下一次
      event.target.complete();
    });
  }

  images = [
    ‘http://101.96.128.94:9999/mfresh/images/banner_01.jpg‘,
    ‘http://101.96.128.94:9999/mfresh/images/banner_02.jpg‘,
    ‘http://101.96.128.94:9999/mfresh/images/banner_03.jpg‘,
    ‘http://101.96.128.94:9999/mfresh/images/banner_04.jpg‘,
  ];
}

/////////////////////////////////////////
///////// 返回值结构声明
interface News {
  code: number;
  message: string;
  result: NewsResult[];
}

interface NewsResult {
  image: string;
  passtime: string;
  path: string;
  title: string;
}

View Code

item组件

<!-- item组件 -->
<!-- https://ionicframework.com/docs/api/item -->
<ion-app>
  <ion-header>
    <ion-toolbar>
      <ion-title>item</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-item>
      <ion-label>Awesome Label</ion-label>
    </ion-item>

    <!-- button: 可以点击 -->
    <!-- detail: 右侧出现 箭头图标 -->
    <ion-item button detail>
      <ion-label>Click me</ion-label>
    </ion-item>

    <ion-item>
      <!-- slot: 插槽;   item具有左右两个插槽, start 和 end -->
      <ion-badge slot="end">42</ion-badge>
      <ion-label>Item Avatar</ion-label>
    </ion-item>

    <ion-item>
      <!-- avatar: 把内部图片变圆形 -->
      <ion-avatar slot="start">
        <img
          src="http://www.gx8899.com/uploads/allimg/2017112908/pc2e3vft403.jpg"
        />
      </ion-avatar>
      <ion-label>
        <h3>重庆天花板</h3>
        <p>今天的面试题超级简单, 妥妥的~</p>
      </ion-label>
      <ion-badge color="danger" slot="end">42</ion-badge>
    </ion-item>

    <ion-item>
      <ion-icon name="settings" slot="start"></ion-icon>
      <ion-label>设置</ion-label>
    </ion-item>

    <ion-item lines="none">
      <ion-label>没有分割线</ion-label>
    </ion-item>

    <ion-item lines="full">
      <ion-label>分割线充满</ion-label>
    </ion-item>

    <ion-item>
      <ion-label>用户名:</ion-label>
      <ion-input placeholder="账号/手机号/邮箱"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>密码:</ion-label>
      <ion-input placeholder="密码" type="password"></ion-input>
    </ion-item>

    <!-- 分组 -->
    <ion-item-group>
      <ion-item-divider>
        <ion-label>A</ion-label>
      </ion-item-divider>

      <ion-item>
        <ion-label>阿宝</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>阿花</ion-label>
      </ion-item>

      <ion-item-divider>
        <ion-label>B</ion-label>
      </ion-item-divider>

      <ion-item>
        <ion-label>宝蓝</ion-label>
      </ion-item>
      <ion-item>
        <ion-label>boner</ion-label>
      </ion-item>
    </ion-item-group>

    <!-- i-item-sliding: 通过滑动 显示隐藏操作 -->
  </ion-content>
</ion-app>

View Code

Angular 入门(三) 手机端开发

码农公寓

Ionic_________________

相关文章