Ionic—注册组件开发

程序员文章站 2022-06-01 09:26:52

...

一.用户注册页面的开发与逻辑嵌入

1.理解modal和nav使用的场景及区别

modal是临时、过渡的一个弹窗
nav用于层级关系的页面展示

2.生成注册页面

执行命令ionic g page register
在app.modules.ts中注册

3.添加跳转

使用NavController实现页面跳转
跳转代码this.navCtrl.push(跳转页面的Class)

4.编写注册信息页面内容

填写手机号码、用户昵称、密码、确认密码
有注册按钮及跳转登录按钮

5.修改全局nav返回字

修改app.module.ts中IonicModule.forRoot内容

修改内容

IonicModule.forRoot(MyApp,{
    backButtonText:'Back',
})

6.实例代码

<ion-header>
  <ion-navbar>
    <ion-title>register</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label stacked>Phone Number</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>User Name</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Repeat Password</ion-label>
        <ion-input type="password"></ion-input>
      </ion-item>
  </ion-list>
  <div padding>
    <button ion-button color="primary" block>Register</button>
  </div>
  <div text-center>
    <button ion-button color="primary" outline>Sign in</button>
  </div>
</ion-content>

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

@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad RegisterPage');
  }
}

import { Component } from '@angular/core';
import { NavController, NavParams, ViewController, LoadingController, ToastController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';
import { Storage } from '@ionic/storage';
import { RegisterPage } from '../register/register';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage extends BaseUI {

  username:string = '';
  password:string = '';

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewController:ViewController,
    public loadingController:LoadingController,
    public toastController:ToastController,
    public storage:Storage) {
      super();
  }

  dismiss() {
    this.viewController.dismiss();
  }

  login() {
    let loading = super.showLoading(this.loadingController,"Loading...");
    //调用API
    setTimeout(()=>{
      //关闭loading
      loading.dismiss();
      if(Math.random()*100>50){
        //视作登录成功
        //存储token
        this.storage.set('token','abcdefg');
        //关闭当前modal
        this.dismiss();
      }else{
        //视作登录失败
        let toast = super.showToast(this.toastController,"Your username or password is wrong!");
      }
    },2000);
  }

  //注册功能
  signUp(){
    this.navCtrl.push(RegisterPage);
  }
}

二.用户注册页面与 API 结合的开发

1.开发功能

添加从注册回到登录页面【使用this.navCtrl.pop()】
添加注册功能【继承BaseUI模拟后台发请求，进行用户注册】

2.实例代码

<ion-header>
  <ion-navbar>
    <ion-title>register</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label stacked>Phone Number</ion-label>
      <ion-input type="text" [(ngModel)]="phoneNumber"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>User Name</ion-label>
      <ion-input type="text" [(ngModel)]="userName"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label stacked>Password</ion-label>
      <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
    <ion-item>
        <ion-label stacked>Repeat Password</ion-label>
        <ion-input type="password" [(ngModel)]="repeatPassword"></ion-input>
      </ion-item>
  </ion-list>
  <div padding>
    <button ion-button color="primary" block (click)="registerUser()">Register</button>
  </div>
  <div text-center>
    <button ion-button color="primary" outline (click)="toLogin()">Sign in</button>
  </div>
</ion-content>

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController, ViewController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';

@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage extends BaseUI{

  phoneNumber:number;//phone number
  userName:string;//user name
  password:string;//password
  repeatPassword:string;//repeat password

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public navController:NavController,
    public loadingCtrl:LoadingController,
    public toastCtrl:ToastController,
    public viewController:ViewController
    ) {
      super();
  }

  //jump to login page
  toLogin() {
    this.navController.pop();
  }

  //register user function
  registerUser() {
    if(this.password !== this.repeatPassword){
      super.showToast(this.toastCtrl,"Please input same password!");
    }else{
      let loading = super.showLoading(this.loadingCtrl,"loading...");
      setTimeout(()=>{
        loading.dismiss();
        this.viewController.dismiss();
        super.showToast(this.toastCtrl,"Register Successful!");
      },3000);
    }
  }
}

三.用户注册表单验证的增强

1.开发功能

添加手机号校验功能【使用正则验证：正则公式.test()】
校验昵称长度和密码长度校验

2.实例代码

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController, ViewController } from 'ionic-angular';
import { BaseUI } from '../../common/baseUI';

@Component({
  selector: 'page-register',
  templateUrl: 'register.html',
})
export class RegisterPage extends BaseUI{

  phoneNumber:string;//phone number
  userName:string;//user name
  password:string;//password
  repeatPassword:string;//repeat password

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public navController:NavController,
    public loadingCtrl:LoadingController,
    public toastCtrl:ToastController,
    public viewController:ViewController
    ) {
      super();
  }

  //jump to login page
  toLogin() {
    this.navController.pop();
  }

  //register user function
  registerUser() {
    if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phoneNumber)){
      super.showToast(this.toastCtrl,"Please input real phone number!");
    }else if(!this.userName){
      super.showToast(this.toastCtrl,"Please input your username!");
    }else if(this.userName.length < 3 || this.userName.length > 10){
      super.showToast(this.toastCtrl,"Please input your username between 3~10");
    }else if(!this.password || !this.repeatPassword){
      super.showToast(this.toastCtrl,"Please input your password and repeat password!");
    }else if(this.password.length < 3 || this.password.length > 10){
      super.showToast(this.toastCtrl,"Please input your password between 3~10");
    }else if(this.password !== this.repeatPassword){
      super.showToast(this.toastCtrl,"Please input same password!");
    }else{
      let loading = super.showLoading(this.loadingCtrl,"loading...");
      setTimeout(()=>{
        loading.dismiss();
        this.viewController.dismiss();
        super.showToast(this.toastCtrl,"Register Successful!");
      },3000);
    }
  }
}

Ionic—注册组件开发

一.用户注册页面的开发与逻辑嵌入

1.理解modal和nav使用的场景及区别

2.生成注册页面

3.添加跳转

4.编写注册信息页面内容

5.修改全局nav返回字

6.实例代码

二.用户注册页面与 API 结合的开发

1.开发功能

2.实例代码

三.用户注册表单验证的增强

1.开发功能

2.实例代码

VS2017 Cordova Ionic2 移动开发环境搭建教程

Vue中父子组件通讯之todolist组件功能开发

vue单页开发父子组件传值思路详解

laravel框架学习笔记之组件化开发实现方法

Android开发之TextView使用intent传递信息，实现注册界面功能示例

iOS开发中使用UIDynamic来捕捉动画组件的重力行为

详解React开发中使用require.ensure()按需加载ES6组件

深入浅析Vue组件开发

Vue组件开发技巧总结

详解vue.js组件化开发实践