1、第一、二天
环境准备
1.1、安装Node.js(Windows下安装)
1.1.1、下载地址:https://nodejs.org/en/download/
1.1.2、安装后命令行下执行:node --version出现版本号表示安装成功
1.2、npm安装:执行:npm install npm -g 命令
1.3、ionic 安装
1.3.1、资源包下载地址:http://ionicframework.com/docs/overview/#download
1.3.2、命令行下执行:npm install -g cordova ionic 命令进行安装
1.3.3、更新:npm update -g cordova ionic
1.3.4、创建应用实例:ionic start 应用名称 初始类型(如:ionic start myApp tabs)
1.3.5、试运行看是否安装成功(需要进入到myApp目录):ionic serve
1.4、安装android SDK:
下载android SDK并安装,然后环境变量添加ANDROID_SDK_HOME,路径为SDK的安装目录,然后在
path中添加%ANDROID_SDK_HOME%\tools和%ANDROID_SDK_HOME%\platform-tools
1.5、测试是否安装成功
1.5.1、ionic start myproject tabs:创建一个带tabs栏和bottom栏的名字叫做myproject的
工程
1.5.2、cd myproject:进入项目路径
1.5.3、ionic serve:浏览器调试,在浏览器中预览
1.5.4、ionic cordova platform add android:添加android平台
1.5.5、ionic cordova build android:编译安卓项目
1.5.6、ionic cordova run android:真机运行,运行在安卓手机上,需要数据线连接到电脑,
并且手机打开开发者模式,允许调试。
2、第三、四、五天
2.1、ionic g page 要创建的页面名称:创建空白页面,需要在命令窗口中执行,创建的页面在pages目录
下,一个页面相当于一个文件夹,叫做组件,一个页面包括html、scss、ts文件一个,
2.2、创建的项目的文件目录结构
2.2.1、.sourcemaps
2.2.2、node_modules:所有项目依赖库的存放点,包括ionic框架本身
2.2.3、platforms:平台
2.2.4、plugins:插件存放的目录
2.2.5、resources:用来防止你编译应用的时候用到的闪屏和图标
2.2.6、src:源代码资源目录,编码基本都在这里完成
2.2.7、www:编译文件夹
2.2.8、.editorconfig
2.2.9、.gitignore
2.2.10、config.xml:一些配置信息
2.2.11、ionic.config.json
2.2.12、package-lock.json
2.2.13、package.json:版本配置信息之类的,可以用来更新版本
2.2.14、tsconfig.json
2.2.15、tslint.json
2.3、src目录建构
2.3.1、app
2.3.1.1、app.component.ts
2.3.1.2、app.html
2.3.1.3、app.module