Ionic 简单操作

在使用 Ionic 之前要安装 Nodejs,Cordova 。

Java

下载Java 网站。Java 默认安装在 C:\Program Files\Java 文件目录。

Android

下载Android Studio并浏览安装程序并设置IDE。找到Android SDK的安装位置; 

 我们将运行tools/android打开了Android SDK管理器。我们要安装：

• 适用于您指定Android版本的Android平台SDK
• Android平台工具
• Android SDK build-tools版本19.1.0或更高版本
• Android支持存储库（位于“Extras”下）接受许可证并让软件包安装。

 环境变量

现在所有的安装，我们需要为我们的命令行设置一些环境变量。从开始菜单中，搜索“系统环境变量”。从这里，我们将更新用户的变量PATH，并创建了一个新变量JAVA_HOME，ANDROID_HOME

• JAVA_HOME:安装Java的路径。

• ANDROID_HOME : Android SDK 安装的路径

• PATH : 两个条目，一个用于为Android SDK安装工具，另一个用于平台工具PlatFormTools，我们应该能够运行

Windows通用应用程序

要为Windows Universal构建应用程序，请下载并安装Visual Studio 2015社区版。在安装过程中，选择“跨平台开发工具”以及Windows通用应用程序的SDK。

安装一切后，您就可以使用此命令从命令行添加Windows平台：

ionic platform add windows

默认情况下，build命令将产生两个包：是Windows 8.1和Windows Phone 8.1，Ionic不支持。要将Windows软件包升级到版本10，必须将以下配置设置添加到配置文件（config.xml）。

<preference name="windows-target-version" value="10.0" />

Ionic 简单的形式，绑定和传递对象在我们的类中

 <ion-list>

        <ion-item>
            <ion-label fixed>登录名称</ion-label>
            <ion-input [(ngModel)]="Udata.txtusername" clearInput type="text"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label fixed>登录密码</ion-label>
            <ion-input [(ngModel)]="Udata.txtpassword" type="password"></ion-input>
        </ion-item>
    </ion-list>

    <div padding>
        <button ion-button color="primary" block (click)="Login()">登录</button>
    </div>

mport { ListPage } from '../list/list';
import { NavController } from 'ionic-angular';
import { AlertController } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-hello-ionic',
  templateUrl: 'hello-ionic.html'
})

export class HelloIonicPage {
  constructor(public alerCtrl: AlertController, public navbar: NavController) {
  }
  //用户登录
  Udata = {
    txtusername: '', // 登录用户名称
    txtpassword: '' // 用户密码
  };

  //登录
  Login() {
    let conMy = this.alerCtrl.create({
      title: 'dkdkdkd',
      message: this.Udata.txtusername
    });
    conMy.present();
    //跳转到主页面
     this.navbar.push(ListPage);
          
  }

TS