Ionic—注册组件开发

最新推荐文章于 2021-07-19 16:12:57 发布
最新推荐文章于 2021-07-19 16:12:57 发布
阅读量317 收藏 1
点赞数 1
分类专栏： Ionic 文章标签： Ionic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34829447/article/details/84901461
版权

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

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.实例代码

  • register.html

    <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>

  • register.ts

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

  • login.ts

    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.实例代码

  • register.html

    <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>

  • register.ts

    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.实例代码

  • register.ts

    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);
    }
  }
}
汪喆_Jack
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ionic电影购票系统登录注册功能实现
12-24
ionic电影购票系统注册登录功能的实现。
ionic学习（八）：问答社区03：注册实现
七刀的专栏
07-05 703
1.生成注册页面： ionic g page register2.将页面添加到app.module.ts中3.在登录页面设置跳转链接.ts文件中，先导入页面，再实现函数跳转4.做前端页面register.html代码如下：&lt;ion-header&gt; &lt;ion-navbar&gt; &lt;ion-title&gt;注册&lt;/ion-title&gt; &l...
signIn-signUp-using-ionic:使用ionic创建移动应用（登录和注册页面）
04-12
使用离子登录 使用ionic创建移动应用（登录和注册页面）
视频聊天系统开发，利用Ionic框架实现注册与登录功能
m0_58374018的博客
07-19 270
由于视频聊天系统开发是前后端分离式的，所以移动端使用ionic框架，ionic框架实现注册与登录其实就是调用后端API接口对数据进行处理。视频聊天系统开发移动端主要负责界面的设计和接口的调用。 一、代码部分 1、创建模型类 根据数据库的字段进行建模，在model文件夹下创建一个Typescript文件，命名为Users。代码如下： export class Users{ usersid:string; pass:string; roleid:string; username:
ionic中的常用组件(1)
qq_44361433的博客
04-20 1471
中文地址：https://www.gitbook.com/book/yanxiaodi/ionic2-guide/details 英文地址：https://ionicframework.com/docs/v3/api/components/action-sheet/ActionSheetController/ 1,从设备底部滑出的窗口 import { ActionSheetController ...
ionic3组件通信多重应用
11-10
主要是通过一个简单的投票案例来描述组件通信的使用，一个组件满足2个甚至多个需求的使用方法，涉及的内容有组件通信、service、还有angular中部分作为控制的一些内容。
ionic基础组件使用案例
08-12
ionic基础组件使用案例
ionic混合开发APP
07-18
Ionic 是完全基于谷歌的 Angular 框架，在 Angular 基础上面做了一些封装，让我们可以更快速和容易的开发移动的项目。Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能，ionic ...
配置ionic开发环境.docx
04-08
自己整理的ionic开发环境配置流程，
Ionic2开发环境搭建教程
08-30
主要为大家详细介绍了Ionic2开发环境的搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ionic—动态样式与夜间模式
Jack汪喆的技术分享栏
12-23 897
一.夜间模式的布局实现 1.开发设计 夜间模式的切换其实就是css样式表的切换 添加主题文件theme[theme.light.scss和theme.dark.scss] 创建providers实现主题的切换ionic g provider settings rxjs中的BehaviorSubject用于行为管理，可以用来切换主题，使用方式如下 创建样式主题 this.them...
Ionic项目开发环境初始化
Jack汪喆的技术分享栏
11-27 600
一.使用Ionic CLI进行项目的初始化构建 1.构建项目 执行npm install -g cordova ionic安装cordova和ionic插件 创建一个APPionic start 项目名 tabs 其中tabs是图标形式（下方图标） ionic start 项目名 blank创建空APP ionic start 项目名 sidemenu创建带有左侧menu的APP 启动项目...
Ionic—图片上传组件开发
Jack汪喆的技术分享栏
12-13 598
一.修改头像功能页面的整体结构讲解 1.安装必要的组件 使用原生的功能时将采用ionic native 安装四个插件 npm install --save @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer #camera用于相机 #file用于访问本地相册 #file...
Ionic—聊天机器人模块开发
Jack汪喆的技术分享栏
12-22 593
一.聊天模块页面列表设计与开发 1.开发设计 开发内容：开发聊天用户的列表布局与绑定 ion-item上使用click事件不是太好，故直接navPush属性设置点击跳转到的组件，通过navParam属性设置点击跳转组件时传递的参数 &lt;ion-item [navPush]="ChatdetailsPage" [navParam]="userInfo.userId"&gt; 创建聊...
Ionic—二维码扫描与关于模块的开发
Jack汪喆的技术分享栏
12-23 567
一.二维码扫描功能布局开发 1.开发设计 功能需求：布局二维码扫描页面 二维码扫描在Ionic Native中为QS Scanner插件，安装如下 sudo ionic cordova plugin add cordova-plugin-qrscanner加载与底层交互的cordova插件 sudo npm install --save @ionic-native/qr-scanner app...
Ionic—通知模块开发
Jack汪喆的技术分享栏
12-22 519
一.通知模块页面布局开发 1.实例代码 &lt;ion-header&gt; &lt;ion-navbar&gt; &lt;ion-title&gt;通知&lt;/ion-title&gt; &lt;/ion-navbar&gt; &lt;/ion-header&gt; &lt;ion-content&gt; &lt;ion-list&gt; &
Ionic—个人信息组件开发
Jack汪喆的技术分享栏
12-09 501
一.用户头像和个人信息布局开发 1.开发功能 开发用户头像功能 2.实例代码 more.html &lt;ion-header&gt; &lt;ion-navbar&gt; &lt;ion-title&gt;More&lt;/ion-title&gt; &lt;/ion-navbar&gt; &lt;/ion-header&gt; &lt;ion-content&gt;
Ionic—APP基础布局开发
Jack汪喆的技术分享栏
11-27 463
一.项目开发目标 目标：开发一款论坛相关的APP 二.tab组件布局以及图标选择 page/tabs文件夹下有对应icon的设置 图标选取的网站:ionicframework.com/docs/ionicons,将对应的icon名字拷贝过来放置成ion-tab标签中的tabIcon的值 ion-tab标签属性 tabTitle：Tab标题名 tabIcon：Tab图标 [root...
ionic 修改组件默认样式_Ionic4自定义组件颜色以及扩展默认颜色
最新发布
06-09
要修改Ionic组件的默认样式，你可以使用Ionic的全局CSS变量来覆盖默认样式。这些变量可以在全局样式表中定义，并在应用程序中使用。以下是一些修改Ionic组件默认样式的方法： 1. 在全局样式表中定义CSS变量，并在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值