Ionic入门

Ionic可以针对不同设备进行自动适配

一.Inoic框架介绍

1.Inoic框架简介

• Ionic是一个混合开发的首选平台
• 选择原因
  • HTML5+CSS+JS
  • 适配于IOS,Android,Windows Phone,浏览器
• 官网：ionicframework.com

2.Ionic版本详细讲解与注意事项

• 项目github地址:github.com/ionic-team/ionic/releases
• 相关文档
  • 查所有组件如何使用：ionicframework.com/docs/
  • 查指定组件的详情属性定义：ionicframework.com/docs/api/
  • 许多新版本的写法参考：github.com/ionic-team
• Ionic官方Slack、博客论坛介绍
  • 官方博客（查看官方动态）：blog.ionic.io/
  • 官方论坛：forum.ionicframework.com/
  • 讨论社群Slack： ionicworldwide.herokuapp.com/

3.Ionic组件简介

• 混合开发的基本组件，简单理解为使用HTML写手机端的呈现组件
• ionicframework.com/docs/components

4.Ionic Native框架简介

• 与系统底层有交互的组件框架（如相机，支付等等）
• Ionicframework.com/docs/native

二.前置知识

1.NodeJS框架介绍

• 官网：nodejs.org
• nodeJS是一个生态系统；npm是包管理工具，方便进行组件的复用

2.安装NodeJS

• 官网下载node直接运行安装即可
• 通过node -v查看node版本

3.Ionic安装

• 由于国内网络的问题，很多国外的内容会被墙掉，解决方案如下：
  • npm原始源：https://registry.npmjs.org/
  • npm国内源(淘宝做的镜像源)：http://registry.npm.taobao.org/
  • 将npm配置成国内源：npm config set registry http://registry.npm.taobao.org/【如果想切回原始源使用npm config set registry https://registry.npmjs.org/】
  • 配置后通过npm config get registry检验配置是否成功
• Ionic也是通过npm进行包管理的，可以通过npm直接进行安装
  • npm install -g ionic@latest安装最新版本
  • npm install -g ionic@版本号安装指定版本
  • ionic -v查看版本的命令
  • ionic info查看完整的系统版本信息

4.VSCode编译器介绍

• 轻量级的编辑器，下载后直接可以运行
• ionic插件（在VSCode的Extension）
  • vscode-icons插件：每一个文件类型都有对应的图标，提高文件定位的效率
  • TSLint插件：用于TS的检测
  • Path Intellisense：用于提示导入文件时候的路径
  • OneDark-Pro：黑色的编辑器主题
  • ESLint插件：用于JS代码规范的检测
  • Beautify：用于进行代码的格式自动美化（自动格式化代码的功能）【使用ctrl+shift+p进入全局命令，执行>Beautify file并选择对应的代码类型就会进行代码的格式化】

5.Android开发环境安装实战演示

• 使用编译工具：Android Studio
• 使用SDK Manager[用于管理与更新本地的SDK]
  • 方式一：Android Studio —> Tools
  • 方式二：~/Library/Android/sdk/tools（对应的android目录下）
• 使用GenyMotion模拟器
  • 官网:genymotion.com/下载安装使用

6.Xcode简介与使用注意点

• IOS平台的开发打包工具
• 只能在mac平台下使用
• 如果你需要打包发布(指发布到App Store)，系统和Xcode就不要安装beta版本（因为beta版本打包的项目有时发布不到APP Store上）
• 需要修改ionic项目目录的权限用于打包和发布chmod -R 777 目录名

7.Ionic使用的TypeScript语言简介

• 官网：typescriptlang.org/
• TypeScript 包含 ES6 包含 ES5