0
点赞
收藏
分享

微信扫一扫

实战使用Axure设计App,使用WebStorm开发(2)

Ionic是什么? Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。

 系列文章

实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 

实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目  

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端



Ionic是什么? Ionic是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。


Ionic 在发布了1.0版本以后,被越来越多的关注和支持,社区也十分的活跃。本文将继续上篇,使用Ionic 框架来开发应用。  


1. 首先安装NodeJs:​​https://nodejs.org/​​ 在NodeJs 网站上找到自己平台的安装包,执行安装即可。


2. 安装 Ionic:​​http://www.ionicframework.com/getting-started/​​ 执行命令。

npm install -g cordova ionic


在Mac下安装的时候,可能会出现没有权限的问题。提升权限执行 sudo 即可:

sudo npm install -g cordova ionic


Ionic 有三种默认项目模板:

i). blank –> 空工程模板,

ii). tabs -> 分页Tabs工程模板

iii). sidemenu -> 左边菜单工程模板


实战使用Axure设计App,使用WebStorm开发(2)_ios



3. 使用 ionic start DeliveryApp blank 创建这个 App应用,DeliveryApp 是咱们这个实例的项目名称。

ionic start DeliveryApp blank 


实战使用Axure设计App,使用WebStorm开发(2)_开发框架_02



4. 运行 ionic serve 看一下在网页中的模拟效果。 

ionic serve


实战使用Axure设计App,使用WebStorm开发(2)_开发框架_03



5. 给这个应用添加发布平台,这里添加了 android 平台和 ios 平台。

cordova platform add android


实战使用Axure设计App,使用WebStorm开发(2)_android_04


cordova emulate android


实战使用Axure设计App,使用WebStorm开发(2)_ios_05


cordova platform add ios


实战使用Axure设计App,使用WebStorm开发(2)_开发框架_06


ionic emulate ios


实战使用Axure设计App,使用WebStorm开发(2)_android_07


到这里 ionic 就搭建完成了。 下一步下载 WebStorm,使用WebStorm作为开发的IDE吧。


6. WebStorm 开发环境

WebStorm下载地址:​​https://www.jetbrains.com/webstorm/​​ 下载并安装 WebStorm 安装完成后,使用 WebStorm 打开文件夹 DeliverApp。

实战使用Axure设计App,使用WebStorm开发(2)_android_08


截止到现在基于 ionic 的工程搭建好了,开发需要使用的 WebStorm 弄好了。下篇我们可以开始按照 Axure 里的需求开发每个页面了。(本文最终完成的工程代码会放在 github上)



举报

相关推荐

0 条评论