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

 系列文章

实战使用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 -> 左边菜单工程模板

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

ionic start DeliveryApp blank

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

ionic serve

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

cordova platform add android

cordova emulate android

cordova platform add ios

ionic emulate ios

到这里 ionic 就搭建完成了。 下一步下载 WebStorm,使用WebStorm作为开发的IDE吧。 6. WebStorm 开发环境 WebStorm下载地址:https://www.jetbrains.com/webstorm/ 下载并安装 WebStorm 安装完成后,使用 WebStorm 打开文件夹 DeliverApp。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PHP技术大全

使用PHP辅助 快速制作一套自己的手写字体实践

笔者以前在网上看到有民间高手制作字体的相关事迹,觉得把自己的手写字用键盘敲出来是一件很有意思的事情,所以一直有时间想制作一套自己的手写体,前几天在网上搜索了一下...

1503
来自专栏mwangblog

git标签

1373
来自专栏企鹅号快讯

小程序开发的40个技术窍门,纯干货!

微信小程序正式上线一周时间,相关话题持续升温。现在为大家筛选出小程序开发实战需要注意的40个技术点,供大家参考! ? 小程序开发的40个技术窍门 1 Q:为什么...

24810
来自专栏WindCoder

Ubuntu14.04下使用fcitx安装搜狗及双拼输入法

之前Ubuntu打不开了,重新装了一遍,顺便把一些东西直接记录下来,省得日后再四处爪哇。。。

3423
来自专栏娱乐心理测试

xcode 9以后导入图片遇到显示不出的问题

1792
来自专栏前端大白专栏

基于mpvue开发微信小程序,vue能用的,用mpvue哪些情况不能用

3407
来自专栏weixuqin 的专栏

sublime下让代码居中

37513
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用①简单使用)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3178
来自专栏林德熙的博客

win10 uwp 读写csv 使用库 Chilkat

CSV是一种通用的、相对简单的文件格式,被用户、商业和科学广泛应用。最广泛的应用是在程序之间转移表格数据,而这些程序本身是在不兼容的格式上进行操作的(往往是私有...

1211
来自专栏DannyHoo的专栏

底牌项目中的上传牌谱功能之将视图生成图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1032

扫码关注云+社区