Ionic—个人信息组件开发

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

一.用户头像和个人信息布局开发

1.开发功能
  • 开发用户头像功能
2.实例代码

  • more.html

    <ion-header>
  <ion-navbar>
    <ion-title>More</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div *ngIf="!isLogined">
    <ion-card>
      <ion-card-header text-center>
        Log in 'Free Skin' and experience more features...
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
      </ion-card-content>
    </ion-card>
  </div>
  <div *ngIf="isLogined">
    <ion-list class="marginTop10px">
      <button ion-item>
        <ion-avatar item-start>
          <img src="../../assets/imgs/logo.png">
        </ion-avatar>
        <h2>
          Jack
        </h2>
        <p>Edit your user info</p>
      </button>
    </ion-list>
  </div>
</ion-content>

  • more.scss

    page-more {
    ion-card {
        margin: 0!important;
        width: 100%!important;
    }

    .marginTop10px {
        margin-top: 10px;
    }
}

二.用户头像和个人信息数据加载开发

1.开发功能
  • 发送请求获取用户头像【问题：拿到用户头像的链接后，如果是相同地址会走缓存，所以可以通过+"?"+(new Date())的方式重新获取头像，去除缓存】
  • 模拟加载用户头像即用户名
2.实例代码

  • more.ts

    import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, LoadingController, ToastController, UrlSerializer } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';
import { BaseUI } from '../../common/baseUI';

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

  //判断是否登录
  isLogined:boolean = false;

  //avatar url
  avatarUrl:string = "../../assets/imgs/logo.png";
  //user name
  userName:string = "Jack_Wangzhe";

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public loadingCtrl:LoadingController,
    public toastCtrl:ToastController,
    public storage: Storage) {
      super();
  }

  presentLoginModal() {
    const modal = this.modalCtrl.create(LoginPage);
    modal.present();
  }

  //ionic生命周期方法：当页面进入完成后调用
  ionViewDidEnter() {
    this.loadUserPage();
  }

  //加载用户信息
  loadUserPage() {
    this.storage.get('token').then((val)=>{
      if(val!=null){
        this.isLogined = true;
        let loading = super.showLoading(this.loadingCtrl,"Loading...");
        setTimeout(()=>{
          this.avatarUrl = "../../assets/imgs/avatar.jpg"+"?"+(new Date());
          this.userName = "Jack";
          loading.dismiss();
        },2000);
      }else{
        this.isLogined = false;
      }
    })
  }
}

  • more.html

    <ion-header>
  <ion-navbar>
    <ion-title>More</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div *ngIf="!isLogined">
    <ion-card>
      <ion-card-header text-center>
        Log in 'Free Skin' and experience more features...
      </ion-card-header>
      <ion-card-content text-center>
        <button ion-button outline (click)="presentLoginModal()"> Sign in / Sign up </button>
      </ion-card-content>
    </ion-card>
  </div>
  <div *ngIf="isLogined">
    <ion-list class="marginTop10px">
      <button ion-item>
        <ion-avatar item-start>
          <img [src]="avatarUrl">
        </ion-avatar>
        <h2>
          {{userName}}
        </h2>
        <p>Click to edit your user info</p>
      </button>
    </ion-list>
  </div>
</ion-content>

三.个人信息修改页面的布局开发

1.开发功能
  • 创建用户详情页面ionic g page user,并导入app.module.ts
  • 创建more页面头像的nav导航
  • 编写用户详情页面
2.实例代码

  • more.ts

    import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, LoadingController, ToastController, UrlSerializer } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';
import { BaseUI } from '../../common/baseUI';
import { UserPage } from '../user/user';

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

  //判断是否登录
  isLogined:boolean = false;

  //avatar url
  avatarUrl:string = "../../assets/imgs/logo.png";
  //user name
  userName:string = "Jack_Wangzhe";

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public loadingCtrl:LoadingController,
    public toastCtrl:ToastController,
    public storage: Storage) {
      super();
  }

  presentLoginModal() {
    const modal = this.modalCtrl.create(LoginPage);
    modal.present();
  }

  //ionic生命周期方法：当页面进入完成后调用
  ionViewDidEnter() {
    this.loadUserPage();
  }

  //加载用户信息
  loadUserPage() {
    this.storage.get('token').then((val)=>{
      if(val!=null){
        this.isLogined = true;
        let loading = super.showLoading(this.loadingCtrl,"Loading...");
        setTimeout(()=>{
          this.avatarUrl = "../../assets/imgs/avatar.jpg"+"?"+(new Date());
          this.userName = "Jack";
          loading.dismiss();
        },2000);
      }else{
        this.isLogined = false;
      }
    })
  }
  editUserInfo() {
    this.navCtrl.push(UserPage);
  }
}

  • user.html

    <ion-header>
  <ion-navbar>
    <ion-title>User Detail</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list class="marginTop10px marginBottom0">
    <button ion-item (click)="editUserInfo()">
      <ion-avatar item-start>
        <img [src]="avatarUrl">
      </ion-avatar>
      <h2>
        Edit user avatar
      </h2>
    </button>
  </ion-list>
  <ion-list class="marginTop10px marginBottom0">
    <ion-item>
      <ion-label>User Name</ion-label>
      <ion-input type="text" value="{{userName}}"></ion-input>
    </ion-item>
  </ion-list>
  <div padding text-center class="paddingBottom0">
    <button ion-button color="primary" block>Save</button>
  </div>
  <div padding text-center>
    <button ion-button color="danger" block>Quit</button>
  </div>
</ion-content>

四.个人信息修改页面数据加载开发

1.开发功能
  • 进入个人页面后通过网络请求获取到用户个人信息
  • 添加保存方法
  • 添加注销方法
  • 定义modal弹出页面关闭后，刷新父页面的方法【父页面函数的回调modal.onDidDismiss(()=>{...})】
2.实例代码

  • more.ts

    import { Component } from '@angular/core';
import { NavController, NavParams, ModalController, LoadingController, ToastController, UrlSerializer } from 'ionic-angular';
import { LoginPage } from '../login/login';
import { Storage } from '@ionic/storage';
import { BaseUI } from '../../common/baseUI';
import { UserPage } from '../user/user';

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

  //判断是否登录
  isLogined:boolean = false;

  //avatar url
  avatarUrl:string = "../../assets/imgs/logo.png";
  //user name
  userName:string = "Jack_Wangzhe";

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public modalCtrl: ModalController,
    public loadingCtrl:LoadingController,
    public toastCtrl:ToastController,
    public storage: Storage) {
      super();
  }

  presentLoginModal() {
    const modal = this.modalCtrl.create(LoginPage);
    modal.onDidDismiss(()=>{
      this.loadUserPage();
    })
    modal.present();
  }

  //ionic生命周期方法：当页面进入完成后调用
  ionViewDidEnter() {
    this.loadUserPage();
  }

  //加载用户信息
  loadUserPage() {
    this.storage.get('token').then((val)=>{
      if(val!=null){
        this.isLogined = true;
        let loading = super.showLoading(this.loadingCtrl,"Loading...");
        setTimeout(()=>{
          this.avatarUrl = "../../assets/imgs/avatar.jpg"+"?"+(new Date());
          this.userName = "Jack";
          loading.dismiss();
        },2000);
      }else{
        this.isLogined = false;
      }
    })
  }
  editUserInfo() {
    this.navCtrl.push(UserPage);
  }
}

  • user.ts

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

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

  //avatar url
  avatarUrl:string = "../../assets/imgs/logo.png"+"?"+(new Date());
  //user name
  userName:string = "Jack_Wangzhe";

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController,
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    public storage: Storage) {
      super();
  }

  //ionic生命周期方法：当页面进入完成后调用
  ionViewDidEnter() {
    this.loadUserPage();
  }

  //加载用户信息
  loadUserPage() {
    this.storage.get('token').then((val)=>{
      if(val!=null){
        let loading = super.showLoading(this.loadingCtrl,"Loading...");
        setTimeout(()=>{
          this.avatarUrl = "../../assets/imgs/avatar.jpg"+"?"+(new Date());
          this.userName = "Jack";
          loading.dismiss();
        },2000);
      }
    })
  }

  //save editing
  save() {
    //发送请求保存数据
    let loading = super.showLoading(this.loadingCtrl,"Loading...");
    setTimeout(()=>{
      super.showToast(this.toastCtrl,"Edit successful!");
      loading.dismiss();
    },2000);
  }

  //quit
  quit() {
    this.storage.remove('token');
    this.viewCtrl.dismiss();
  }
}
汪喆_Jack
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端 vue 个人组件库
u010117667的博客
08-26 557
简介 一套实用、精致的个人组件库，组件以封装功能为主，以使用简单、灵活为设计理念。 组件演示连接 http://test.gkshwap.com/joce 如何安装 下载 https://github.com/qi2599/joce-ui.git 复制 src\plugin 文件夹到你项目 src 下面 在 main.js 中引入 全部引入 import plugin from './plugi...
个人资料卡组件
02-19
该项目是的实现。 Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webp
个人信息分享组件响应式网页模板
01-22
个人信息分享组件响应式网页模板
ionic4学习笔记15-某东项目个人中心
tongle_deng的专栏
06-26 255
1、html代码 <ion-content> <!-- <div class="user_top"> <div class="user_left"> <img src="/assets/user.png"> </div> <div class="user_right"> <h4>用户名:zhangsan</h4>
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计
weixin_34005042的博客
08-25 687
ionic3项目实战教程 - 第11讲 ionic3个人中心界面设计 这一讲主要包含一下几个部分： 1.个人中心ts具体代码展示； 2.个人中心html具体代码展示； 3.效果图； 1 个人中心 - about.ts about.ts import { ThemeableBrowser } from ...
最新Ionic5/Angular8开发的应用源代码
04-23
Ionic5提供了丰富的UI组件和工具，简化了移动应用的开发流程，使得开发者能够快速构建美观且功能丰富的应用程序。 Angular8是Google维护的一个前端框架，用于构建单页应用。它提供了依赖注入、数据绑定、指令、服务...
采用ionic开发的电子商务移动应用程序
08-10
- **商品展示**：通过JSON数据动态加载商品信息，配合离子的网格系统和轮播组件，实现美观的商品展示。 - **搜索与过滤**：使用AngularJS的过滤器功能，可以方便地实现商品搜索和按类别、价格等条件筛选。 - **...
完整的Ionic项目实例
03-13
本文将深入探讨一个名为“ddcanzuo”的完整Ionic项目实例，该实例已经过Cordova编译处理，适用于个人自学。在理解这个项目之前，我们需要先了解 Ionic 和 Cordova 这两个关键的技术框架。 **1. Ionic 框架** Ionic...
移动开发个人资源汇集
01-24
常见的移动开发框架如React Native（JavaScript）、Flutter（Dart）、Ionic（HTML/CSS/JavaScript）和Xamarin（C#），它们提供了跨平台的解决方案，使开发者可以用一套代码同时开发iOS和Android应用。 2. 部分常用...
ionic 聊天ui
01-11
【标题】：“Ionic聊天UI”是指使用Ionic框架构建的用于创建聊天应用程序的用户界面组件。Ionic是一个开源的HTML5移动应用框架，它基于AngularJS，主要用于构建原生感观的混合移动应用。在这个项目中，重点是实现...
个人信息修改组件响应式网页模板
01-22
个人信息修改组件响应式网页模板
ionic ui 全演示 代码全 亲测有效
10-24
看代码之前，修改样式之前， 请仔细阅读项目根目录下readme.md文件
【Ionic+AngularJS 开发】之『个人日常管理』App（一）
weixin_30662011的博客
02-07 90
写在前面的话 过去一年自己接触了不少手机前端开发，得益于现在手机性能的提升和4G普及，感觉使用混合技术开发手机App已经可以满足越来越多的应用场景了。新年伊始，对自己2016年所学知识做一个阶段性总结，记录一个自制的“小而萌”Hybrid App开发历程，共勉！ 〖扩展阅读〗 企业移动应用开发 混合开发成香饽饽 2016年JavaScript领域中最受欢迎的“明星”们 Hybrid AP...
Ionic 2 添加页面
孙亖的专栏
10-26 157
现在我们已经基本知道了Ionic2 app的布局，接下来我们来走一遍在我们的app里创建和导航页面的过程。 先看看src/app/app.html, 接近底部的地方有如下内容： <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav&g...
ionic中上传个人信息的图片需要安装的包
liweibo348的博客
10-22 156
vue展示信息卡片_vue实现登录和个人信息组件展示
weixin_29660659的博客
12-31 3743
最近在写一个重构node社区的小项目，碰到了登录的问题，实现思路如下：1.获取用户表单信息，使用axios提交，提交成功后，把数据存在cookie,以便后续操作。2.其中有个人信息的页面展示，获取cookie信息，判断用户是否登录，如果登录则显示内容，未登录则跳转到登录页面，所以个人信息的页面可以使用路由守卫搜索资料时有看到这种写法，就是经过判断后去改变的动态路由来决定跳转到哪个组件，感觉稍显麻烦...
ionic练习（4）- 用户管理（删除信息）
人走丿茶凉
10-22 339
<!DOCTYPE html> <html ng-app="UMApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script type="te
ionic3 联系人列表
每天一只喵的博客
03-23 3672
项目中用到，记录一下，未添加搜索功能，使用技术 ionic3 + angular5 1.创建contact文件夹 ionic g page contact 2.contact.html &lt;ion-header class="bank" no-border&gt; &lt;!--&lt;form (ngSubmit)="onStoreKeyword('produc...
ionic 修改组件默认样式_Ionic4自定义组件颜色以及扩展默认颜色
最新发布
06-09
要修改Ionic组件的默认样式，你可以使用Ionic的全局CSS变量来覆盖默认样式。这些变量可以在全局样式表中定义，并在应用程序中使用。以下是一些修改Ionic组件默认样式的方法： 1. 在全局样式表中定义CSS变量，并在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值