Ionic2初学笔记

一、安装与配置：

1.先安装node

2.再安装n,升级node

npm install -g n

n stable

3.切换npm源为cnpm

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

4.安装angularjs运行环境

cnpm install -g @angular/cli

测试：ng new my-app生成一个anguarjs项目，生成完毕后，运行

ng serve --open

打开http://localhost:4200，如果正常则安装成功

5.安装ionic

cnpm install -g ionic cordova

如果有警告，就用cnpm重新单独安装不兼容的包

如我的是：fsevents，

cnpm install -g fsevents

测试安装环境是否成功

在某个目录下运行：ionic start my-app，然后选择一个模板，等待下载完成后进入my-app目录（这一步有点慢，安装完成后，建议把这个目录当做模板，以后再创建新项目的时候，直接复制改名就可以了，刚开始建议只用BLANK模板，慢慢跟着网上的项目学）

cd my-app

ionic serve

二、编辑器

建议使用微软的visual stuido code，非常好用，而且免费，各种插件很强大

三、调试

使用chrome

安装：Ionic DevApp，这个要在bing.com上搜索安装

一些学习过程中遇到的坑

运行android虚拟机，在当前项目目录下：

cordova run --emulator

 

使用 Storage 时，注意，如果直接引用Storage会报错：

From @ionic/storage version - 2.0.0, make the below changes:
app.module.ts


import { IonicStorageModule } from '@ionic/storage';

//..

@ngModule({

imports: [

    IonicModule.forRoot(MyApp),

    HttpModule,

IonicStorageModule.forRoot(),
]


Note: you need to remove import { Storage } from '@ionic/storage';

隐藏滚动条

在全局样式，即app.scss里添加样式：

::-webkit-scrollbar { display: none !important; }

 

手动隐藏 slideItemOption

@ViewChild(List) list: List,

list.closeSlidingItems();

 

真机调试：

在真机调试时，可以使用这个命令：

ionic cordova run android --livereload

 

在项目目录下，命令行：

ionic run android -lcs

参数解释如下：

[--livereload|-l] ....... Live Reload app dev files from the device (beta) [--consolelogs|-c] ...... Print app console logs to Ionic CLI (live reload req.) [--serverlogs|-s] ....... Print dev server logs to Ionic CLI (live reload req.)

 

控制状态栏插件：ionic cordova plugin add cordova-plugin-statusbar

在Chrome中调试：chrome://inspect/#devices

 

调试时，File不能在调试环境中运行，必须用真机模式：（使用cordova插件，建议都在真机模式调试）

ionic cordova run android --prod --device

 

创建多个TAB

ionic g tabs tabs

改变Entry Page，避免每次都在app.module.ts中添加页面。

在app.component.ts中，把rootPage改为：rootPage:any = 'TabsPage';

然后在需要导入的页面:tabs.module.ts 中增加一个导出命令：exports:[TabsPage]。注意，使用字符串方式。

 

模仿微信界面，联系人使用 以下插件，但这个插件只支持英文。在网上找了一个中文首字母的JS库，成功改造成支持中文的。

Alphabet-Scrolling-List：2017.12.30改造完毕。

 

PS:sublime Text一次不要打开太多项目，会很卡！

 

生成APP后白屏问题

ionic2运行命令ionic build/run android生成app后安装到手机启动时间很长，视觉上看起来是白屏很久才能进入App。这个问题其实很好解决，在生成app的时候加入ngc编译和aot静态编译即可解决此问题。具体做法是用Prod模式，Prod模式加入了ngc编译的aot静态编译；

ionic build android --release --prod

出现：这个错误时 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

用以下方法解决

cnpm install -g increase-memory-limit

Run from the root location of your project:

increase-memory-limit

 

添加crosswalk失败时使用：

ionic cordova plugin add https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview