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开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- iOS原生混合RN开发最佳实践
iOS原生混合RN开发详解 做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid,有一些Hybrid的开发经验,目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 ...
- 混合应用开发:Phonegap VS AppCan
混合应用开发:Phonegap VS AppCan 简介 Phonegap PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台.它使开发者能 ...
- Qt混合Python开发技术:Python介绍、混合过程和Demo
前言 Qt中混合Python开发,可调用Python命令与脚本. Python Python是一种跨平台的计算机程序设计语言. 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语 ...
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
ZxEditor 移动端HTML文档(富文本)编辑器,支持图文混排.引用.大标题.无序列表,字体颜色.加粗.斜体. 可用于独立web项目开发,也可以用于与原生App混合(hybrid)开发. 源码地址 ...
- ionic4+angular6 混合移动开发 capacitor cordova
首先要更新或者安装 ionic cli npm install -g ionic 创建项目 ionic start ionic-angular tabs --type=angular –type=an ...
- iOS混合应用开发入门
原文出处: cocoacontrols 译文出处:魏志峰(@JeremyWei) 欢迎分享原创到伯乐头条 http://blog.jobbole.com/46554/ 介绍 上周(译者:原文成 ...
- 混合APP开发-hybrid 升级流程
本文来自网易云社区 作者:王贝 目前大多数APP已经应用hybrid进混合开发,这不,我们的gacha APP这个版本已经开始使用hybrid来开发了,hybrid的优势这里就不多说了,这里主要讲一下 ...
- 什么是混合app开发
webApp 移动app 就是在浏览器中运行的web应用 (网页应用)开发成本低 体验差 不需要安装 NativeApp :用Android和object-C原生语言开发的应用 开发成本高 需要安装( ...
随机推荐
- 带BOM头文件解析
在java中apache提供了一个工具类BOMStream,在获取文件流时,将获取到的文件流转化成为BOM流: InputStreamReader is = new InputStreamReader ...
- selenium的一些使用方法
新建实例driver = webdriver.Chrome()1.通过标签属性Id查找元素方法:find_element_by_id(element_id)实例:driver.find_element ...
- lsb_release -a 查询Linux系统版本
LSB是Linux Standard Base的缩写,lsb_release命令用来显示LSB和特定版本的相关信息.如果使用该命令时不带参数,则默认加上-v参数.-v, --version显示版本信息 ...
- I/O-----字符输入流
今天学习了字符流 ,果不其然又和以前的搞混了 package io.day04; import java.io.FileReader; import java.io.FileWriter; impo ...
- Golang 的内存管理(上篇)
Golang 的内存管理基于 tcmalloc,可以说起点挺高的.但是 Golang 在实现的时候还做了很多优化,我们下面通过源码来看一下 Golang 的内存管理实现.下面的源码分析基于 go1.8 ...
- LuoguP4234_最小差值生成树_LCT
LuoguP4234_最小差值生成树_LCT 题意: 给出一个无向图,求最大的边权减最小的边权最小的一棵生成树. 分析: 可以把边权从大到小排序,然后类似魔法森林那样插入. 如果两点不连通,直接连上, ...
- Postman-----构建工作流程(用于某个请求完成后从指定的请求开始继续运行)
使用场景: 当您开始运行某个集合时,所有的请求按照您在主程序中看到的顺序运行,但是在某些情况下,往往我们希望按顺序列出的请求A.B.C.D.E.F请求,在执行时不执行B.C请求,希望A请求完成后直接执 ...
- python 之 初识模块
什么是模块 什么是模块 一个.py文件 就是一个模块 我们使用import加载的模块分为4个通用类别 1.py文件 2.包好一组模块的包(带__init__.py文件的文件夹) 3.内置模块 4.已被 ...
- 深入解读Service Mesh的数据面Envoy
在前面的一篇文章中,详细解读了Service Mesh中的技术细节,深入解读Service Mesh背后的技术细节. 但是对于数据面的关键组件Envoy没有详细解读,这篇文章补上. 一.Envoy的工 ...
- Vue 进阶之路(二)
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...