一个基于Angular+Ionic+Phonegap的混合APP实战

孙淑建发布于2019-08-26 11:46 / 2306人阅读

摘要：有二维码扫描功能，还做了类似消息可拖拽效果，上拉下拉刷新，轮播图组件。特别适合用于基于模式的移动应用程序开发。简介是一个用基于，和的，创建移动跨平台移动应用程序的快速开发平台。

这个项目做得比较早，当时是基于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地址 | 我的博客

参考文献

PhoneGap3.4安装视频教程下载

Angular1官网

Angular中文社区

AngularJS Nice Things

phonegap 中文网

ionic官网

专线服务混合云基于docker的混合云部署方案基于蓝墨云班课的移动混合式教学模式基于安卓app开发基于区块链的app开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107524.html

用WijmoJS玩转您的Web应用 —— Ionic

摘要：在之前的文章中，我们已经介绍了使用与三大框架结合搭建您的应用程序。使用创建应用程序。扩展阅读用玩转您的应用用玩转您的应用用玩转您的应用近期活动问卷调查扬帆万里，因您前行使用反馈意见征集前言：在本文中，我们将着重介绍如何将WijmoJS与Ionic一起使用，来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中，我们已经介绍了使用WijmoJS与Angular、React、Vu...

fjcgreat 2019-08-22 18:17 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

livem 2019-08-05 12:46 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

stormgens 2019-08-01 18:25 评论0 收藏0
大前端2018现在上车还还得及么

摘要：面向对象三大特征继承性多态性封装性接口。第五阶段封装一个属于自己的框架框架封装基础事件流冒泡捕获事件对象事件框架选择框架。核心模块和对象全局对象，，，事件驱动，事件发射器加密解密，路径操作，序列化和反序列化文件流操作服务端与客户端。第一阶段： HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础：Js基础教程、js内置对...

mylxsw 2019-08-22 13:49 评论0 收藏0
Capacitor 新一代混合应用“神器” 会代替Cordova吗？？

摘要：介绍畅想是由团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在，，和上本机运行的应用程序。后者旨在替代或者说是进化。希望看到在未来发展，以及正式发布。我认为它有可能大大改善混合应用开发体验。 1.介绍or畅想 Capacitor是由ionic团队最新开发维护的一个跨平台的应用程序容器，可以轻松构建在iOS，Android，Electron和Web上本机运行的Web应用程序。我们...

番茄西红柿 2019-04-23 13:14 评论0 收藏0