热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

IonicAPP-WebSPA开发进阶(一)AngularJS全栈工程狮进阶

AngularJS全栈工程狮进阶前言学习了一段时间AngularJS,开始接触移动端APP开发。为了响应公司开发需求,采用“Hybrid”混血开发方法。采用Ionic前端框架,

AngularJS全栈工程狮进阶

前言      

      学习了一段时间AngularJS,开始接触移动端APP开发。为了响应公司开发需求,采用“Hybrid”混血开发方法。采用Ionic前端框架,对于小白来说,得一点一点的前进。

      Ionic和AngularJS的完美融合,可以说是AngularJS的移动端解决方案(正如蒸蒸日上的React Native 是React的移动端解决方案一样。只不过为Facebook所属),它的核心架构也是为开发专业应用创建的。

      读了一部分双狼写的书,了解到“开发原生应用的好处在于用户体验好,缺点在于开发周期长、投入大。随着技术的改进,一条捷径应运而生。在移动开发领域,Hybrid架构正风靡一时。作为原生应用与Web应用的混血儿,简单点说就是利用原生代码做个壳,内部其实是个Web应用。所谓‘壳’,其实就是一个浏览器内核,它负责加载页面,并且通过一个统一的接口,将一些手机操作系统中的功能导出给Web应用,使Web应用也能实现原生应用的功能。这种方式的最大优点就是实现跨平台,无论是Android、IOS还是手机浏览器,都可以使用同一套页面、同一套JS和CSS。对于公司,采用Hybrid架构意味着人才的专业化、人力成本的降低、开发周期的缩短。对于个人,采用Hybrid架构意味着技能的复用、职业空间的扩展。从原理上讲,Hybrid架构无法赶上原生应用的效果,所以必须在效果、开发周期、人力成本之间做出权衡。随着硬件性能越来越高,对于大多数应用来说,Hybrid已然足够。以微信为例,主体功能通讯为原生,而开放给第三方的接口例如公众号API,则为Web应用。更不必说各种网站的客户端了,几乎均为Hybrid。”

      个人推崇项目驱动学习方法,先上个问题:切换页面时,如何回到之前页面的顶部?如下图左所示,现实是残酷的,实际的情形如下图右所示。

            

      自己想到了三种方法:

    1.页面刷新

      页面刷新语句如下:$state.go("tab.bill_check", {}, { reload: true });

    2.js语句实现回到页面顶部。

      回到页面顶部:返回顶部

    3.由于页面上移是由于软键盘弹出造成的,软键盘消失后页面并未恢复原来形态。

      有时实践是最好的老师,进过测试,第一种想法毙掉。第二种想法毙掉。继续尝试第三种想法。

      首先需要实现当软键盘归位后页面能够回归正常。那就需要实现监听软键盘按键了。

      实践表明Ionic无法做到监听软键盘消失按钮,其它按钮均可以监听到,为什么呢?也无法判断软键盘消失。至此问题搁置于此....

学习一隅

     Ionic官网:http://ionicframework.com/

美文美图

 

 


推荐阅读
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得
    TypeScript 实战分享:Google 工程师深度解析 TypeScript 开发经验与心得 ... [详细]
  • Python 数据可视化实战指南
    本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 今日精选:10款实用的jQuery随机效果插件
    在今天的精选内容中,我们推荐了10款实用的jQuery随机效果插件。这些插件不仅功能强大,而且设计精良,能够为您的网页增添独特的互动体验。从动态图像效果到文本动画,每款插件都提供了丰富的自定义选项,帮助开发者轻松实现创意视觉效果。特别值得一提的是,其中一款插件集成了与Google API的无缝对接,使数据展示更加生动和直观。 ... [详细]
  • vue github开源项目_2018 年最好的 45 个 Vue 开源项目汇总
    vuegithub开源项目_2018年最好的45个Vue开源项目汇总,Go语言社区,Golang程序员人脉社 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 本文源自极分享,详细内容请参阅原文。技术债务如同信用卡负债,随着时间推移,修复成本会越来越高,因此程序员必须对此有深刻认识。此外,团队应致力于培养一种持续维护和优化代码的文化,以减少技术债务的累积。 ... [详细]
  • 经过半年的精心整理,我们汇总了当前市场上最全面的Android面试题解析,为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题,帮助读者全面提升技术实力和面试表现。章节目录包括:- 第一章:Android基础面试题- 第二章:... ... [详细]
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 如何有效解决MySQL中预编译语句失效的问题及专业应对策略 ... [详细]
  • SocialFi 的未来:数据所有权、更公平的价值分配和行为数据的价值化
    SocialFi本质上是对Web2中心化社交平台的一次价值解构。撰文:Morty ... [详细]
  • 深入解析:React与Webpack配置进阶指南(第二部分)
    在本篇进阶指南的第二部分中,我们将继续探讨 React 与 Webpack 的高级配置技巧。通过实际案例,我们将展示如何使用 React 和 Webpack 构建一个简单的 Todo 应用程序,具体包括 `TodoApp.js` 文件中的代码实现,如导入 React 和自定义组件 `TodoList`。此外,我们还将深入讲解 Webpack 配置文件的优化方法,以提升开发效率和应用性能。 ... [详细]
  • 深入解析Netty:基础理论与IO模型概述
    深入解析Netty:基础理论与IO模型概述 ... [详细]
  • Go语言实现Redis客户端与服务器的交互机制深入解析
    在前文对Godis v1.0版本的基础功能进行了详细介绍后,本文将重点探讨如何实现客户端与服务器之间的交互机制。通过具体代码实现,使客户端与服务器能够顺利通信,赋予项目实际运行的能力。本文将详细解析Go语言在实现这一过程中的关键技术和实现细节,帮助读者深入了解Redis客户端与服务器的交互原理。 ... [详细]
author-avatar
mobiledu2502929697
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有