博客

ionic3和ionic4差异

0

版本差异

先了解下ionic4 >>> ionic4概述
在继续使用angular开发的前提下,ionic4和ionic3还是有诸多差异,总的来说更angular了。
主要主要注意的如下:

项目结构

不ionic了,以后都angular了。命名方式都用angular的了;provider也改成angular的叫法了,以后请叫service

生命周期

一句话,在ionic4中,用angular的生命周期钩子,不要用以前ionic的

导航

ionic中经典的基于NavController和ion-nav的导航方式已经被废弃了。ionic现在推荐使用angular路由

懒加载

好吧,又被废弃了,推荐使用angular路由的loadChildren方法实现

总结,从新回去学angular

ionic4开发教程——快速开始

0

快速开始

只需三步即可快速开始(你需要预先安装上node和git)

安装ionic cli

新建项目

运行App

ionic4开发教程——ionic4概述

0

什么是ionic

ionic是以他开源UI套件。其使用web技术构建,可以用于移动端、桌面端应用开发。

ionic特点

跨平台
无论是android、ios还是windows、mac应用都可以使用ionic开发。

基于web标准
ionic程序使用html、css、js开发,可以调用标注的web api

简洁优雅
代码很简洁,学习很简单,开发很畅快

什么是ionic4

ionic是基于cordova(web app打包方案)的app构建方案。ionic app本质是一个web app,然后通过cordova可以打包成一个android、ios app或者桌面程序。

要说ionic4,还得说说ionic的历史版本

ionic历史版本
ionic1,使用angularjs构建
ionic2~3,使用angular构建
这里需要特别说明下,angularjs和angular是两套框架,一个团队开发的两套框架,名字类似,但完全是两套框架。angularjs使用js开发,angular使用ts开发。
ionic4,是当前最新版本,官方版本集成angular,也支持使用vue、react开发。

为啥能支持angular以外的框架?
简单说就是,ionic4将之前版本中用angular写的一些核心组件重写了,不在依赖angular了。
详细点说,之前的ionic和angular耦合性很高,所有组件都是使用angular写成的。因此你没办法再使用其他框架,只能用angular开发。但ionic4进行了重新设计,ionic构建了一套独立的web组件库(没有依赖angular),因此ionic4可以使用angular以外的框架进行开发。

能不能继续用angular开发?
当然可以,angular大法好,ts大法好,巨硬股沟大法好!
通过调用@ionic/angular包,可以使用ionic2/3所具备的所有功能。

待续

angular、angularjs、ionic、cordova的区别

0

有些新手不知道其中的区别,有些装逼的人喜欢乱说,这里记录下,以后遇到新手和装逼瞎说的人方便复制粘贴。

 

angularjs和angular是两套框架,一个团队开发的两套框架,名字类似,但完全是两套框架。

ionic v1是用angularjs
2、3都是用的angular

ionic=cordova+angular

ionic适配iphone X

0

判断是否为iphone X的代码:

然后使用

添加适配

图表库收集

0

https://github.com/willsoto/ng-chartist#installation

Ionic生成启动页面、图标

0

 
本地版:
https://www.npmjs.com/package/ionic-resources

使用ion-refresher后position:fixed失效的问题

0

使用<ion-refresher>后,<ion-content>中的一个<div>会被添加一个transform:0的style,导致其中内容的position:fixed失效。

解决办法:强制给div添加transform: none !important;

 

 

ionic报错Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

0

报错内容:
typescript Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

奇怪的是,在个别手机(魅族3S)上会报错,但其他手机运行正常

使用chrome连接手机调试网页

0

web app开发经常会遇到不同手机渲染出的结果不一样的问题,这时可以通过本方法调试:

手机打开开发者模式后,chrome访问以下地址,即可发现设备
chrome://inspect/#devices