使用ionic3开始自己的App开发之路

Posted 2020-10-15 nurdun

由于这次换工作的原因，我的技术路线也有了一些变化。我原本比较喜欢react，前端js框架方面一直偏向于react。我第一次来到这家公司面试的时候听到他们要开发一款APP，要是用跨平台的技术方案。于是我当时提议的是react native。不过讲实话呢我也不是很有信心做好react native。虽然自己又一些java的基础，还有比较熟悉react，但是react native就看着文档只造过小小的轮子，相比真正的投入生产还比较远。

但是呢我自己相信，这些东西扯来扯去我非就是造轮子，现阶段我又没必要一下子去研究这些框架的底层实现，这些到后来随着经验的加深在深入也来得及。既然不用看源码了，哪它的使用就是看着文档和前任的技术分享去造自己的轮子。当然了，缺乏经验的短处有些时候还是会体现出来的，这个之后再说。就这样，我带着慢慢的自信跟面试官聊了一些跨平台的方案，我相关的知识看的还是比较多。

后来没过多久，我接到了他们的offer，并给出了同意的答案。等我过去之后面试官跟我聊，说他准备使用ionic3+angular4这套技术栈。实话讲我对ionic的认识还停留在ionic1时代，angularjs的缺点对很多人都清楚。后来也听说过angular＋typescript开发的强大之处，知识没有深入去理解。既然技术主管决定使用这套技术栈，而且很有自信的跟我讲这套技术栈，说明我上次面试的表现还是可以的，他还是肯定了我的技术水平。他选择这套我不熟悉的技术栈，还选择了我说明他认为我能快速学习并能投入到生产当中，这是对我学习能力的肯定。一边很高兴，一般有些担忧，毕竟这套技术栈我并不熟悉，有很多未知，我也有些慌。

既然已经定了，就没办法了，要来一波挑战了。于是，就开始了自己的cordova＋ionic3＋angular4+TypeScript的开发路线。现在，我们的app意境开发上线了，而且问题几乎没有，速度很好，用户体验也很不错。我自己对ionic3也有了一些研究，在这里跟大家分享一下。

首先提醒大家，在选择本技术栈之前要慎重考虑。因为ionic3跟ionic2基本特别像，但差别还是有的。angular4和angular2就更不用讲，最重要的是cordova plugin 这个很多之前的版本不能在新的ionic Cli中使用。因此遇到很多问题需要自己去折腾。国内几乎没有这套这技术栈的县官中文文档，需要道英文官网去查看相关文档。

好了，到这里我们可以开始我们的第一个ionic3 App了。

第一步上个干货

http://ionicframework.com/docs/

这是ionic3官方文档

https://github.com/nurdun/ionic3-App

这是我当时学习的时候写的一个demo

 

第一步需要全局安装ionic3

npm install -g cordova ionic

然后我们就可以开始我们的ionic3 App了

ionic start myApp tabs

就这样开始了我们的第一个带着底部选项卡的ionic3 App

等myApp项目创建完成之后，我们可以进入myApp目录下

ionic serve

或者

ionic serve --lab

来在浏览器中启动本项目。

添加平台(platform)

在添加android或者ios相关的平台到我们的项目之前我们得需要安装我们需要的相关平台的开发环境的我们的电脑。

安卓需要安装android sdk ，下载并安装完之后需要到系统环境变量中配置我们的android sdk路径到系统环境变量当中。如何添加android模拟器，可以到百度或者Bing上去搜有很多相关的很好的答案。

ios需要下载并安装xcode(当然ios平台需要在mac环境下进行开发)，如何下载并安装并如何添加ios模拟器可以去搜索，有很多答案。

ionic cordova platform add android
ionic cordova platform add ios

删掉平台相关代码　

ionic cordova platform remove android
ionic cordova platform remove ios

 

在模拟器中启动项目

ionic cordova platform add android   //android        
ionic cordova platform add ios     //ios

通常在开发当中我们需要用的时时刷新(livereload)

所以在模拟器中启动项目的时候需要添加 --livereload 命令

ionic cordova emulate run android --livereload
ionic cordova emulate run ios --livereload

除此之外我们在开发当中需要看到控制台输出(console.log之类的)

所以在模拟器中启动项目的时候需要添加-c命令(--console)

结合--livereload 命令可以把命令简化成 -lc

ionic cordova emulate run android -lc    //android
ionic cordova emulate run ios -lc //ios

 

真机调试

ionic cordova run android
ionic cordova run ios

//livereload

ionic cordova run android --livereload
ionic cordova run ios --livereload

//livereload and console

ionic cordova run android -lc
ionic cordova run ios -lc

 

上面这些是ionic3创建第一个app和不同平台上运行并看到效果的过程。

需要调用的UI组建可以到ionic3官网上去看，并选择自己喜欢的UI组建来使用。