·什么是Hybird App
Hybird App即使用Web前端技术,即HTML+CSS+JavaScript开发,通过内嵌WebView或调用系统的WebView内核进行展示,并由一套中间件统一安卓、IOS等系统差异,提供统一API接口或方法,允许开发者通过JavaScript像Native APP调用系统底层设备、模块、读取信息、更改系统设置和原生SDK交互,从而开发出兼具 Native APP的流畅用户体验和充足权限,同时具备Web APP开发周期短,易于维护,更新快的特点的APP。
·开发Hybird App的技术选型
前端三大框架,都有与之对应的原生应用框架。提起Hybird App,不得不提及PhoneGap,国内比较知名的WeX5就是以PhoneGap为基础的。在被Adobe收购以后,PhoneGap的核心引擎代码被抽离出来,成为Apache下的开源项目Cordova,而PhoneGap则作为商业性质的平台继续存在。正如国内的在线应用开发平台APICloud提出的那样,服务皆接口,Cordova提供了一系列接口,让JavaScript具备使用原生的设备功能。
Ionic总是和Cordova一起出现,但前者并不是后者的替代品,Ionic更关注于UI,它与Angular等三大框架的关系,更像是AntD与后者的关系,并且天生基于Angular,对Vue,React的支持也在研发中。
提及Angular,不得不提及TypeScript,因为Angular本身就是用TypeScript写的,其对TypeScript具有较好的支持能力,对TypeScript的良好使用,可以大大增强项目的可维护性。
现在,我们至少总结出了一条开发Hybird App,即混合APP的技术选型:
TypeScript + Angular + Ionic + Cordova
·如何学习TypeScript + Angular + Ionic + Cordova
显然,学习一门语言或框架,最好的方法,是阅读它们的官网、文档、如果你像我一样,不喜欢阅读文字,那么看视频是更快的选择,这里我把自己看过的视频教程推荐给大家:
1 学习TypeScript的教程:
TypeScript官网:
http://www.typescriptlang.org/
TypeScript中文手册:
https://typescript.bootcss.com/
【视频教程】TypeScript开发实战(系统掌握TypeScript核心技术)
【听课方法】扫描上图的二维码就可以学习了,如果你是手机操作,可以先截屏,然后进入微信,扫一扫,从相册上传二维码,上传截屏就可以了,下面推荐的课程,也可以这样操作。
全套课程,大概47讲,分为基础篇、工程篇和实战篇,每一讲的时间都不是很长。但是老师讲得非常细,是目前市面上少有的非常完整系统的TypeScript视频教程。
只学习过JavaScript,而没有接触过后端语言的前端工程师,学习TypeScript的第一步,就是要重塑 类型思维,真正体会规范类型带给编程的好处。
需要重点了解TypeScript的基础类型,理解泛型,会用修饰符等等。
由于我们的目的是为学习 Angular 作准备,如果时间紧张,只看 基础篇(21讲) 就足够了。
基础篇的后面可能会比较难理解,建议反复看,然后看别人的项目代码来帮助理解。
【福利】扫描上图二维码,购买成功的朋友,加我微v信x(madfan),备注 返现,报 极客时间的昵称,可以返现20元红包。
【注意】如果没有安装极客时间APP,建议先下载安装极客时间APP,扫码成功后,直接购买/拼团/组团,不要转到其他课程,这样容易丢失返利哦!
2 学习Angular的教程:
Angular中文文档:
【视频教程】Angular实战教程
https://m.ke.qq.com/course/420261?saleToken=&from=appso
同样是扫码学习,但是这套视频课程是完全免费的,只要下载腾讯课堂APP,就可以免费听课了。
课程有23节,每节课6-15分钟,快的话,两天可以看完,主要是手要敲上一遍,来更好的理解代码。
别看课程多,但只讲了一个内容,对应Angular文档里面《Tour of Heroes》(中文常翻译为:英雄指南,英雄编辑器)示例。
在教程中,你可以跟着老师,完整地敲一遍示例代码,将Angular的组件、组件通信、模块、服务、依赖注入、路由、HTTP接收数据完整地过一遍。
完成英雄指南案例,你就熟悉了Angular的基本操作了。
3 学习Ionic的教程:
Ionic官网:
Ionic文档:
https://ionicframework.com/ docs
【视频教程】Ionic4.x + Cordova + Angular7 打造仿京东商城跨平台移动端项目
这套视频课程出的时间比较晚,采用的Angular和Ionic都是比较新的版本,网上中文的Ionic4.x教程实际上很少。
需要提醒的是:Ionic2、Ionic3、Ionic4都存在一定的差异,需要问清楚你接手的项目采用的是Ionic的第几个版本。
教程讲解比较生动,给人的感觉就是很接地气,北方的同学可能会有一种亲近感。
教程存在免费和付费两种版本:
免费全集:
网盘链接: https://pan.baidu.com/s/1M_5yGDNVvkA2fzHQeISS6A 提取码:th90
付费全集:
https://www.itying.com/goods-1067.html
付费要比免费多很多内容,付费后,会提供给你专用播放器,支持MacOS和Win系统,部分视频需要专用播放器,并联系客服激活后,才可以播放。当然激活只用一次,以后就不用激活了,依然比较方便。
4 产品课:
移动互联网发展之时,一些传统的门户互联网巨头,并没有在APP中延续其在PC的地位。
但腾讯凭借微信、手Q、QQ邮箱、手机管家等多个APP,加上天天酷跑、王者荣耀、绝对求生等多个游戏,确定了其在移动领域依然无可撼动的地位。
但是同样出自腾讯,Q信、腾讯地图、QQ邮箱的阅读空间却未能获得大量用户的持续喜爱,原因是什么,腾讯内部做了哪些反思呢?反思最终导致了部分产品的进化,失败的阅读空间最终成就了今天的微信公众平台。
当你准备用Angular+Ionic+TypeScript制作功能大而全,外观高大上的APP时,因为这样或那样的不完美,而不断推迟上线日期时,不妨先看看《腾讯产品启示录》教程。
https://appcCrwMYBx6232.h5.xeknow.com/st/2U5gigalE
【福利】扫描上图二维码,购买成功的朋友,加我微v信x(madfan),备注,返现,报 拉钩教育的昵称,可以返现20元红包。
好啦,是不是已经准备好,开始制作你的APP了呢?赶紧开始你的学习之旅吧!