混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

混合开发走起!Ionic+angular快速开发App(angular ionic开发的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出现版本号表示安装成功

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

2.3npm安装

2.3.1、执行:npminstall npm -g 命令

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

2.4 Cordova、Ionic 安装

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

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

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

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技术栈模型

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

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

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

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>

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

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中

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

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

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

5.3 应用赋予GPS权限!

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

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

.map(this.extractData)

.catch(this.handleError);

}

混合开发走起!Ionic+angular快速开发App(angular ionic开发的app)

到此本次分享就结束了,想学习更多移动开发技能,欢迎交流,提出你们想要学的内容或者想法哦!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月7日 上午8:35
下一篇 2024年5月7日 上午8:47

相关推荐

  • 转化医学科研项目

    转化医学科研项目 转化医学科研项目是一种旨在将科学知识转化为实际医学成果的科研项目。这些项目利用现代科学技术,如生物学、化学、物理学和计算机科学等,研究疾病的分子机制和临床意义,为…

    科研百科 2025年3月28日
    1
  • 优化科研项目经费管理

    优化科研项目经费管理 科研项目经费管理是科学研究过程中至关重要的一环。合理的经费管理能够提高研究效率和质量,同时也能够降低研究成本。然而,在过去的研究中,我们发现科研项目经费管理存…

    科研百科 2025年3月10日
    2
  • 惠东县2022年公开招聘乡镇(街道)党建指导员、党建联络员公告(惠城区2021年公开招聘镇(街道)党建指导员通告)

    为贯彻落实《中国共产党支部工作条例(试行)》《中国共产党农村基层组织工作条例》《广东省加强党的基层组织建设三年行动计划(2021—2023年)》和《关于深化实施镇村干部“大储备”工…

    科研百科 2023年1月5日
    300
  • 施工项目进度管理系统

    施工项目进度管理系统 随着建筑行业的发展,施工项目的数量也在不断增加。然而,由于施工项目的复杂性和不确定性,传统的手动进度管理方法已经无法适应现代施工项目的需求。因此,建立一个高效…

    科研百科 2024年12月26日
    0
  • 海外创投丨美国销售管理软件研发商「Everstage」完成1300万美元A轮融资,Elevation Capital领投

    据外媒报道,近日,美国销售管理软件研发商Everstage宣布完成1300万美元A轮融资,本轮融资由Elevation Capital领投。8个月前,Everstage刚刚获得了3…

    科研百科 2022年5月31日
    272
  • 科研项目获奖人和负责人

    科研项目获奖人和负责人 近年来,在科技创新领域,有许多优秀的研究成果获得了巨大的成功。在这些成果中,有些是由科学家们通过长期的努力和不断的探索所取得的,而有些则是由项目负责人在项目…

    科研百科 2025年5月26日
    3
  • 科研项目单一供方

    科研项目单一供方 科研项目单一供方是指负责提供某种特定类型或某些特定类型的物料或服务的公司或机构。在现代科技行业中,科研项目单一供方的重要性不言而喻。 科研项目单一供方通常需要具备…

    科研百科 2025年4月12日
    1
  • 中国最早取得的科技成就

    中国最早取得的科技成就中国最早取得的科技成就,是为了全中国人民的学习、娱乐以及社会发展的,是在为我国社会主义建设创造良好的条件,是中国古代伟大的创新创造者。中国最早的近代化纲领是什…

    科研百科 2024年11月21日
    2
  • 开发项目管理软件

    开发项目管理软件 随着软件开发的不断发展,项目管理软件已经成为了软件开发过程中不可或缺的一部分。开发项目管理软件可以帮助软件开发团队更好地管理项目进度、资源、质量等方面,提高软件开…

    科研百科 2024年5月28日
    89
  • 项目信息管理师

    项目信息管理师是一个重要的职业,负责管理项目的信息资源,包括文件、数据库、人员、预算和进度等。在现代商业环境中,信息管理变得越来越重要,因为项目的成功往往取决于信息的质量和管理的效…

    科研百科 1天前
    1