如何用ionicframework进行混合移动应用开发

ionicframework是一个开源框架，用于html5混合型移动app开发,ionic基于html5和angularjs，使得它非常容易打造绚丽的、交互式的混合型移动应用程序。

本文就如何在mac下使用ionicframework进行混合移动应用开发做讲解。

工具/原料

mac

nodejs

cordova

ionic

方法/步骤

1：进行以下操作前请确保电脑已经安装了nodejs。

2：安装ioniccli

打开mac的终端（terminal），输入：

sudo npm install -g ionic

回车后输入mac的用户密码，就可以把ionic cli安装到全局位置

安装命令与安装结果如下：

3：安装cordova

在终端中输入：

sudo npm install -g cordova

把cordova 安装到全局位置

安装命令与安装结果如下：

4：安装ios真机调试

在终端中输入：

sudo npm install -g ios-deploy

这样就可以使用ionic 命令进行ios真机调试了。

安装命令与安装结果如下：

方法/步骤2

1：新建一个项目

在终端中输入：

ionic start myfirstapp sidemenu

其中“myfirstapp”是我们的项目的名称，"sidemenu"是项目模板，其中可用的模板还有:

blank ................ a blank starter project for ionic

complex-list ......... a complex list starter template

map................. an ionic starter project using google mapand a side menu

salesforce ........... a starter project for ionic and salesforce

sidemenu ............. a starting project for ionic using a side menu with navigation in the content area

tab................. a starting project for ionic using a simple tabbed interface

test................ a test of different kindof page navigation

执行命令与执行结果如下：

2：项目结构截图如下：

3：打开终端，cd到项目根目录下：

输入：ionic platform add android

添加一个android平台。

执行命令与执行结果如下：

4：在网页中预览刚才的项目：

在终端中输入：

ionic serve

如下截图表示已经成功在本地开启了预览。

执行命令与执行结果如下：

5：打开浏览器在浏览器地址里输入上面的地址：

http://localhost:8100

一个新的项目就这么简单的新建好了。

在终端中输入q会停止服务

预览截图如下：

6：安装到iphone中运行

在终端中输入：

ionic build ios

然后输入：

ionic run --emulate ios

会自动打开iphone模拟器并进行安装。

执行命令与执行结果如下：

7：安装到android设备或模拟器上同样类似的方法：

先把安卓设备连接到电脑上

先输入:

ionic build android

然后输入：

ionic run --device android

这样会安装到真机上

或者输入：

ionic run --emulate android

这样会安装到android自带模拟器上。

注意事项

android开发需要配置 android开发环境

ios开发需要配置 ios开发环境

希望本文【ionicframework】如何用ionicframework进行混合移动应用开发能帮到你。