Ionic3项目实战
来源:互联网 发布:2017年it行业前景知乎 编辑:程序博客网 时间:2024/05/16 17:48
记录一些使用ionic3开发项目实战经验和功能解决方案。
原文链接
目录结构
Ionic应用是混合式开发的单页面应用,在开发之初要考虑到页面的切换和业务流程,以页面流定义项目层级关系会导致层级过深、不直观,所以考虑以业务模块划分项目目录。
在用Ionic脚手架生成页面时,默认采用懒加载方式,每个页面都变成了一个模块,不需要再在app.module中声明每个页面。
如:
以商场类目录大致可分为:
- 权限模块:登录页、注册页、第三方登录页、忘记密码页等
- 用户模块:个人资料页、修改设置页、会员等级页等
- 财务模块:财务总览页、用户消费清单页,消费详情页等
- 产品模块:产品列表、产品详情等
- 下单模块:预定表单页、预定流程页等
- 消息模块:系统通知页、产品通知页等
拍照或相册获取图片
实现修改用户头像类上传图片功能
安装插件
需要安装调用手机摄像头或从相册获取图片插件
$ ionic cordova plugin add cordova-plugin-camera$ npm install --save @ionic-native/camera
引入
需要先在app.module中引入Camera作为providers
import {Camera} from "@ionic-native/camera";
使用
import { Component } from '@angular/core';import { Camera, CameraOptions } from '@ionic-native/camera';@Component({ selector: 'page-header', templateUrl: 'header.html'})export class HeaderPage { constructor(private camera: Camera) { } getPicture(){ //图片选项 const options: CameraOptions = { quality: 100, sourceType: this.camera.PictureSourceType.CAMERA, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE } // 获取图片 this.camera.getPicture(options).then((imageData) => { let base64Image = 'data:image/jpeg;base64,' + imageData; }, (err) => { console.log('获取失败'); }); }}
CameraOptions参数列表:
sourceType设置为CAMERA会从相机获取,设置为PHOTOLIBRARY会从相册中获取。
状态栏
实现修改状态栏功能
Ionic3项目默认添加插件cordova-plugin-statusbar插件,用来控制状态栏。
cordova-plugin-statusbar项目地址
在app.component中可以统一修改状态栏配置
使状态栏重叠或不覆盖视图
statusBar.overlaysWebView(true);
使用默认状态栏(深色文本,浅色背景)
statusBar.styleDefault();
使用亮色状态栏(浅色文本,深色背景)
statusBar.styleLightContent();
使用黑色透明状态栏(浅色文本,深色背景)
statusBar.styleBlackTranslucent();
使用深色状态栏(浅色文本,深色背景)
statusBar.styleBlackOpaque();
隐藏状态栏
statusBar.hide();
显示状态栏
statusBar.show();
判断是否轻触状态栏
window.addEventListener('statusTap', ()=> { console.log('statusbar tap!');});
透明导航
由于顶部有轮播图,所以需要隐藏头部的导航,当用户向上滑动页面时渐变显示导航栏。
html
<ion-content fullscreen (ionScroll)="onScroll($event)"> <ion-navbar color="transparent" ion-fixed #header> <ion-title>header</ion-title> </ion-navbar></ion-content>
ts
import { Component, ViewChild } from '@angular/core';import { NavController } from 'ionic-angular';@Component({selector: 'page-header',templateUrl: 'header.html'})export class HeaderPage { @ViewChild("header") header; constructor(public navCtrl: NavController) { } //页面向上滚动150px导航栏从透明到深色背景 scrollEvent(e) { let opacity = +(event.scrollTop / 150).toFixed(2); opacity = opacity > 1 ? 1 : opacity; this.header._elementRef.nativeElement.style.background = `rgba(34,34,34,${opacity})`; }}
滑动导航
实现导航滑动选择。
html
<ion-slides [slidesPerView]="5" [pager]="false"> <ion-slide><button ion-button small>Ionic</button></ion-slide> <ion-slide><button ion-button small>HTML</button></ion-slide> <ion-slide><button ion-button small>CSS</button></ion-slide> <ion-slide><button ion-button small>JS</button></ion-slide></ion-slides>
总结
目前在用Ionic框架开发移动混合应用,整理了一些项目过程中的经验和功能实现,在此记录。
阅读全文
1 0
- Ionic3项目实战
- Ionic3 项目架构
- ionic3项目创建 运行教程
- ionic3+angular4+cordova 项目实例
- Ionic3项目webapp 怎么做
- Ionic3安装和项目创建
- ionic3
- ionic3.0.0 跨平台项目创建流程
- Ionic3 生成项目及扫描二维码
- Ionic3项目开发——环境安装
- ts中引用js文件(ionic3项目)
- ionic2 ionic3 项目创建遇到的问题总结
- Ionic跨平台项目(八)ionic2、ionic3命令大全
- Ionic3学习笔记(一)安装、项目结构与常用命令
- 升级到ionic3后建立低版本项目
- Ionic3项目开发——跨域请求
- Ionic3项目开发——发起定向HTTP请求
- Ionic3项目开发——页面跳转与参数传递
- 调了一天的配置VS2012+opencv2.4.10
- Ubuntu下为python下载python-tk软件包
- intToRoman算法题
- 82-Remove Duplicates from sorted list II
- Python中的闭包-closure
- Ionic3项目实战
- sdnu1075.我们爱汉诺塔
- 10-29C-homework
- 《从零开始写Javaweb框架》知识点--依赖注入的实现
- 转载大神的文章,解读FAST R-CNN(fast r-cnn)
- python--readline()
- 20171102_四驱台架工作日志
- 数据挖掘实验(一)
- python总结