前端之框架-ionic

一 准备工作：

1.安装java jdk,jre
2.安装nodejs,npm
3.安装android studio
4.安装ionic2,cordova    npm install -g ionic npm install -g cordova

二 通过以下指令检查是否安装成功

    java -version
    node -v 
    npm -v
    ionic -v
    cordova -v
    android -h
    adb

三 常用指令

ionic serve..........................最常用,在浏览器上运行app,开发调试
ionic serve --lab....................在浏览器上运行app,同时打开android,ios,windows三个app界面
ionic run android....................手机用usb连接电脑,执行此命令直接把debug apk安装在手机上
ionic run android --livereload.......执行此命令直接把debug apk安装在手机上,并且代码改动手机也会刷新,类似ionic serve项目,调试硬件功能,很实用
ionic resources [--splash][--icon]...将图标命名为icon(1024*1024)，启动画面命名为splash(2732*2732),格式支持png、psd和ai,放到resources文件夹下
        执行ionic resources可生成不同分辨率手机所需要的icon和splash
        执行ionic resources --icon只生成图标
        执行ionic resources --splash只生成启动画面
ionic info...........................查看ionic版本信息
cordova platform add android.........添加安卓平台
cordova platform rm android..........删除安卓平台
cordova plugin add 插件名/插件地址....添加cordova插件,这个插件地址可以是github的项目地址,也可以是一个本地文件夹路径
cordova plugin rm 插件名..............删除已安装的cordova插件
cordova plugin list..................列出所有已安装插件
cordova build android................编译安卓debug环境apk
cordova build android --release......编译安卓生产环境apk
cordova build android --prod --release编译并压缩安卓生产环境apk

四 其他命令

cnpm install......................下载app依赖,运行app前必须先下载依赖,最终在app根目录生成node_modules文件夹
adb install -r android-debug.apk..安装当前目录下名字为'android-debug'的apk到手机上,前提是数据线连接手机和电脑
adb devices.......................判断手机通过usb是否真的连通,只有当状态为__device__才表示手机和电脑真正连同,如下图
如果执行此命令输出'不是内部或外部命令，也不是可运行的程序'则说明android sdk Extras没下载正确

五 步骤流程

ionic start cutePuppyPics
cd cutePuppyPics
ionic serve
ionic cordova run android --device
adb install XXX.apk

六 结构目录

├── ionic.config.json #ionic的配置文件
├── package.json
├── resources # 打包app使用的icon图标和加载页图片
│   ├── android # 生成的android平台的各个尺寸的图标和加载页图片
│   ├── icon.png # 应用图标
│   ├── ios # 生成的ios平台的各个尺寸的图标和加载页图片
│   └── splash.png # 加载页图片
├── src # 页面源文件
│   ├── app
│   ├── assets
│   ├── declarations.d.ts
│   ├── index.html
│   ├── manifest.json
│   ├── pages
│   ├── service-worker.js
│   └── theme
├── tsconfig.json
├── tslint.json
└── www # 编译后的文件夹, Cordova默认用www路径并打开里面的index.html
    ├── manifest.json
    └── service-worker.js