这个项目做得比较早,当时是基于ionic1和angular1做的。做了四个tabs的app,首页模仿携程首页,第二页主要是phonegap调用手机核心功能,第三页模仿微信和qq聊天页,第四页模仿一般手机的表单设置页。同时还模仿知乎做了一个侧边栏页(账号:wty,密码:123456)。

没有后台,纯前端展示,功能还比较多,调用系统的声音、震动和手机设备信息等。有二维码扫描功能,还做了类似qq消息可拖拽效果,上拉下拉刷新,轮播图组件。

安卓apk下载

线上地址

一、基本概念

1. Angularjs简介

Angularjs是一款优秀的前端 JS 框架,已用于 Google 的多款产品当中 如 Gmail、Maps、Calender 等。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义标签、依赖注入,等等。

2. Ionic简介

Ionic是一个强大的 HTML5 应用程序开发框架,具有速度快,界面现代化、美观等特点。特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

3. Phonegap简介

Phonegap是一个用基于 HTML, CSS 和 JavaScript 的,创建移动跨平台移动应用程序的
快速开发平台。它使开发者能够手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap 拥有丰富的插件,可以调用。

二、项目各tab主要功能介绍

1. 初始化配置

  • 手机上app显示的图标、名称、开机画面
  • 注入依赖
  • 隐藏显示键盘
  • hammer触屏手势插件配置
  • 菜单栏的位置、导航条文字位置、回退按钮图标等
  • 切换页面的过渡效果(bug)
  • AngularUI Router
  • services服务

2. tab-home

  • 幻灯指令 ion-slide-box
  • 触屏手势切换页面
  • 栅格系统
  • 触屏手势touch-bases和hammerjs
  • ng-init、ng-click、 ng-src、 ng-repeat指令,双向数据绑定
  • 打开app内置的浏览器webview方法
  • 上拉刷新

3. tab-dash

  • phonegap功能的应用:二维码扫描、调用系统弹窗、震动铃声功能、获取设备信息
  • ion-side-menus侧边栏功能
  • ionic 动态组件 $ionicModal弹出登录界面
  • ng-show、ng-model 双向数据绑定实现登录验证的实时监控
  • ionic 动态组件 $ionicPopup弹出注销界面
  • 更换头像(访问手机摄像头、图库功能)
  • 切换主题颜色

4. tab-chats

  • 删除按钮和重新排序按钮
  • 下拉刷新
  • 滑动显示分享编辑按钮
  • 长按显示动态组件$ionicActionSheet选项
  • 红色消息badge

5. tab-account

  • ionic的表单应用
  • “声音”选项被选中播放铃声
  • “震动”选项被选中开始震动
  • 实现全选、全不选、反选的功能
  • ionic动态组件$ionicPopup
  • 根据被选择数显示相应弹窗内容

三、演示如下:

ionic实战动态图演示

四、总 结

优点: 通过使用 web 技术开发 App,采用 Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发,避免了不同平台原生开发体系的学习,学习成本低, 上手快、 效率高,一次开发微信 wap app 全部搞定;

缺点:app 在 android 平台性能上有一些损失, 但是相信硬件的发展会接近原生。

欢迎大家star学习交流:github地址 | 我的博客

参考文献

  1. PhoneGap3.4安装视频教程下载
  2. Angular1官网
  3. Angular中文社区
  4. AngularJS Nice Things
  5. phonegap 中文网
  6. ionic官网

一个基于Angular+Ionic+Phonegap的混合APP实战的更多相关文章

  1. Appium python自动化测试系列之混合app实战(十一)

    12.1 什么是混合App 12.1.1 混合app定义 什么是混合app,其实这个不言而喻,我们的app正常来说应该都是native的,但是实际工作中却不是,反正种种原因我们的app会有native ...

  2. 一个基于Ionic3.x cordova的移动APP demo

    项目地址如遇网络不佳,请移步国内镜像加速节点 前端技术: Angular4.x + ionic3.x + cordova 项目运行: git clone git@github.com:EasyTuan ...

  3. 基于ionic+angulajs的混合开发实现地铁APP

    基于ionic+angulajs的混合开发实现地铁APP 注:本博文为博主原创,转载时请注明出处. 项目源码地址:https://github.com/zhangxy1035/SubwayMap 一. ...

  4. [Android App]IFCTT,即:If Copy Then That,是一个基于IFTTT的"This"实现

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/8075738.html IFCTT,即:If Copy Then ...

  5. [Android App]IFCTT,即:If Copy Then That,一个基于IFTTT的"This"实现

    IFCTT,即:If Copy Then That,是一个基于IFTTT(If This Then That)的"This"实现,它打通了"用户手机端操作"与& ...

  6. 一个基于NodeJS开发的APP管理CMS系统

    花了大概3周独立开发了一个基于NodeJS的CMS系统,用于公司APP的内容管理( **公司APP?广告放在最后 ^_^ ** ,管理员请理解~~~ )晚上看了部电影还不想睡,闲着也是闲着就作下小小总 ...

  7. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  8. 混合APP开发框架资料汇总

    Ionic(ionicframework)一款接近原生的Html5移动App开发框架 会html css js就可以开发app,Ionic基于angualrjs框架是一个专注于开发移动wap以及app ...

  9. 混合App 框架选型

    个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app. ...

随机推荐

  1. nodejs supervisor安装

    使用supervisor提高nodejs调试效率 用超级用户运行npm -g install supervisor命令,说是顺 >$ sudo npm -g install supervisor ...

  2. caffe特征提取/C++数据格式转换

    Caffe生成的数据分为2种格式:Lmdb 和 Leveldb 它们都是键/值对(Key/Value Pair)嵌入式数据库管理系统编程库. 虽然lmdb的内存消耗是leveldb的1.1倍,但是lm ...

  3. (转)RabbitMQ学习之安装

    http://blog.csdn.net/zhu_tianwei/article/details/40832185 RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客 ...

  4. 优动漫PAINT用户界面介绍

    使用优动漫PAINT能够快速实现工程巨大的漫画.插画以及动画,从13年发布至今一直备受好评,目前优动漫PAINT1.6.6.1是最新的版本,新版本的完善也受到更多年轻伙伴的青睐,使用优动漫PAINT可 ...

  5. Python基础:条件判断 &&循环

    1:条件判断 2:循环 2.1:for 2.2  while 小结: continue :跳出本次循环 进行下次循环,  break :结束循环体.

  6. 企业级任务调度框架Quartz(9) Quartz之作业触发器Trigger

    前序:      我们已经大概对Quartz的基本有了一个大概的认识:现在我们将要逐渐对Quartz的各个重要组件进行学习:前面已经对job进行了详细讲解,现在我们来认识下它的一个重要兄弟,没有它,作 ...

  7. 热重载 预编译 编译器 JS引擎 作用域

    热重载就是页面每次改动,不需要手动去刷新,可自动刷新.保持vuex的状态. JS之预编译 JavaScript的预编译 编译器 JS引擎 作用域三者之间的关系 建议你先去看看你不知道的JavaScri ...

  8. 代码检查工具sonarqube介绍及使用

    亲测有效 环境:springboot+gradle+jdk1.8+sonarqube7.4 一.说明: SonarQube为静态代码检查工具,采用B/S架构,帮助检查代码缺陷,改善代码质量,提高开发速 ...

  9. Project Euler 25 1000-digit Fibonacci number

    题意:在斐波那契数列( 1 ,1,2,3,5 ...... )中,第一个有1000位数字的是第几项? 思路:滚动数组 + 大数加法 /********************************* ...

  10. [luogu4107 HEOI2015] 兔子与樱花(树形dp+贪心)

    传送门 Description 很久很久之前,森林里住着一群兔子.有一天,兔子们突然决定要去看樱花.兔子们所在森林里的樱花树很特殊.樱花树由n个树枝分叉点组成,编号从0到n-1,这n个分叉点由n-1个 ...