关于 Ionic
Ionic 是基于 HTML5 与 AngularJs 的一个开发框架。Ionic 更多的是是基于 WebView 的开发模式,因为其本身提供了一系列的前端控件与 JS 控件。更多的详情可以查看:Ionic 官网(相关的教程可以 Google,中文教程还是比较多的,不过其实也不大需要教程,嘿嘿)
与 React Native 的对比
- React Native 是基于 Native 实现的,Ionic 依然还是 Hybrid 模式。
- React Native 基于 JSX 的,而 Ionic 则基于 AngularJs。
- React Native 目前只支持 Mac 的开发环境(傲娇脸),React Native for Android 是9月15号发布的,相对来说,Ionic 对开发环境的支持更加丰富,但是 React Native 的社区更加庞大,所以……我们还是先了解 Ionic 吧。
Ionic 入门
安装 Ionic
- Ionic 是基于 NodeJS 的,所以要使用的话,需要安装 NodeJs,安装包请从官网下载。
- 安装完 node 后在控制台执行:
npm install -g cordova ionic
安装过程需要从网络下载大量的数据,安装过程可能比较慢,请耐心等候。
如果安装过程中出现错误,可以尝试通过管理员运行来安装。
运行 Ionic
Ionic 支持了 Android 与 iOS 平台的开发。初始化工程需要在控制台执行如下命令:
ionic start myApp tabs
该命令会下载相应的数据,用于初始化工程,生成工程目录:
- myApp 是对应的工程名称,生成目录的根目录名称。
- tabs 是生成工程的类型,根据官网的资料 Ionic 提供了tabs
,blank
,sidemenu
这三种类型。对应的效果。
blank
tabs
sidemenu
以下命令来运行工程。
cd myApp
ionic platform add android // 添加平台相应的数据
ionic build android //创建工程
ionic emulate android //打开模拟器
要创建 Android 工程需要配置环境变量:ANDROID_HOME!!!
开发环境搭建
编辑器
推荐 Github 官方开发的 Atom
- 软件安装与相关插件推荐
API
官网提供了详细的教程供大家学习,请自行访问官网。其实 Ionic 这个方案更多的是对这些控件的使用。而官网的文档还是比较给力的,所以大家通过官网来学习就可以了,因为常用的控件就那几个。
- CSS 控件
- JS 控件
相应知识储备
Ionic 属于新事物,所以学习它你需要了解这些东西。。。
HTML、CSS
Ionic 框架封装比较完整,我们使用的时候,可以像编写 Android 中的 Layout 那样来开发。不过有些地方还是需要了解 HTML 相应的知识。
AngularJS
Ionic 是基于 AngularJS 实现的,所以要使用的话,需要学习 AngularJS。
- 官网
- 中文教程
Thanks For Visit
David Lin