AngularJS + Ionic 开发 Hybrid 项目实战总结

举报
SHQ5785 发表于 2024/05/13 14:02:48 2024/05/13
【摘要】 前言            学习了一段时间AngularJS,开始接触移动端APP开发。为了响应公司开发需求,采用“Hybrid”混血开发方法。采用Ionic前端框架,对于小白来说,得一点一点的前进。      Ionic和AngularJS的完美融合,可以说是AngularJS的移动端解决方案(正如蒸蒸日上的React Native 是React的移动端解决方案一样。只不过为Faceboo...

前言      

      学习了一段时间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语句实现回到页面顶部。

      回到页面顶部:<a href="javascript:scrollTo(0,0);">返回顶部</a>

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

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

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

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

学习一隅


【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。