ionic 为创建混合应用提供了一整套工具,比如一些常用的界面组件,JavaScript,可以跟 AngularJS 很好的结合在一起,你可以使用 HTML,CSS,还有 JavaScript 创建应用,然后你可以使用 ionic 提供的工具再把应用编译成可以在移动设备上安装的 App 。
下面我们去安装一下 ionic ,然后再用现成的模板创建一个 App 。打开命令行工具 .. 输入:
npm install -g cordova ionic
安装一下 cordova 还有 ionic 命令行工具 .. cordova 也是一个开源的项目,它提供了一个 JavaScript API ,通过这些 API 你可以直接访问移动设备上的功能,比如手机的相册,通讯录,相机等等。 我们在 PhoneGap 的课程里介绍过这个工具。
完成以后进入到某个目录的下面 .. 再去创建一个 ionic 的应用。 输入 ionic start ,后面是应用的名字 ... myApp ,然后可以再用一个模板 .. sidemenu 是一个模板的名字 ..
ionic start myApp sidemenu
完成以后进入到这个应用的目录的下面 .. 再去启动一下 ..
ionic serve
这样会用默认的浏览器打开这个应用 .. 点击这个列表里的项目,可以打开一个新的页面 .. 返回 ... 再点一下这个汉堡包图标 .. 会打开一个边栏菜单 ... 在这里的项目可以打开对应的页面 ... 比如这个 Login ... 会打开一个登录页面 ..
再回到终端,新建一个标签 .. 用编辑器打开这个项目 .. 在这里你可以编辑应用的代码 ... 保存会在浏览器上实时的显示项目的变化 ..
再回到终端 .. 先停止一下 ..
我们可以给应用添加一个平台,可以是 ios ,也可以是 Android ... 也就是你想让这个应用可以运行在什么平台上,就需要去添加对这个平台的支持..
ionic platform add ios
添加一个 ios 平台 .. 然后再编译一下 ..
ionic build ios
下面可以使用 ios 设备的模拟器打开这个应用 ... 这里我们需要先去安装一下 ios-sim 这个小工具 .. 可以使用 Homebrew 去安装它 ..
brew install ios-sim
完成以后再输入:
ionic emulate ios
这样会用 ios 模拟器打开这个编译好的应用 ...