ionic3完成整个APP开发所遇到的问题及解决方法

开发流程及部分功能实现

一、启动项目

1. npm install 安装依赖
2. 安装环境Cordova & Ionic CLI
3. ionic serve 启动项目

二、关于打包

1. 安装环境Android SDK
2. 生成未签名apk包 ionic cordova build android --prod --release
3. 生成keystore文件 keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
4. 签名（目前我是使用第三方工具APKSign）

三、关于开发流程

1. 如果需要新建page ， 使用命令ionic g page PageName，新建components和services也是类似的操作，这样会自动添加在app.module中。
2. 基本开发和vue类似，创建页面，引用你所需要的组件或者服务，然后进行开发。
3. 用ionic自带的组件开发，如果遇到垂直居中问题，注意重写样式为px（整体换为rem后不需要）

四、关于路由

1. 现在home页为主页面，其他页面均以push方式进入，pop方式返回。由localStorage里面的menuClose变量来控制首页是否显示菜单（初次进入默认不显示）

五、关于服务

1. 现在服务里面基本只做获取数据操作，判断返回code这种都在页面里面完成。后续可以将判断code写成公共函数放于服务里面，然后只返回成功后的数据。（待优化）

开发所遇到问题

一、启动页和打包

1. 关于启动页过长及出现白屏的问题，解决方式：

• 打包时使用 ionic cordova build android --prod --release，可以将启动页大幅度缩短，打包后体积也大幅缩小。
• 增加启动静态页时间<preference name="SplashScreenDelay" value="3000" /> 3000即为3秒，可以加长这个时间来避免出现白屏。

2. 关于实机“The connection to the server was unsuccessful”报错，解决方式：

• 此问题初步估计是因为网络不好导致第三方文件加载失败引起报错的，搜查文档基本是两张解决思路，一种延长加载时间<preference name="loadUrlTimeoutValue" value="700000" />默认加载时间为30s，可以修改为70s，基本不会再出现报错的情况；另外一种思路是减少Index文件所要加载的内容，做重定向到新的页面加载。第一种成功实现，第二种在重定向时报错，暂未成功解决。

3. 关于启动页和图标

• 只需要修改resources目录下的icon.png、splash.png，然后运行ionic resources即可。

二、关于菜单栏

1. 菜单栏封装成组件，单独写一个menu component，并且挂在home页下。（一开始挂在app.html下，然后发现问题，app.html在未登录状态下，登录后获取个人信息不会再次加载，导致菜单栏没有个人信息数据）

三、关于父子组件数据传递

1. 父向子传递数据
   父页面<order-item [orderItemData]="item"></order-item>
   子页面@Input() orderItemData;
2. 子组件向父页面传递数据
   子页面 @Output() private childOuter = new EventEmitter();
   父页面 (childOuter)="getChildData($event)"
3. 父页面调用子组件方法
   先在组件上添加标记 如<order-item #orderItem></order-item>
   里面添加@ViewChildren('orderItem') orderItems;声明一下子组件
   再用this.orderItems可以调用子组件里面的方法了

四、下拉加载和绝对定位FIXED出现冲突的问题

1. 使用ion-refresher-content实现下拉加载的时候，如果页面同时存在绝对定位为FIXED的元素，将影响其定位。解决方法：

• 修改scroll-content的transform属性，下拉加载模块会自动升成一个scroll-content的区域，因为其transform属性影响导致绝对定位失效。但是实际按此操作修改时并未成功。
• 将绝对定位的元素放于ion-fat里面，ion-fat是官方提供的固定位置的容器，但是要注意里面必须要保留一个<button ion-fab style="display: none">Button</button>，不然会报错。包括ion-footer也可以放在里面来解决和下拉加载冲突的问题，注意z-index即可。

五、没做rem自适应导致的垂直居中等对齐问题

1. 因为ionic自带组件很多都是rem自适应，而自己项目因为时间原因没有起手选择rem。导致后续各种垂直居中对齐出问题，解决方式：

• 将原Ionic组件隐藏，重写一个新的遮罩在组件上面（此方法为一开始想到的，强行实现了一些简单的地方），不过后面发现问题很多，比如点击区域不够，挤压下面元素等等问题。不推荐使用。
• 重写ionic组件样式，使用！importent 强制修改组件rem属性为px，从而避免自适应导致的垂直居中问题，可通用于输入框，选择框等等。此方法可以解决问题，不过还是推荐从一开始就使用rem，这样不同设备也不会出现字体大小不能自适应的问题。

六、返回需要重新加载数据

1. 将获取数据放于生命周期ionViewDidEnter内

TODO

1. 目前只完成了安卓版本打包，后续还需要完成ios打包。
2. 客户地址需要加导航/复制地址功能
3. px使用rem替代 （优化）
4. 增加分页功能 （优化）
5. 将请求的code判断写成公共函数来处理 （优化）