ionic 学习笔记

安装(必须安装 nodejs)

npm i -g cordova ionic

(可选 安装 cnpm : npm i -g cnpm --registry=https://registry.npm.taobao.org

 

创建项目

ionic start MyApp tabs

 

启动项目,先进入刚创建的项目目录,执行:

ionic serve

 

如果执行后卡住一直不动,有可能是host没有配 127.0.0.1 localhost,具体配置方法自进百度

目录结构 

resources/ 打包时要用到的资源文件 基本不需要改

src/ 我们开发的项目的源代码 (重点)

　　app/

　　　　app.component.ts 根组件

　　　　app.html　　根组件的模板

　　　　app.module.ts 根模块 ,告诉ionic如何组装应用, 非常重要

　　　　app.scss　　根组件的样式

　　　　main.ts       入口文件(正常不用改)

　　assets;     静态资源 (图片,JS框架...)

　　pages/ 存放页面文件,包括html,css,ts, 其下一个文件夹表示一个页面

　　theme/ 主题   包括一个scss

www/ 静态的资源文件 ,基本不需要改

.editorconfig  编辑器配置文件

.gitignore git的忽略配置文件

config.xml 打包APP时的配置文件

ionic.config.josn 项目名称,app_id等配置

tsconfig.json ts的配置文件

tslint.json      ts代码规范检查器的配置文件

 

根模块中的配置

引入 angular 和 ionic 的系统模块

import { BrowserModule } from '@angular/platform-browser';

import { ErrorHandler, NgModule } from '@angular/core';

import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

//根组件

import { MyApp } from './app.component';

//Ionic 打包成App后配置启动画面和导航条的服务

import { SplashScreen } from '@ionic-native/splash-screen';

import { StatusBar } from '@ionic-native/status-bar';

 

@ngModule({

　　declarations: []             声明所有要用到的组件

　　entryComponents: []     入口组件 ,即不需要被别的组件 引用的组件

　　imports: []        引入的模块 ,依赖的模块

　　providers: []         配置"服务"

　　bootstrap: [ionicApp]   //启动模块

 

用命令创建组件

ionic g c 组件名

成功后会在src下创建一components文件夹,其下有个components.module.ts

components/ 下会创建一个组件名的文件夹,