ionic4 混合移动开发 (前世今生)
ionic 从2016年初识,经历了 ionic2 ionic3。至今 ionic4,终于在2018年7月份发布了测试版。
ionic Framework 可以说得上是最接近原生app的ui组件,漂亮的ui组件,强大的cli,兼容性强,可以说得上是webapp众多ui组件中最好的。而且创建项运行项目非常简单。当年作为一个半路出家的前端,都能够创建并跑起来一个项目,即使我不懂什么angular2 不懂什么webpack脚手架,小菜鸡一个,你也能从中一点点做起来。
ionic1在初创的时候他的初衷就是构建一个UI框架,可以任何Web开发人员选择的任何技术都可以使用这套ui框架。当时他们选择Angularjs作为其强大的组件API,当然谁能知道捏,前端百花齐放。我们所知道的前端三大主流框架分别是React、Vue、Angular,而它太依赖angular了。直到ionic4的发布才可以说ionic tream 这才实现了它的初衷。ionic4完全包含现代Web API,如Custom Elements,CSS Variables和Shadow DOM。而且完全与框架无关。现在的ionic4,无论你使用什么前端工具或框架,你都可以用它,优秀不。
Ionic 2发布的时候,那会Angular CLI 的构建工具以及路由及其不稳定,在ionic2,3的时候,ionic tream自己构建了不少工具以及路由也不是用angular的,而是用ionic自己那一套的路由Push/Pop。而如今 angular已经很强大了,从Ionic 4开始,所以ionic4完全接受Angular CLI和路由器!可以更好的去专注于组件,而不是更多的不必要的复杂工具。
目前,Ionic Framework已与angular 正式集成,但对Vue和React的支持正在开发中。期待。。。。
下面简单总结个人对ionic3 与 ionic4的差异性对比
1.结构的变化
在ionic3 新建项目 ionic start myApp,虽然说ionic跟angular是搭配着来用的,可是ionic3的目录结构跟angular的目录结构是不一样的,包括现在如果你新建ionic4项目 是这样的 ionic start myApp tabs --type=angular ,后面多了个type=angular ,截止今日ionic4还处于BETA,maybe 后面会出 type=vue type=react。
而新建的目录结构也跟angluar一样了。ionic3是封装了angular项目,而是ionic4直接就是一个angular项目,而且默认懒加载。
而且以前是默认搭配cordova,现在你可以自由的选择。说实话捏,作为保守派虽然ionic tream 搞的capacitor不错,但是在生产环境下还是不敢使用,而且只支持Android 5.0+。。。。
ionic start myApp tabs --cordova ionic start myApp tabs --capacitor
2.路由
既然整一个目录结构都跟angular一样了,那么路由呢,是不是走angular自己的路由了,没错。
而且你还可以直接用angular-cli创建一个angular项目在去添加@ionic/core模块。
app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router';const routes: Routes = [{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' } ]; @NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule] }) export class AppRoutingModule {}
tabs.page.html
<ion-tabs><ion-tab label="Home" icon="home" href="/tabs/(home:home)"><ion-router-outlet name="home"></ion-router-outlet></ion-tab><ion-tab label="About" icon="information-circle" href="/tabs/(about:about)"><ion-router-outlet name="about"></ion-router-outlet></ion-tab><ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)"><ion-router-outlet name="contact"></ion-router-outlet></ion-tab> </ion-tabs>
ionic4你可以使用Angualr的路由,这样如果需要跳转直接跳转对应的路由地址即可,路由器上实现了解耦,也决解决了原来路由自页面反复跳转,重复监听的问题。
this.router.navigateByUrl('/home'); this.router.navigate(['/item', { id: itemId }]);
当然也保留了ionic原本的路由。
this.navCtrl.goForward('/home'); this.navCtrl.goRoot('/home');
包括对路由,项目结构的变化,都是为了使ionic4变得更加通用。他现在不依赖于任何框架,而且照这样看来 type=angular新建的目录结构与anglar-cli无异,那么 type=vue 是不是也就是vue-cli新建项目的目录结构一样呢,只是为我们搭好了脚手架和添加好了@ionic/core模块。不过也有一个不好的,如果每个框架都是用框架自己的路由,会不会变得很混乱??如果继续依赖原有的路由,那你不用管你什么在框架上使用ionic,对你来说路由都是一样的。
3.生命周期
原本的生命周期
ionViewDidLoad
ionViewWillEnter
ionViewDidEnter
ionViewWillLeave
ionViewDidLeave
ionViewWillUnload
ionViewCanEnter
ionViewCanLeave
现在的生命周期
- ionNavDidChange
- ionNavWillChange
- ionNavWillLoad
4.指令和组件的变化
指令 end 变成了slot="start" large 变成size="large" 。其实在ionic以前的版本,项目开发过程中就觉得这样是不大对的,如果是标准的web组件是不会这么搞的,后知后觉。包括button的变化 <button ion-button>
变为<ion-button> 都是为了实现组件标准化,也是为了不依赖任何框架了,更通用了。
所以如果对ionic4的组件,还是要上官网重新熟悉他的的api了。这也就意味着,如果你从ionic3/2无法直接升级到ionic4,组件指令很多不一样了,但是好处是。你可以使用angualr2+的组件了啊。
//ionic4 <ion-header><ion-toolbar><ion-buttons size="large" slot="start"><ion-back-button></ion-back-button></ion-buttons><ion-title>My Navigation Bar</ion-title></ion-toolbar><ion-toolbar><ion-title>Subheader</ion-title></ion-toolbar> </ion-header>//ionic3 <ion-header><ion-navbar><ion-title>Subheader</ion-title><ion-buttons end><button large (click)="search()" ion-button icon-only><ion-icon name="search" color="light"></ion-icon></button></ion-buttons></ion-navbar> </ion-header>
5.主题样式
不仅仅是重新以标准的web component 重新写了组件,整体的主题样式变化不小,ui也更漂亮了。
总结
综上所述,本人不建议直接ionic2/3直接升级到ionic4。以前是ionic1 到 2 翻天覆地,是因为太依赖angular,你angularJS 变成了angualr2 完全不一样了,我能不变嘛。所以ionic1 无法直接升到ionic2。那么现在呢,ionic2/3 又也无法直接升级到ionic4??what?? 会不会还有下次,ionic4 也无法升级到 ionic5/6/7??
不会了,现在是标准的web component,不再依赖框架了。那么angular6或者以后到版本,或者集成与vue,react 框架你是要飞起来也没关系。
不过性能上是有了很大到变化滴,延迟加载也是是Ionic4的重要的变化内容。ionic 组件优化后,在项目打包中,比ionic3体积会小不少,但是我看了一下还是没有集成webpack??使用的是Angular6的构建器,构建速度相对来说要慢不少呀,而且在ng build 后你可以看到www目录下几百个js文件,吐血。
现在使用vue开发,感觉vue比较流行的几套ui组件都尝试过,坑不少啊,现在都是自己纯手写。尝试过ionic4+vue玩玩,标准的web组件肯定是可以用的,就是比如说
const alertController = document.querySelector('ion-alert-controller');await alertController.componentOnReady();const alert = await alertController.create({header: 'Alert',subHeader: 'Subtitle',message: '我是弹窗',buttons: ['OK']});await alert.present(); ///app.vue
其他链接:
ionic4+angular6 混合移动开发 capacitor cordova
vue+cordova构建跨平台应用集成并使用Cordova plugin
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
ionic4 混合移动开发 (前世今生)相关推荐
- 那些对混合云开发和应用程序环境的错误认识
企业架构师们在开发混合云计算应用程序并为支持程序云计算而选择云计算供应商之前,他们应当好好完成他们的准备工作.选择错误的供应商和在错误的环境中开发应用程序都会对应用程序的运行性能.工作流程.变更成本. ...
- 开发缺点_成都嗨创科技:原生APP开发与混合APP开发的优缺点对比
原生APP开发 1.开发语言: 安卓APP:Java开发语言: 苹果APP:Objective-C 或Swift 开发语言: 均为官方规定开发语言: 2.优点 1)使用体验较好,能够实现较为复杂的交互 ...
- vspythonqt混合_Qt混合Python开发技术:Python介绍、混合过程和Demo
前言 Qt中混合Python开发,可调用Python命令与脚本. Python Python是一种跨平台的计算机程序设计语言. 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言.最初被设 ...
- 混合App开发,HBuilder开发移动App
使用HBuilder开发混合App: Hbuilder:是一个在线打包工具,不需要在本地配置开发环境:直接将做好的网站,通过一些简单的操作,就能在线打包为一个App: 混合APP开发常见技术:Html ...
- iOS原生混合RN开发最佳实践
iOS原生混合RN开发详解 做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 ...
- Hybrid混合开发学习笔记(1)混合应用开发定义和常见问题
一.什么是混合应用 混合应用是指同时使用前端技术与原生技术开发的 App.通常由前端负责大部分界面开发和业务逻辑,原生负责封装原生功能供前端调用,二者以 WebView 作为媒介建立通信,从而既拥有 ...
- html5混合app原理,HTML5混合App开发
内容简介 在竞争激烈的移动互联网环境下,HTML5技术一直备受关注.HTML5混合App开发与原生App开发模式之间也争议不断.相对于原生App来说,HTML5混合App开发的成本更低.周期更短,而且 ...
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
zxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...
- “小程序化”,一种创新的混合App开发模式
计算机系统集成行业作为当今比较成熟的服务业,在国内已有三十多年的发展历史. 从80年代最初的增值代理阶段发展到现如今的多平台应用和服务创新阶段,发展较为迅速. 系统集成发展至今,虽然已经取得了很大的进 ...
最新文章
- 【Codeforces】1015B Obtaining the String(字符串 交换)
- 理解TCP的通信原理及IO阻塞
- SAP云平台Extension Factory和微软Azure上的Lambda Function
- Linux用ICMP协议实现简单Ping网络监测功能
- SSH (Secure Shell)详解
- C#中i=i++值不变的一个解释
- 18. RSS订阅(RSS Feeds)and price rule
- 操作DataTable
- PageOffice在线预览word/excel/ppt/pdf
- tcp协议服务器如何做物联网平台,物联网IoT终端设备如何选择接入协议——(TCP、UDP、MQTT、CoAP、LwM2M哪一个更适合?)...
- 微信公众号开通留言功能条件有哪些?
- Proof of Stake - 股权证明 系列1
- MUSTer:Multi-Store Tracker:A Cognitive Psychology Inspired Approach to Object Tracking
- 阿里王坚:数据重塑城市未来
- 嵌入式开发基本环境搭建---ubuntu
- 技术人员应该具备的几项基本技能
- 微机原理课程设计-模拟十字路口交通信号灯
- 英文里说话时用的PS什么意思
- 网页 变黑白网页(灰色)
- ACM题库以及培养策略
热门文章
- SCADE Display(OpenGL)软件设计文档生成工具的设计考虑
- Arduino 串口
- 分频器设计(三)小数分频
- 让错的程序看得出错(简体中文)(Making Wrong Code Look Wrong)--让错误代码显得错误
- CTCSS和CDCSS简介
- php 1000元送1200积分,075561161611是干嘛的,今天她打给我说有1800积分可以兑换1200元的东西,是骗子不?...
- java poi wps_POI操作WPS表格POI操作WPS表格.docx
- Qt实现小球碰撞动画——屏保
- 楚汉争霸系列地图[zhuan tianya]
- 你刚才在淘宝上买了一件东西