关于ionic开发的分享

开发所用技术

ionic 3
angular 4
typescript

ionic 优势

可以跨平台兼容安卓和IOS，打包发布也很方便；
基础的APP组件齐全，降低了开发难度；
基础源于angular，已有angular基础的容易掌握；

升级到ionic3 的好处

@ionicPage 装饰器，简化url访问页面
懒加载，提高第一次加载速度

关于angular4和typescript

从angular2开始，官方的推荐语言就一直是ts(typescript)，ts作为js(javascript)的超集，增加了以前js的盲区interface和class，以及强类型定义，不过又同时兼容一些弱类型，相比js的自由显得严谨了很多，这样的好处就是增加了代码的可读性，即时不习惯而混用js也能兼容，可以说很方便。
angular4相对于之前的区别就只是优化了编译和一些指令，使得运行更快。

关于angular2和angular1区别

虽然我们PC的项目之前一直用的angular1，而且1和2之间的核心思想差别比较大，1的重点还是页面视图和控制器，绝大部分操作在控制器里面进行从而影响视图，2开始重点已经是组件，每个组件是个单独的个体，可以互相引用，这样重用度更高，耦合度更低。angular2的思想和vue的基本类似，我们之前已经开发多个vue项目，以import和export来作为相互引用的核心相信都已经能习惯掌握了。

开发环境搭建

所需安装的组件

Node.js
Cordova & Ionic CLI
Java SDK
Android SDK
cordova为移动设备访问的API，android SDK为所需的安卓相关的插件。
具体环境安装地址：https://www.jianshu.com/p/b9757a5bcb07
Android SDK 中文下载地址http://www.androiddevtools.cn/

关于开发

项目结构

image.png

其中platforms为打包相关的，最后打包后的app也在这个目录里面；plugins为cordova的api插件；src为主要的开发目录； src中app为基础配置，新增的组件需要在其中的app.module里添加；components为公共组件，如上传图片或可共用的单个订单，单个单据；pages为页面组件，对应vue里的views，一个根页面一个pages，如果有子页面在其下继续新建；providers为所提供的服务，一般为http服务，基本所做事情为请求数据然后返回promise对象。

开发流程

如果需要新建page ，使用命令ionic g page PageName，新建components和services也是类似的操作，这样会自动添加在app.module中。
基本开发和vue类似，创建页面，引用你所需要的组件或者服务，然后进行开发。
尽量使用Ionic自带的组件进行开发 https://ionicframework.com/docs/components/#action-sheets，部分比较繁琐的可以尝试封装，每个组件都有自带的api https://ionicframework.com/docs/api/，包含该组件的一些配置和方法，不过有些配置官方的并不全，可能需要单独去搜。

开发中踩过的一些坑

因为没有路由，所以ionic的跳转全部通过其NavController组件来控制，包含三种方式，navCtrl.push('pageName')跳转子页面，navCtrl.setRoot('pageName')跳转根页面，navCtrl.pop()返回父页面。目前暂时未添加url，之后可以跟根页面加上来避免每次热启动刷新到首页影响开发的问题。
子页面返回时需要刷新数据的问题，将请求数据的方法放于ionViewDidEnter()这个生命周期里，这个将在成功进入结束后触发。
父子页面数据传递，跟vue差不多父组件传值

image.png

子组件接收

image.png
关于angular4新的httpClient，https://segmentfault.com/a/1190000010259536，用于请求后台接口，和以前所有只是参数构造和返回值有一些区别，基本的结构区别不大，未封装显得有点繁琐，之后可以将其简单封装。
关于样式，目前ionic默认是scss，因为之前项目大都用的sass，所以可以创建page后手动改过来，不改直接写也不影响，page所用样式只在page内生效。公共样式还需慢慢完善。

开发中还有待解决的问题

热启动不同步的问题，经常会莫名报错，没找到解决办法，只能重新启动ionic serve。
公共组件如loading和toast提示，使用的地方非常多，但是需要好几行代码来配置，最好能封装成一行即可。
httpClient中get,post,put差异过大，容易记混，最好封装成公共的传值统一处理。
打包配置目前没什么了解

image.png

这个文件里面可以配置打包相关的参数。

开发完成后的打包

首先要保证所需组件全部下载才能打包，不然打包后不能使用。
打包步骤https://jingyan.baidu.com/article/359911f5a4974b57fe0306e4.html，我本地命令行一直不能签名apk，所以选择了一个第三方软件APKSIGN来进行签名，流程基本都是先运行命令生成未签名的apk然后创建签名文件keystore，然后可以利用命令行或者软件签名。之后即可完成本地安装。打包命令还可以增加参数区分生产和测试环境，之后会配置上去。

写在最后

目前项目的整体开发流程虽然已经没问题了但是需要优化的地方还很多，之前因为想跑通业务所以很多公共化的事情没做，之后尽量完善然后把公共的提出来作为一个母版项目，之后打算开发app的话都可以使用。从而减少开发时间。另外如果安装环境或者打包过程中有报错可自行查错，环境不一样错误不一定统一，就不一一列举了。