Ionic4初体验

作者: 张阳君 分类: 前端技术

Ionic4 beta版已经出来一段时间了,一直想要尝试用一下,但又感觉意义不大,两三年前风靡一时的混合式开发(Hybrid)现在似乎走到了尽头。前端从业者更愿意选择React Native这种技术来构建应用,加上今年Flutter异军突起,App的开发模式早就变了天。Ionic在这个时间段推出4.0版本,似乎不是特别讨喜。回想起1年前,我还在w3uu.com上创作了一版Ionic2的中文教程,没想到仅仅一年时间,Ionic3 已经更新到了 3.9.2,更别提刚面世的4.0了。今天有时间,大概逛了一下Ionic4的页面,下面给大家分享一下初次体验Ionic4的感受。

Ioinc4的特性

看了一下Ionic4的官方文档,大概有这么几个特性:

  1. Ionic4内置了一套UI组件库,这个没什么好稀奇的,2和3版本里面都有,不过官方宣称,4.0的组件库可以脱离Angular使用,这意味着只要你愿意,可以将Ionic4的组件库集成进Vue和React中。

  2. Ionic4未来会增加对React和Vue的支持,这点比较赞,毕竟像Vue这种框架在Hybrid生态方面还是有所欠缺的,当然,很多人对Hybrid已经不感冒了。

  3. Ionic4的组件库可以通过script标签引入页面,一些轻量级的移动应用(微信活动页之类的)开发会非常方便。

其他一些特性没什么好说的,基本上2和3都有。

Ionic4安装和使用

Ionic4的安装还是蛮方便的,首先我们装好ionic的全局环境:

npm install -g ionic

注意:如果你之前已经全局安装过ionic,那只需要更新就行了,安装缓慢的同学,建议更换npm源或者直接使用cnpm。

下面直接创建一个带tabs的Ionic4项目:

ionic start myApp tabs --type=angular

注意:这里加了--type=angular才会生成Ionic4的项目,从这个选项也可以看出,Ionic未来会支持其他前端框架。

这里Ionic会帮你安装好所有依赖,如果出现网络连接问题,请务必多试几次!

接下来我们cd进项目,运行:

ionic serve

运行这条命令后,电脑上可能会报node-sass的错误,不要慌,我们用cnpm重新装一下node-sass就能解决啦!

如果一切顺利的话,我们就能看到熟悉的tabs页面了:

alt

笔者这次没有尝试ios和android打包,不过也是简单的几行命令就能解决的事情。

小结

从Ionic4的特性来讲,构建Hybrid的App已经不具有任何优势了,但是从其组件库可以非常简单的引入项目,并且能结合Vue和React来开发这两个特性来看,Ionic4在轻量级移动页面开发上还是独占鳌头的。

Ionic4的官方网址:https://beta.ionicframework.com/docs/

(全文完)

0 条评论
回复
支持 Markdown 语法
暂无评论,来抢个沙发吧!