1. 首页
  2. 千行百业
  3. 菜鸟学院
  4. 菜鸟教程

混合开发走起！Ionic+angular快速开发App

Ionic+angular快速开发App 940 阅读 0 评论

混合开发走起！Ionic+angular快速开发App

对于新入门的移动开发者而言，摆在面前的移动应用开发有三种口味

  1. Native App： 本地应用程序（原生App）
  2. Web App：网页应用程序（移动web）
  3. Hybrid App：混合应用程序（混合App）

Hybrid App兼具了Native App良好用户体验的优势，也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用，比如美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式，今天实训邦带你学习利用Ionic+angular如何快速开发混合应用App。

分享目录

  1. 概念介绍
  2. 开发环境及搭建
  3. 项目文件目录结构
  4. 技术模型及动态数据请求流程图
  5. Ionic组件及storage本地缓存

一、 概念介绍

1.1 Ionic介绍

2013年第一个版本，目前已经发布到了4.0 Beta 也是发展比较快的一个

开发框架。Ionic以AngularJS和ApacheCordova为基础，使用Node.js进行模块管理，使用Html5、Css(SASS)和Javascript技术进行APP开发。

1.2 Node.js与npm简单介绍

Node.js(http://nodejs.cn/download/)是基于Chrome'sV8 Javascript engine 构建的一个Javascript runtime(Javascript运行时)，特点是事件驱动、非阻塞等。

npm(https://www.npmjs.com/)是Node.js中的Javascript包管理。

1.3 相关资料

Ionic文档：https://ionicframework.com/docs/v3/

Ionic Github: https://github.com/ionic-team/ionic

Ionic Cli：https://github.com/ionic-team/ionic-cli

Ionic Icons: https://ionicframework.com/docs/v3/ionicons/

Ionic 开发博客: https://www.joshmorony.com/

二、 开发环境搭建

2.1 开发环境

2.1.1、Node.js不管是Window|Mac系统，都需要Node.js

2.1.2、代码编辑器，如VsCode、Sublime等

2.1.3、开发IOS需要Mac系统，安装Xcode即可，上架需开发者证书

2.1.4、 开发Android，推荐Android Studio

2.2 Node.js搭建

2.2.1、安装Node.js（Windows下安装）

2.2.2、下载地址：https://nodejs.org/en/download/

2.2.3、安装后命令行下执行：node --version出现版本号表示安装成功

2.3npm安装

2.3.1、执行：npminstall npm -g 命令

2.4 Cordova、Ionic 安装

2.4.1、资源包下载地址：http://ionicframework.com/docs/overview/#download

2.4.2、命令行下执行：npminstall -g cordova ionic 命令进行安装

2.4.3、 设置npm 淘宝镜像(GFW，导致很多插件下载失败) ：npm install -g cnpm --registry=https://registry.npm.taobao.org 命令进行设置

2.4.4、创建应用实例：ionicstart 应用名称 初始类型， 有 blank、tabs、sidemenu3 种类型可选（例如：ionic start myApp tabs）

2.4.5、试运行看是否安装成功（需要进入到myApp目录）：ionic serve(浏览器运行调试)

http://localhost:8100/tabs/tab1

2.4.6、帮助

· 指定版本安装: npm install -g ioniccordova@beta

· npm install -g ionic@beta

· 升级到最新版本命令: npm install --save-dev--save-exact ionic@latest

· cordova卸载命令：npm uninstall cordova -g

· ionic卸载命令: npm uninstall ionic -g

· 浏览器调试技巧：http://localhost:8100/?ionicplatform=android | ios

三、项目文件目录结构

myapp/

|- node_modules 依赖包文件 包括ionic框架本身

|– platforms/ 生成android或者ios安装包需要的资源---(cordova platform add android后会生成)

| |– android/

| |– ios/

|– plugins/ 插件文件夹，里面放置各种cordova安装的插件

| |– cordova-plugin-device/

| |– ionic-plugin-keyboard/

| |– cordova-plugin-ionic-webview/

| |– cordova-plugin-splashscreen/

| |– cordova-plugin-whitelist/

| |– android.json

| |– fetch.json

|- resources android/ios 资源（更换图标和启动动画）

| |– android/

| |– ios/

|- src (ionic4.x中开发工作目录，页面、样式、脚本和图片都放在这个目录下)

| |– app/

| | |– app.component.ts/ 表示前端的逻辑，可以理解为typeScript或者js逻辑控制层；

| | |– app.html/ 核心文件（http拦截器、全局加载动画等）

| | |– app.module.ts/ 应用的根组件，每创建一个页面都要在这里注册申明才可以使用

| | |– app.scss/ 用于声明在应用中全局使用的样式

| | |– main.ts/ 申明根模块的位置

| |– assets/ 静态资源文件夹

| |– pages/ 创建的页面组件都在此目录之下

| |– providers/ 共享的服务组件

| |– theme/ 关于主题的文件 全局样式定义

| |– mainfest.json/

| |– index.html App的主要入口,这个文件主要是用设置css样式和引入js脚本,程序的启动也是在这里进行的

| |– service-work.js

|– .gitignore git配置文件

|– config.xml 打包成app的配置文件,可以配置app的id，名称、描述起始页等

|– ionic.config.json ionic配置文件

|– package.json 配置项目的元数据和管理项目所需要的依赖

|– tsconfig.json TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项

|– tslint.json ：格式化和校验typescript

|– www/ ionic4.x中静态文件，ionic build --prod 生成的单页面静态资源文件 编译文件夹

| |– assets/

| |– build/

| |– mainfest.json/

| |– index.html 引入资源的地方

| |– service-work.js

四、Ionic组件

4.1 Ionic生命周期

4.1.1 官方文档 （https://ionicframework.com/docs/v3/api/navigation/NavController/）

Event

Desc

ionViewDidLoad

当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发

ionViewWillEnter

顾名思义，当将要进入页面时触发

ionViewDidEnter

当进入页面时触发

ionViewWillLeave

当将要从页面离开时触发

ionViewDidLeave

离开页面时触发

ionViewWillUnload

当页面将要销毁同时页面上元素移除时触发

4.1.2 Ionic技术栈模型

41..3 Ionic动态登录流程图

4.2 tab控件

4.2.1 可分为，图标选项卡，顶部图标+文字选项卡，单文字。

<ion-tabs>
 <ion-tab-barslot="bottom">
 <ion-tab-buttontab="tab1">
 <ion-iconname="flash"></ion-icon>
 </ion-tab-button>
 <ion-tab-buttontab="tab2">
 <ion-label>Tab Two</ion-label>
 </ion-tab-button>
 <ion-tab-buttontab="tab3">
 <ion-iconname="send"></ion-icon>
 <ion-label>Tab Three</ion-label>
 </ion-tab-button>
 </ion-tab-bar>
</ion-tabs>

4.3 button按钮

<ion-button>Default</ion-button>
<ion-buttonhref="#">Anchorion</ion-button>
<ion-buttoncolor="primary">Primaryion</ion-button>
<ion-buttoncolor="secondary">Secondaryion</ion-button>
<ion-buttoncolor="tertiary">Tertiaryion</ion-button>
<ion-buttoncolor="success">Succession</ion-button>
<ion-buttoncolor="warning">Warningion</ion-button>
<ion-buttoncolor="danger">Dangerion</ion-button>
<ion-buttoncolor="light">Lightion</ion-button>
<ion-buttoncolor="medium">Mediumion</ion-button>
<ion-buttoncolor="dark">Darkion</ion-button>
<ion-buttonexpand="full">FullButtonion</ion-button>
<ion-buttonexpand="block">BlockButtonion</ion-button>
<ion-buttonshape="round">RoundButtonion</ion-button>
<ion-buttonexpand="full"fill="outline">Outline+ Fullion</ion-button>
<ion-buttonexpand="block"fill="outline">Outline+ Blockion</ion-button>
<ion-buttonshape="round"fill="outline">Outline+ Roundion</ion-button>
<ion-button>
<ion-iconslot="start"name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-iconslot="end"name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-iconslot="icon-only"name="star"></ion-icon>
</ion-button>
<ion-buttonsize="large">Largeion</ion-button>
<ion-button>Defaultion</ion-button>
<ion-buttonsize="small">Smallion</ion-button>

4.4 input按钮

<ion-input></ion-input>
<ion-inputvalue="默认值"></ion-input>
<ion-inputplaceholder="提示语"></ion-input>
<ion-inputclearInputvalue="可清空"></ion-input>
<ion-inputtype="number"value="数字类型"></ion-input>
<ion-inputvalue="禁用"disabled></ion-input>
<ion-inputvalue="只读"readonly></ion-input>
<ion-item>
<ion-label>Default Labelion</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-labelposition="floating">FloatingLabelion</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-labelposition="fixed">FixedLabelion</ion-label>
<ion-input></ion-input>
</ion-item>
<ion-item>
<ion-labelposition="stacked">StackedLabelion</ion-label>
<ion-input></ion-input>
</ion-item>

4.5 Loading组件

import{Component}from'@angular/core';
import{LoadingController,AlertController}from'@ionic/angular';
 
@Component({
selector:'app-tab2',
templateUrl:'tab2.page.html',
styleUrls:['tab2.page.scss']
})
exportclassTab2Page{
 constructor(publicloadingController:LoadingController,publicalertController:AlertController) {}
 
 ionic3Loading(){
 letloading=this.loadingCtrl.create({
 content:"Pleasewait....",
 duration:1000,
 });
 loading.present(loading);
 }
 asyncpresentLoading() {
 constloading=awaitthis.loadingController.create({
 message:'Hellooo',
 duration:2000
 });
 returnawaitloading.present();
 }
 
 asyncpresentLoadingWithOptions() {
 constloading=awaitthis.loadingController.create({
 spinner:null,
 duration:5000,
 message:'Please wait...',
 translucent:true,
 cssClass:'custom-class custom-loading'
 });
 returnawaitloading.present();
 }
 
}

4.6 Alert组件

import{Component}from'@angular/core';
import{LoadingController,AlertController}from'@ionic/angular';
 
@Component({
selector:'app-tab2',
templateUrl:'tab2.page.html',
styleUrls:['tab2.page.scss']
})
exportclassTab2Page{
 constructor(publicloadingController:LoadingController,publicalertController:AlertController) {}
 ionic3Alert(){
 letalert=this.alertCtrl.create({
 title:'操作',
 message:'成功',
 buttons:['关闭']
 });
 alert.present();
 }
 asyncpresentAlert() {
 constalert=awaitthis.alertController.create({
 header:'Alert',
 subHeader:'Subtitle',
 message:'This is an alert message.',
 buttons:['OK']
 });
 awaitalert.present();
 }
 asyncpresentAlertMultipleButtons() {
 constalert=awaitthis.alertController.create({
 header:'Alert',
 subHeader:'Subtitle',
 message:'This is an alert message.',
 buttons:['Cancel','Open Modal','Delete']
 });
 awaitalert.present();
 }
}

4.7 Toast控件

import{Component}from'@angular/core';
import{LoadingController,ToastController,AlertController}from'@ionic/angular';
 
@Component({
selector:'app-tab2',
templateUrl:'tab2.page.html',
styleUrls:['tab2.page.scss']
})
exportclassTab2Page{
 constructor(publicloadingController:LoadingController,publicalertController:AlertController,publictoastController:ToastController) {}
 asyncpresentToast() {
 consttoast=awaitthis.toastController.create({
 message:'Your settings have been saved.',
 duration:2000
 });
 toast.present();
 }
 
 asyncpresentToastWithOptions() {
 consttoast=awaitthis.toastController.create({
 message:'Click to Close',
 showCloseButton:true,
 position:'top',
 closeButtonText:'Done'
 });
 toast.present();
 }
}

4.8 Grid布局

<ion-content>
 <divclass="floatMenu">
 <ion-grid>
 <ion-row>
 <ion-colcol-4text-center>
 <div(tap)="gotoQuestion()">
 <ion-iconname="create"></ion-icon>提问
 </div>
 </ion-col>
 <ion-colcol-4text-center>
 <div>
 <spanclass="line-float-left">|</span>
 <ion-iconname="albums"></ion-icon>回答
 </div>
 </ion-col>
 <ion-colcol-4text-center>
 <div(tap)="gotoQuestion()">
 <spanclass="line-float-left">|</span>
 <ion-iconname="share-alt"></ion-icon>分享
 </div>
 </ion-col>
 </ion-row>
 </ion-grid>
 </div>
</ion-content>

4.9 List控件

<ion-list>
 <ion-item-sliding>
 <ion-item>
 <ion-label>Item</ion-label>
 </ion-item>
 <ion-item-optionsside="end">
 <ion-item-option(click)="unread(item)">Unread</ion-item-option>
 </ion-item-options>
 </ion-item-sliding>
 <ion-item-sliding>
 <ion-item>
 <ion-label>Item</ion-label>
 </ion-item>
 <ion-item-optionsside="end">
 <ion-item-option(click)="unread(item)">Unread</ion-item-option>
 </ion-item-options>
 </ion-item-sliding>
</ion-list>

4.10 Navigation控件 路由导航

· ion-nav-pop 自动返回

· ion-nav-push 用于导航到指定的组件

· ion-nav-set-root 设置当前导航根源

· ion-nav 导航不绑定到一个特定的路由器

五、storage本地缓存

5.1 在app.module.ts中

5.2 在页面中的.ts中设置缓存内容

5.3 应用赋予GPS权限！

publicdoLogin(username,password): Observable<string> {

returnthis.http.get(LOGIN_URL,{ params:{"username":username,"password":password}})

.map(this.extractData)

.catch(this.handleError);

}

点赞(0) 打赏
学历培训机构招生运营管理资料大全（自考、成人高考、网络教育、开放大学招生话术）
学历培训机构招生运营管理资料大全（自考、成人高考、网络教育、开放大学招生话术）
护士资格证考试全解析：大神视角下的全方位备考指南
护士资格证考试全解析：大神视角下的全方位备考指南
护士资格证通关秘籍：学长经验倾囊相授，助你轻松过关
护士资格证通关秘籍：学长经验倾囊相授，助你轻松过关
护资考前7天冲刺攻略：高效突击学习法，助你决胜考场
护资考前7天冲刺攻略：高效突击学习法，助你决胜考场

评论列表 共有 0 条评论

暂无评论

热门产品
查看更多

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天：04月19日

猜你喜欢

DOM HTMLCollection|dom ,html,ollection
DOM HTMLCollection
针对 5楼、6楼 的一些错误进行指明|针对, 5楼,6楼 的一些,错误,进行,指明
针对 5楼、6楼 的一些错误进行指明
Java基础搞出的笑话|java,基础,搞出,笑话
Java基础搞出的笑话
WMLScript toString() 函数|WMLScript,toString,函数,WMLScript,toString,函数,把,
WMLScript toString() 函数
Go 系列教程——8. if-else 语句|系列,教程,—,if-else,语句,系列,教程,if-else,
Go 系列教程——8. if-else 语句
开发者眼中的SwiftUI：它为我和用户带来了什么？|开发者,眼,中的,SwiftUI,它为,我和,用户,带来,
开发者眼中的SwiftUI：它为我和用户带来了什么？
我为什么喜欢用C#来做并发编程|我,为什么,喜欢,用,来做,并发,编程,我,为什么,
我为什么喜欢用C#来做并发编程
HTTP 简介|HTTP,简介,HTTP,简介,协议,是,Hyper,Text,Transfer,
HTTP 简介

热门专题

昆明综合高中|昆明综合高中
昆明综合高中
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学，开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
金诺幼儿园（春城路金诺幼儿园）|昆明官渡区幼儿园,幼儿园报名,官渡区幼儿园,春城路幼儿园,幼儿园招生,学前班,昆明幼儿园,金诺幼儿园,环城南路幼儿园,石井路幼儿园
金诺幼儿园（春城路金诺幼儿园）
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
综合高中|云南综合高中,昆明综合高中,综合高中能考本一吗,综合高中和普通高中的区别,综合高中是什么意思,综合高中能参加全国统一高考吗,综合高中可以考哪些大学,综合高中的学籍是什么
综合高中

推荐标签

保障中小企业款项支付条例 法律职业资格考试 高考数学知识点 520暖心文案 广东省公务员考试真题 MPP管链接方式 七类重点院校 越级向领导汇报工作 如何让猪上树 愚人节发的祝福语录 招商谈判技巧 冷门公务员岗位 幼儿园毕业典礼发言稿 专升本英语考题 中外民俗试题 营商环境座谈会 剁椒酱 怀旧的微信名字 信贷第三联系人话术 高考英语真题 客服开场白话术 禄劝县成人高考报名方法 高三语文模拟试题 成考网络客服话术 党员干部测试题 自考问答话术 对私外汇准入测试题 云南中考院校选择 初中毕业如何提升学历 电力线路施工

微信小程序

微信扫一扫体验

 立即
投稿

微信公众账号

微信扫一扫加关注

 发表
评论 返回
顶部