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>

Ionic 简单操作

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);
          
  }