使用ionic3开始本身的App开发之路

因为此次换工做的缘由，个人技术路线也有了一些变化。我本来比较喜欢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 emulate android　　//android  
ionic cordova emulate ios //ios

一般在开发当中咱们须要用的时时刷新(livereload)

因此在模拟器中启动项目的时候须要添加 --livereload 命令

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

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

因此在模拟器中启动项目的时候须要添加-c命令(--console)

结合--livereload 命令能够把命令简化成 -lc

ionic cordova emulate android -lc    //android
ionic cordova emulate 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组建来使用。