美文网首页项目案例我爱编程
跟着官方示例项目学Ionic-4

跟着官方示例项目学Ionic-4

作者: 沉寂之舟 | 来源:发表于2018-05-26 19:18 被阅读18次

传送门
跟着官方示例项目学Ionic-1(blank,tabs)
跟着官方示例项目学Ionic-2(tutorial,sidemenu)
跟着官方示例项目学Ionic-3(super)
跟着官方示例项目学Ionic-4(conference)

Conference 工程

This is the official Ionic demo app, showcasing a variety of Ionic Framework components and native features.
There is not an actual Ionic Conference at this time. This project is just to show off Ionic components in a real-world application.

Conference 工程是Ionic官方demo应用,它展示了大量的Ionic框架中的component和Native特性.
值得注意的是,它并不是Ionic团队实际在用的会议管理应用,仅仅是一个为了如何在展示真实世界应用中使用Ionic的demo工程.

线上演示

Schedule Page

Schedule Page

程序主模块-app目录

  1. app.module.ts
    a. 可以看出,Conference 工程并没有使用@IoincPage进行页面管理,而主组件包含了所有需要包含在menu的页面,因此import了几乎所有的Page,显得内容比较多,比较复杂.
    b. 并没有集成@ngx-translate,这个工程就没有实现多语言,是纯英文的应用.
  2. app.template.html和app.component.ts
    a. <ion-menu>有两个,id="loggedOutMenu"和id="loggedInMenu",这样根据用户的登录状态不同,可以进行切换.
    // 在构造器和事件订阅中调用方法
    enableMenu(loggedIn: boolean) {
        // 根据API文档,一个app只能有一个menu为True
        this.menu.enable(loggedIn, 'loggedInMenu');
        bthis.menu.enable(!loggedIn, 'loggedOutMenu');
  }

b. <ion-split-pane>把<ion-menu>和<ion-nav>包起来了,通过查看文档可知,这个是适应宽屏设备(如Ipad),在页面宽度大于768px时,菜单就能始终显示在app的左边,而不会隐藏.

c. 实现了菜单项的激活显示
菜单的ion-icon加上了corlor属性

 <ion-icon item-start [name]="p.icon" [color]="isActive(p)"></ion-icon>
  // 判断菜单是否激活,给ion-icon传递不同的color属性值
  isActive(page: PageInterface) {
    let childNav = this.nav.getActiveChildNavs()[0];

    // Tabs are a special case because they have their own navigation
    if (childNav) {
      if (childNav.getSelected() && childNav.getSelected().root === page.tabComponent) {
        return 'primary';
      }
      return;
    }

    if (this.nav.getActive() && this.nav.getActive().name === page.name) {
      return 'primary';
    }
    return;
  }

provider提供器

  1. user-data.ts
    提供了一个基于提供器和事件广播进行状态管理的模型.
    a. 存储的用户信息
    _favorites: 用户在conference中点击fav的记录.
    HAS_LOGGED_IN: 用户是否登录的key值
    HAS_SEEN_TUTORIAL: 是否已经向用户展示过TUTORIAL的key值.
    这些数据都通过storage进行了持久化.
con-storage.png

b. 虽然UserData有个checkHasSeenTutorial()方法判断是否已经看过引导页.实际上并没有用到.在TutorialPage中在startApp()直接设置了hasSeenTutorial的值.

// 按跳过或最后一个引导页都会触发这个方法
startApp() {
    this.navCtrl.push(TabsPage).then(() => {
      this.storage.set('hasSeenTutorial', 'true');
    })
  }

而在app.component.ts也是直接读取hasSeenTutorial的值,然后给nav指定不同的root页面

    this.storage.get('hasSeenTutorial')
      .then((hasSeenTutorial) => {
        if (hasSeenTutorial) {
          // 有值,直接进入Tab页面
          this.rootPage = TabsPage;
        } else {
          // 无值,就展示引导页
          this.rootPage = TutorialPage;
        }
        // 老规矩,隐藏splashScreen.
        this.platformReady()
      });

c. 当用户状态变化时,user-data通过event进行广播,如用户登录:

login(username: string): void {
    this.storage.set(this.HAS_LOGGED_IN, true);
    this.setUsername(username);
    // 这里,广播用户登录事件
    this.events.publish('user:login');
  };

而在ConferenceApp中,监听了这些事件-用来控制菜单的显示:

listenToLoginEvents() {
    // 监听用户登录实践,切换菜单
    this.events.subscribe('user:login', () => {
      this.enableMenu(true);
    });

    this.events.subscribe('user:signup', () => {
      this.enableMenu(true);
    });

    this.events.subscribe('user:logout', () => {
      this.enableMenu(false);
    });
  }

理论上,有对事件的subscribe,也需要在component销毁时调用unsubscribe(),然而,ConferenceApp是程序的主组件,无论怎么切换,这个component的销毁都不会调用到的,所以不写也没有关系.

  1. conference-data.ts
    管理会议记录,存储在data变量中,其中load()方法从HTTP服务中获取默认的会议数据,然后根据具体的业务逻辑进行变换.其他业务逻辑,略过

pages页面

  1. SchedulePage和ScheduleFilterPage
    这里还用的挺多的Ionic控件的,
import { AlertController, App, FabContainer, ItemSliding, List, ModalController, NavController, ToastController, LoadingController, Refresher } from 'ionic-angular';

值得注意的有:
a. ItemSliding: 利用滑动显示favorite的添加和删除的按钮
b. AlertController: 展示favorite的添加和删除提示框
c. Refresher: 下拉刷新<ion-refresher>和doRefresh()方法的调用.

  1. SpeakerListPage、SpeakerDetailPage和SessionDetailPage
    主要是ActionSheet、ActionSheetController、ActionSheetOptions的配合使用
  2. MapPage
declare var google: any;

展示了如何使用第三方的非Typescript的js的方法,先通过declare引入这个google,然后就能new出第三方js中定义的对象了.

    let map = new google.maps.Map(mapEle, {
          center: mapData.find((d: any) => d.center),
          zoom: 16
        });

指的注意的是,这样引入确实能用,但是毕竟引入的是any,Typescript的动态提示,编译检查功能是完全用不上的,map有什么属性,有什么方法需要自己拿捏.

  1. AboutPage和PopoverPage
    a. 使用PopoverController展示这个页面的小菜单.
    b. <ion-datetime>控件的使用
    c. <ion-select>>控件的使用

相关文章

  • 翻译示例

    新款奥林巴斯相机PEN 使用50年前复古设计 作者 Pete Pachal 题图:新旗舰款PEN 奥林巴斯PEN ...

  • Java多态示例代码

    package lesson; class A{public String show(D obj){return ...

  • 项目,项目

    现在是下午2:26,准备出去见客户,生命不是在于运动,是在于奔跑!有时候真的挺累的。大部分人都说顾客是上帝。但很明...

  • TestNG官方文档-2

    接上面的文章: 7 - YAML TestNG的支持YAML作为指定的套件文件的另一种方法。例如,下面的XML文件...

  • TestNG官方文档-1

    感谢原作者的奉献,原作者博客地址:http://blog.csdn.net/zhu_ai_xin_520/arti...

  • 跟着节奏走,永远不回头

    我从来不知道骑车是有韵律的,知道我在十楼遇到他。 健身房满员,瑜伽房满员,没地方去,只有单车室是空的,除了最上面的...

  • 跟着导演看电影-大卫芬奇

    跟着导演看电影 对我来说,以前最头疼的问题不是像之前很火的帖子说的那样“教你一分钟十分钟找资源”就能解决的,而是我...

  • 使用官方脚本安装HUSTOJ

    HUSTOJ已经开源9年了,其间版本更迭,安装方法也不断改进,网络上流传各种版本的安装教程,其实都已经是老皇历,很...

  • Linux示例篇 (Linux安装篇 - 概要)

    作为展示给向这个主题投稿的人的样例。 - 请务必内容稍微翔实一点,太简短了,我实在不好意思收,又不好意思拒绝。 -...

  • 项目管理

    同时进行几个项目真是太难受了。 总是不知道该先做哪个,正做着A呢,B那边来电话了。 以后还是一个一个来吧。

网友评论

  • 淋雨一直走YH:你有用过ionic4的插件吗?为什么我安装完之后使用的时候都报错了,ionic4里面说是要在引用后面加ngx路径,但是我安装完的插件并没有这个文件夹,不知道啥原因
    淋雨一直走YH:@Allen赵亚楠 嗯已经解决了,确实是版本的问题,安装的时候要指定版本,应该是因为还没正式发布的原因
    Allen赵亚楠:@淋雨一直走YH 如果没有那个路径,应该是版本问题

本文标题:跟着官方示例项目学Ionic-4

本文链接:https://www.meiwen.com.cn/subject/httvjftx.html