Ionic3项目实战
原文链接
记录一些使用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参数列表:
参数 | 可选值 | 说明 |
---|---|---|
quality | 0-100 | 图像质量,越大质量越好 |
sourceType | PHOTOLIBRARY、CAMERA、SAVEDPHOTOALBUM | 图片源 |
destinationType | DATA_URL、FILE_URL、NATIVE_URI | 图片路径 |
encodingType | JPEG、PNG | 图片类型 |
mediaType | PICTURE、VIDEO、ALLMEDIA | 媒体类型,图片视频等 |
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框架开发移动混合应用,整理了一些项目过程中的经验和功能实现,在此记录。
Ionic3项目实战相关推荐
- ionic3 html调用摄像头,Ionic3项目实战
记录一些使用ionic3开发项目实战经验和功能解决方案. 目录结构 Ionic应用是混合式开发的单页面应用,在开发之初要考虑到页面的切换和业务流程,以页面流定义项目层级关系会导致层级过深.不直观,所以 ...
- 计算机视觉一些项目实战技术(续)
计算机视觉一些项目实战技术(续) PROTO-OBJECT BASED SALIENCY 在本项目中,提出一种新的方法来完成显著目标侦测的任务.与以往基于聚光灯注意理论的显著目标检测器相比,遵循基于对 ...
- 计算机视觉一些项目实战技术
计算机视觉一些项目实战技术 SELECTIVE SEARCH FOR OBJECT LOCALISATION 需要多种策略来查找上述图像中的所有对象.勺子在桌子上的沙拉碗里.因此,图像本质上是层次性的 ...
- 【WEB API项目实战干货系列】- API登录与身份验证(三)
上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...
- 【Rsync项目实战一】备份全网服务器数据
目录 [Rsync项目实战]备份全网服务器数据 [企业案例] 1.1 环境部署 1.2 开始部署backup服务器:Rsync服务端过程: 1.3 开始部署nfs01服务器:Rsync客户端过程: [ ...
- 数据量大了一定要分表,分库分表 Sharding-JDBC 入门与项目实战
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 来源:juejin.im/post/684490418236581 ...
- 手把手教你洞悉 PyTorch 模型训练过程,彻底掌握 PyTorch 项目实战!(文末重金招聘导师)...
(文末重金招募导师) 在CVPR 2020会议接收中,PyTorch 使用了405次,TensorFlow 使用了102次,PyTorch使用数是TensorFlow的近4倍. 自2019年开始,越来 ...
- 9大项目实战!tensorflow2.0框架实战(免费资料+干货合集)
(翻至底部还有超多免费资料+干货合集) 随着PyTorch的不断发展,你是否开始抛弃TF转而向PT发起进攻了呢? 即便现在Pytorch发展迅速,但TensorFlow就像一个定时炸弹,你不知道什么时 ...
- 4个可以写进简历的京东 NLP 项目实战
01 京东AI项目实战课程安排 覆盖了从经典的机器学习.文本处理技术.序列模型.深度学习.预训练模型.知识图谱.图神经网络所有必要的技术. 项目一.京东健康智能分诊项目 第一周:文本处理与特征工程 | ...
最新文章
- java中jtextfield_java中的JTextField
- JSP(1)—基础知识
- ultraedit中换行键的替换
- 20个优秀的JavaScript 键盘事件处理库
- CAP理论与分布式事务解决方案
- linux-压缩和解压类
- [SpringSecurity]web权限方案_用户授权_自定义403页面
- 1008 数组元素循环右移问题 (20)
- C#LeetCode刷题之#633-平方数之和( Sum of Square Numbers)
- java 新手小程序_JAVA新手小程序之一
- Intra Chroma Prediction
- 2019年1月13日【回家】
- 40个前端新手入门练习项目,学完即可做项目
- python 图标题上移_请问如何在这个Python中将标题一起爬下来啊
- 研究生看论文的看的是什么
- html旋转木马 代码,JavaScript实现旋转木马轮播图
- Camera图像处理中的gain和offset
- Restful API 生成复杂Json数据结构及使用客户端解析该数据结构(三)
- Qt udp组播Qt udp组播
- C++中的引用变量详解