Ionic2踩坑记录（一）

首先为了兼容对Ionic尚且不了解的人，允许我对ionic做一个介绍。

众所周知，在当今主流的移动应用开发中，android和ios平台采用的是完全不同的开发语言，android主流使用java和kotlin，而ios则主流OC和swift，因此在大多数移动应用开发中，不得不采用两套完全不同的代码来完成不同平台的开发。

如何让ios和android能够兼容，这个问题已经困扰了很多IT开发的研究者，人们采用了各种插件去自动生成原生的代码，但是效果依然不好，但是在众多的方案中，有一个方案却是非常有实现的价值的，因为不管是android还是ios，它们都有浏览器，如果能把app做成网站的形式，那不就解决了兼容问题？

但是但凡手机应用，都希望尽可能的去调用手机的设备（蓝牙、wifi、摄像头等等），这是普通的web前端无法解决的问题，于是乎又有人想出来，将调用手机设备的代码和界面显示的代码分开来，手机设备用原生的开发语言去调用，界面显示用web前端的语言去完成，二者只要能相互调用即可，这种混合类的开发模式并不是在移动应用中第一次被提出的，其他语言如java的jni技术早就已经利用了不同语言的特性进行混合开发了。于是乎这种将界面代码统一，仅仅开发不同平台的设备调用接口的开发模式便成为了移动应用的混合开发模式，曾经有一段时间，混合开发变得非常火爆，虽然这项技术出来已经很久了，但是由于早期的手机性能的原因，混合开发的卡顿现象显得特别严重，但是随着手机性能的不断提升，混合开发也渐渐进入了主流开发的视野。

而混合开发中，将web前端代码和原生代码可以相互调用的插件有很多种，其中有一种叫做cordova的插件，他是从phonegap插件衍生出来的，其中的历史背景我并不了解，但是利用cordova插件，确实可以满足将前端代码生成手机app，并且可以自己用原生代码写一些插件来加入app应用中达到相应功能。

时代总是不断在进步的，随着cordova的不断发展，人们开始思考如何把前端的框架和cordova进行整合，以达到更加简单的开发效果，于是乎，就有这么一个团队，将angular和cordova整合在一起，并自己开发了一系列适用于手机的类库，形成了ionic框架，所谓ionic，就是开发人员在框架的结构下编写web前端代码，并添加适量的自开发插件，利用ionic自带的功能去生成app项目。

从上述文字看，ionic似乎是个很完美的东西啊，简单高效，那为什么说踩坑呢？原因有很多：第一，ionic只是众多混合开发框架中的一个，外加上混合开发本来就是比较新鲜进入主流的开发技术，因此网上资源非常少，学习成本相当高；第二，这个坑是angular遗留下的，做过angular开发的人应该都知道，angular1由于有着性能问题，因此angular2对angular1做出了极大的改版，虽然最基本的依赖注入和双向绑定的思想没有变化，但是其组件架构还是发生的翻天覆地的变化，而且开发语言也从原本的JavaScript变成了typescript，这样一来angular1和angular2就好像是完全不相干的两种语言。ionic基于angular做出开发，ionic1基于angular1，ionic2基于angular2，那么理所当然的ionic1和ionic2自然有着完全不同的开发形式；第三，ionic的开发团队非常喜欢最新版的东西，很多时候如果不把你的配套软件升级到最新就可能出现各种各样的问题。总而言之，ionic2的开发过程中踩坑是在所难免的，但是好在整个流程都咬着牙走了下来，下面就来看看我都踩过哪些神奇的坑吧。

1.安装ionic2

这就是一件很好笑的事情了，且不说后面的开发，ionic的安装就已经非常蛋疼了，首先ionic需要用npm安装，npm是在node安装的过程中附带的，所以开发ionic需要先安装node，而且建议安装最新版，node官网：https://nodejs.org/zh-cn/

安装完以后，运行npm -g install ionic

理论上是可行的，但是npm的源是国外的，不排除脑残的情况，所以建议换源为阿里镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后就运行cnpm -g install ionic即可。

当然还可能报出没有JAVA_HOME的错误，这个就不说了，自己安装配置java的环境去。

如果是mac或者linux系统，在运行npm -g install的时候可能要加上sudo，这个应该不用我说。

安装完以后 运行命令：ionic -v看下版本是不是2以上的就行，都完成以后再去安装cordova，同样npm -g install cordova

2.生成项目

这个事情更蛋疼，为什么呢，这个命令行不仅仅ionic1和ionic2不一样，而且ionic2好像也一直在变，在ionic1中好像运行：

ionic start <项目名称> 

即可，但是在ionic2中，start的过程却大致是这样的：

ionic start <项目名称> <appType> type=ionic2

其中项目名称是你所需要创建项目的名称（注意别傻逼的写个中文名），appType是创建工程的类型，我一般创建的是tabs，其他还有blank什么的，如果不确定，可以键入 ionic start --help来看下详细的情况

但是即使这样，也不一定可行，上文说过了，npm这个东西是时不时会抽风的，ionic start命令时候会自动运行npm，虽然你可能下载了cnpm，但是不能用来替换ionic中定死的命令，所以当遇到其nodemodule下载不下来的时候，大约有两种方法：

1）.将npm本身临时换源成淘宝，键入以下命令后不要关闭命令行，马上去执行ionic start

npm --registry https://registry.npm.taobao.org info underscore

2）.虽然报错，但是项目文件夹已经生成，只需要进入项目路径，并运行cnpm install即可

3.打包生产app项目

这个问题更加老大难，而且android和ios还不太一样，理论上如果是在mac机子上新建的项目，打包生产ios肯定没问题，但是如果是生成android项目，或者在windows上新建的项目再导到mac上生成ios，都会遇到各种各样的问题，我来大致盘算一下可能遇到问题的情况：

1）android项目，环境变量一定要配置好，不仅仅JAVA_HOME，连ANDROID_HOME、GRADLE_HOME也一样要配置，建议下载一个Androidstudio，它会自动下载android SDK和gradle，只要把路径配到环境变量即可。

2）生成过程中可能需要下载模板，如果报错类似于install xxx error的均按照问题二中的解决方案（换源）

3）这个是我自己遇到的奇葩问题，windows建的项目移植到mac上去生成ios项目，结果在platform add ios的时候一直报错，后来我知道了，这东西就是奇葩，最好能在打包生成前将尚未做过任何编译的代码在当前环境中使用ionic serve运行一遍，它会自动使用npm去安装一系列需要的东西，只有东西不缺才能正常打包。

4）版本问题，这个尽可能所有版本最新吧。

5）打包完了以后运行在手机上时，尤其android，启动界面相当长，也不是设置的时间问题，这时候需要在打包的时候加上--prod，如：

ionic cordova platform add android

ionic cordova build android --prod

当然如果需要签名打包android，还需要加上release，这个具体自己百度ionic的签名打包，不细讲。

4.使用ionic组件

ionic的组件很多，而且不同于原本的web前端开发，它的组件很多都是封装成适用于移动应用的，因此在开发的时候一定要对照官网，其实不仅仅是web前端的组件，包括调用设备的插件，主流的也尽可能使用官网上的，官网地址：https://ionicframework.com/docs/

在官网上查找想要的，当然如果因为英文看不懂或者网上不去等问题，作为四级没过的我都在这儿笑看人生，你们自求多福吧。

但是这要说的不是这些问题，而是如何去看官网，ionic官网上说的往往是它封装的内容，但是很多东西是不需要它进行封装的，比如说类似于发送http请求，这些原本是前端就应该有的东西（当然貌似ionic也有调用原生的插件实现http），那么问题来了，到底应该使用哪种方式去实现http请求呢？

如果是利用web前端方式去实现http，需要参照angular官网，而如果是用原生插件，参照ionic官网。而至于其中本质区别，我觉得在于前者需要处理跨域访问，后者则不需要，对于跨域访问问题不了解的转入我的第一篇博客。

在http请求上可能还有的选择，但是在模板渲染等问题上，显然我们需要参照angular的官网，因为模板渲染的实现本来就是ionic直接套用angular的。

如果硬要问遇到问题需要从哪参照，我个人总结了一个参照顺序：

1）如果是界面显示的功能，如弹窗啊跳转啊之类的，参照ionic官网的COMPONENTS栏目

2）如果是网络方面的功能，看协议内容，如果是web前端支持的协议，如http或webSocket则参照angular官网，否则如socket协议之类的就参照ionic官网提供的插件

3）如果调用手机设备（相机啊蓝牙啊）或者调用手机自带应用的（sqlLite啊）这种功能，参照官网提供插件，官网的NATIVE栏目

4）上述参照官网插件但凡没有找到的，很遗憾，如果不想去各个论坛去疯找一些不靠谱的，那就自己写插件吧，不过这种可能性很小了。

5）如果是界面效果上的，需要自己审判这种效果是否是手机特色的，如果不是自己查阅css的教程，如果是则先查阅ionic官网，如果没有找到。。。自己用css实现吧，这就得自求多福了。

5.使用第三方平台

上面说的内容还都是一般的功能，但是我们在移动开发中不得不使用一些第三方平台实现一些特殊的功能，比如手机支付啊之类的。但是第三方平台很少或者根本不会提供混合开发的接口，那么怎么办呢，第一是看第三方平台的技术开发论坛是否有用ionic2实现的插件，如支付宝微信都是有的；第二，如果是一些比较小众的第三方平台，可能就需要自己去写插件了，当然如果这些平台有提供js接口的，且其js接口和移动应用接口的使用效果类似的，那可以试试使用。

以上是我初步总结的五个常见的坑的类型，由于是第一篇关于ionic2的，言论更带有总结提纲的类型，没有细致到具体的问题，因为我觉得每个人遇到的问题都不一样，走过一个应用的流程很难说就遇到了大家经常遇到的问题了，所以就总结性发言了一下，在后面关于ionic的文章中我会比较具体的探探我遇到的问题和解决的方案。