为您的第一个Ionic 2应用程序编码：照片共享应用程序

最新推荐文章于 2024-06-16 10:55:10 发布

cunjie3951

最新推荐文章于 2024-06-16 10:55:10 发布

阅读量219

点赞数

文章标签： python java vue js html ViewUI

在这个分为两部分的教程系列中，您将学习如何创建自己的第一个Ionic 2应用程序。现在，您已经设置了开发环境并了解了Ionic 2中的开发工作流程，是时候通过编写应用程序来动手了。

第二部分将介绍在Ionic 2中编写应用程序代码时需要了解的内容。您将学习如何为应用程序创建页面，如何获取用户输入以及如何使用插件来访问本机功能。完成后，您将在设备或仿真器中运行该应用程序。但是在开始之前，让我们花一点时间来谈论您将要创建的东西。

您将要创造的

在本教程中，您将创建一个照片共享应用程序。基本流程如下：

用户打开应用程序并登录。他们将被重定向到页面，以选择要共享的图像。
用户单击“ 选择图像”按钮。出现图像选择器，用户选择一张图像。然后将预览该图像。
用户输入标题，然后单击“ 共享图像”按钮以将图像传递到Instagram应用程序。

本教程仅向您展示如何在Android设备上运行该应用程序，但是Cordova（运行Ionic的框架）是跨平台的。 Ionic 2具有适用于Android，iOS和Windows的内置主题，因此也很容易为这些设备创建应用程序的版本。

这是该应用程序的外观：

项目设置

如果您遵循了上一教程，那么您已经设置了Ionic 2开发环境，并完成了项目。我们使用以下Ionic 2 CLI命令创建项目文件夹树，并准备部署到Android：

ionic start photoSharer blank --v2 --id com.tutsplus.photosharer
ionic platform add android

我们还安装了几个有用的插件：

ionic plugin add https://github.com/Telerik-Verified-Plugins/ImagePicker
ionic plugin add cordova-instagram-plugin

编码首页

在本教程的其余部分中，您将主要在src文件夹中工作，因此，假设每次看到文件路径时src文件夹都是根目录。（如果要在Ionic入门模板创建的路径上进行复习，请看一下以前的教程。）

src目录中有四个文件夹：

app ：这是定义应用范围代码的地方。如果您需要在应用启动时运行特定的代码，或者想要更新全局CSS，那么这是一个去处。
资产：这是资产，例如用作应用程序内容的图像。
pages ：这是各个页面的代码所在。每个页面都有其自己的文件夹，并且每个文件夹内有三个文件，用于定义页面的模板（HTML），样式（CSS）和脚本（TypeScript）。
主题：如果要修改默认的Ionic 2主题，这就是您要去的地方。

主页模板

默认情况下，Ionic空白入门模板已经带有主页。因此，您要做的就是对其进行编辑以显示所需的内容。打开pages / home / home.html文件并清除其当前内容。在页面顶部添加以下内容：

<ion-header>
  <ion-navbar>
    <ion-title>
      Login
    </ion-title>
  </ion-navbar>
</ion-header>

上面的代码是应用程序标头的样板。 <ion-navbar>组件用作导航工具栏。每当您离开默认页面时，它将自动显示一个后退按钮。 <ion-title>设置导航栏的标题。

接下来是实际的页面内容。您可以在<ion-content>组件中定义它。可以通过指定padding选项来应用默认的padding 。在该容器内，创建一个新列表，其中包含用于输入用户名和密码的输入字段。创建列表以包含编辑字段是Ionic的一种标准做法，它使您可以将每个字段整齐地堆叠在一起。列表下方是用于登录的按钮。

<ion-content padding>

  <ion-list>
    <ion-item>
      <ion-label>Username</ion-label>
      <ion-input type="text" [value]="username" [(ngModel)]="username"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Password</ion-label>
      <ion-input type="password" [value]="password" [(ngModel)]="password"></ion-input>
    </ion-item>
  </ion-list>

  <div padding>
    <button ion-button full (click)='login();'>Login</button>
  </div>
</ion-content>

让我们花点时间看一下用于输入文本和单击按钮的代码。在Ionic中，您可以使用<ion-input>组件定义文本输入字段。要将文本字段绑定到页面脚本中定义的类属性，请使用[(ngModel)] 。然后，分配给它的值就是类属性的名称。

要设置双向数据绑定，可以将[value]设置为与[(ngModel)]相同的属性名称。这样，您可以通过更改页面脚本中的模型值来更新文本字段的值。稍后，您将看到如何在页面脚本中定义类属性。

<ion-input type="text" [value]="username" [(ngModel)]="username"></ion-input>

要定义按钮，请使用HTML中的标准button元素。如果您想知道为什么它不是<ion-button> ，那是由于可访问性原因。按钮是至关重要的界面组件，因此Ionic团队决定坚持使用标准HTML按钮以使其易于访问。相反，添加了ion-button指令以提供其他功能。

要添加单击处理程序，请使用(click)指令，其值指定在单击事件发生时要执行的功能（在页面脚本中定义）。

<button ion-button full (click)='login();'>Login</button>

主页脚本

打开pages / home / home.ts文件，清除其所有内容，然后添加以下内容：

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';

//import { PickerPage } from '../../pages/picker/picker';

@Component({
  templateUrl: 'home.html'
})
export class HomePage {

  username: string;
  password: string;

  readonly APP_USERNAME: string = 'me';
  readonly APP_PASSWORD: string = 'secret';

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {

  }

  login() {
    let alert = this.alertCtrl.create({
      title: 'Login Failed',
      subTitle: 'The username or password you entered is incorrect.',
      buttons: ['OK']
    });

    if (this.username == this.APP_USERNAME && this.password == this.APP_PASSWORD) {
      this.navCtrl.push(PickerPage);
    } else {
      alert.present();
    }
    this.username = '';
    this.password = '';
  }

}

分解上面的代码，我们首先导入已包含所有Ionic指令的Angular组件类。

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

接下来，我们从ionic-angular包中导入用于导航和警报的控制器。这是所有离子控制器都包括在内的地方。

import { NavController, AlertController } from 'ionic-angular';

之后，我们将导入PickerPage 。您稍后将创建它，因此暂时将其注释掉。准备好要加载评论后，请记住将其删除。

//import { PickerPage } from '../../pages/picker/picker';

导入后，使用@Component装饰器指定脚本要使用HTML模板：

@Component({
  templateUrl: 'home.html'
})

现在，我们可以为主页脚本定义类。我们将要导出此类，以便可以从应用程序中的其他文件导入它。

export class HomePage {
    ...
}

通过将NavController和AlertController定义为constructor函数中的参数，从而在整个类AlertController可用。例如，当您想使用NavController导航到另一个页面时，这使您可以使用this.navCtrl 。

constructor(public navCtrl: NavController, public alertCtrl: AlertController) {

}

现在，我们准备定义可以从模板引用的控制器属性。这些属性将包含用户名和密码的文本字段的当前值：

username: string;
password: string;

为简单起见，我们将对用户名和密码使用硬编码的值。但是对于真实世界的应用程序，通常会向服务器发出请求以验证用户身份。

readonly APP_USERNAME: string = 'me'; // constants in TypeScript are defined by specifying the property to be readonly
readonly APP_PASSWORD: string = 'secret';

在login()函数中，为用户输入错误的用户名或密码创建警报：

let alert = this.alertCtrl.create({
  title: 'Login Failed',
  subTitle: 'The username or password you entered is incorrect.',
  buttons: ['OK']
});

如果凭据不正确，请显示警报：

alert.present();

如果用户输入的用户名和密码与硬编码值匹配，请使用NavController将Picker Page推入导航堆栈。无论您将哪个页面推入导航堆栈都将成为当前页面，而弹出页面则可以有效地导航到上一页。这就是Ionic 2中导航的工作方式。

this.navCtrl.push(PickerPage);

选择页面

接下来，您需要创建选择器页面。如您所知，标准是为每个页面创建一个单独的文件夹，每个文件夹中将包含三个文件。值得庆幸的是，Ionic CLI还附带了一个命令，该命令使我们可以创建新页面：

ionic g page pickerPage

这使用了generate命令，它将创建其中包含这三个文件的页面文件夹。最重要的是，每个文件都已经带有一些您可以开始使用的样板代码。

选取器页面模板

完成后，打开pages / picker / picker.html文件，并将样板代码替换为以下代码：

<ion-header>
  <ion-navbar>
    <ion-title>Pick Image</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div padding>
    <button ion-button full (click)='pickImage();'>Pick Image</button>
  </div>

  <ion-card text-center>
    <img [src]="picked_image" />
  </ion-card>

  <div class="form-container" [hidden]="!has_picked_image">
    <ion-list>
      <ion-item>
        <ion-label stacked>Caption</ion-label>
        <ion-input type="text" [value]="caption" [(ngModel)]="caption"></ion-input>
      </ion-item>
    </ion-list>
    <div padding>
      <button ion-button full color="secondary" (click)='shareImage();'>Share Image</button>
    </div>
  </div>
</ion-content>

除了hidden指令和使用<ion-card>组件外，这些代码都没有真正陌生的地方。

hidden指令使您可以根据页面脚本中定义的特定值来隐藏元素。因此，如果has_picked_image为true ，则只有该div可见。

<div class="form-container" [hidden]="!has_picked_image">
    ...
</div>

<ion-card>组件用于创建卡片。卡片是在应用程序内显示图像的好方法。

选择器页面样式

打开pages / picker / picker.scss文件并添加以下内容：

.form-container {
  padding-top: 20px;
}

选择器页面脚本

打开pages / picker / picker.ts文件并添加以下内容：

import { Component } from '@angular/core';
import { ImagePicker, Instagram } from 'ionic-native';

@Component({
  templateUrl: 'picker.html'
})
export class PickerPage {

  picked_image: string;
  has_picked_image: boolean = false;
  caption: string;
  readonly DEFAULT_IMAGE: string = 'https://placehold.it/500x500';

  constructor() {
    this.picked_image = this.DEFAULT_IMAGE;
  }

  pickImage() {
    var options = {
      maximumImagesCount: 1,
      width: 500,
      height: 500,
      quality: 50,
      outputType: 1
    };

    ImagePicker.getPictures(options).then((results) => {
      this.picked_image = 'data:image/jpeg;base64,' + results[0];
      this.has_picked_image = true;
    }, (err: any) => {
      console.log(err);
      this.has_picked_image = false;
    });

  }

  shareImage() {
    Instagram.share(this.picked_image, this.caption)
      .then(() => {
        this.picked_image = this.DEFAULT_IMAGE;
        this.has_picked_image = false;
      })
      .catch((error: any) => {
        console.error(error);
      });
  }

}

我会分解一下。首先，我们导入您之前安装的插件。请注意，所有插件均安装在同一软件包（ ionic-native ）下。这真的很不错，因为您不必只在自己的行中导入每个插件，而只需在一行中完成即可。

import { ImagePicker, Instagram } from 'ionic-native';

接下来，我们声明类的属性：

picked_image: string; // the image picked by the user
has_picked_image: boolean = false; // for easily determining whether there's currently an image picked by the user or not
caption: string; // the caption for the image
readonly DEFAULT_IMAGE: string = 'http://placehold.it/500x500'; // the default image

单击“ 选择图像”按钮时，定义图像选择器的选项。这些选项非常容易解释，但是我添加了一些注释以阐明每个选项的作用。

let options = {
  maximumImagesCount: 1, // the maximum number of images that the user can pick
  width: 500, // the maximum width in which the image will be in once it is picked 
  height: 500, // the maximum height in which the image will be in once it is picked 
  quality: 50, // the quality of the photo. The value can be up to 100 for 100% quality
  outputType: 1 // what format the results will be in once the user has picked an image. 
                // 0 is for file URIs while 1 is for data URIs. 
};

指定width和height并不一定意味着生成的图像将使用这些确切的宽度和高度。这意味着Ionic将使用这些尺寸作为最大宽度或高度，以保持纵横比不变。

我们使用数据URI作为输出类型，因为Instagram插件仅接受数据URI。这意味着您还必须将宽度，高度和质量调整到最低限度，因为如果质量很高，数据URI可能会很长-整个图像都编码为URI字符串！这可能会使应用程序崩溃，因此在处理数据URI时始终坚持使用较低的质量和较小的图像，这始终是一个好习惯。

接下来，使用Image Picker插件触发图像选择屏幕。由于我们只需要一个图像，因此我们可以简单地访问结果数组中的第一项。我们还必须为数据URI加上前缀。

ImagePicker.getPictures(options).then((results) => {
  this.picked_image = 'data:image/jpeg;base64,' + results[0];
  this.has_picked_image = true;
}, (err: any) => {
  console.log(err);
  this.has_picked_image = false;
});

最后，当单击共享图像按钮时，Instagram插件提供的share方法将触发Instagram应用程序中的共享屏幕启动。这将已经预先填充了图像。

但是，字幕不会被复制。 Instagram应用程序禁用了预填充的标题，因此，一旦打开Instagram应用程序，标题字段将为空。解决方法是，Instagram插件将标题复制到剪贴板。这意味着用户可以将其粘贴到Instagram应用程序的标题文本字段中。

Instagram.share(this.picked_image, this.caption)
  .then(() => {
    this.picked_image = this.DEFAULT_IMAGE;
    this.has_picked_image = false;
  })
  .catch((error: any) => {
    console.error(error);
  });

汇集一切

最后一步是打开app / app.module.ts文件。这是应用程序的根模块，您可以在其中定义将在整个应用程序中使用的所有页面和提供程序（例如默认的Ionic错误处理程序）。

确保已创建的所有页面均已定义，否则，当导航到尚未定义的页面时会出现错误。默认情况下，已经在此处定义了HomePage ，因此您只需添加PickerPage 。只需将其导入文件顶部，然后将其添加到declarations和entryComponents数组下即可。请注意， MyApp不是页面。它是一个组件，用作要加载的页面的空外壳。

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { PickerPage } from '../pages/picker/picker';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    PickerPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    PickerPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

如果打开app / app.components.ts文件，将会看到以下内容：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // 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();
    });
  }
}

您可以在此处定义根页面，即用户打开应用程序后将看到的页面。在这种情况下， HomePage是根页面。这对于执行初始化代码也是完美的，因为此处的代码仅在用户启动应用程序时执行一次。初始化某些内容（例如，请求启用蓝牙的权限）时，您总是要等到触发platform.ready()事件。只有触发该事件后，您才能确定可以调用本机函数。

运行应用

现在，您可以在移动设备或模拟器上运行该应用程序了。您可以通过执行以下命令来做到这一点：

ionic run android

执行上述命令时，请确保您有连接到计算机的设备或仿真器的运行实例。如果仍然无法使用，请检查是否已在设备中启用USB调试并运行adb devices 。这将触发您的计算机连接到您的设备。看到身份验证提示后，只需同意设备中的提示即可。

如果您想拥有APK文件的副本，以便与朋友共享，则可以通过执行以下操作来生成一个：

ionic build android

这将在platform / android / build / outputs / apk文件夹中创建一个android-debug.apk文件。

结论

而已！在本教程中，您创建了第一个Ionic 2应用程序。这是一个简单的应用程序，您甚至可能发现它很容易。但是，您学习了如何为开发Ionic 2应用程序建立环境，并且学习了一些在将来开发应用程序时可以应用的基本概念。其中包括从文本字段获取当前值，响应单击事件，链接图像以及使用插件访问本机功能。因此，请轻拍自己的背部！到目前为止，您做得很好。

如果您想对Ionic 2框架进行深入而实用的介绍，请尝试我们的课程Ionic 2入门。

在本课程中，雷吉·道森（Reggie Dawson）将教给您所有有关Ionic框架的知识，并向您展示如何从头开始构建移动应用。在此过程中，您将学习Ionic组件库，使用TypeScript编程静态类型JavaScript以及将Ionic 2应用程序与富媒体API集成在一起。

翻译自: https://code.tutsplus.com/tutorials/code-your-first-ionic-2-app-getting-set-up--cms-28471

cunjie3951

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为您的第一个Ionic 2应用程序编码：照片共享应用程序

在这个分为两部分的教程系列中，您将学习如何创建自己的第一个Ionic 2应用程序。现在，您已经设置了开发环境并了解了Ionic 2中的开发工作流程，是时候通过编写应用程序来动手了。第二部分将介绍在Ionic 2中编写应用程序代码时需要了解的内容。您将学习如何为应用程序创建页面，如何获取用户输入以及如何使用插件来访问本机功能。完成后，您将在设备或仿真器中运行该应用程序。但是在开始之前...
复制链接

扫一扫