ionic入门01

总述


　　　　ionic是一个强大的混合式/hybrid HTML5移动开发框架，特点是使用标准的HTML、CSS和JavaScript，开发跨平台的应用。

　　接下来，敝人会从0到1采用ionic构建一个简单的应用，希望和大家一起学习该技术...

　　（来自http://www.ionic.wang/）

　　 


写在前面

　　为什么选择该技术

　　　　从web视角开发移动端app应用，一份源码可以打包成ios和android应用

　　阅读对象要求：

　　　　理解h5、css3、js

案例展示

　　

　　

　　

搭建开发环境

　　　　1、安装node(node官网会根据你的计算机操作系统类型，引导你选择合适的版本)并配置环境变量（这个类似jdk）

　　检查node是否安装成功

　　

　　安装完node同时会安装npm（在web开发中，npm是很重要的）

2、安装jdk和android sdk(具体安装请自行寻找，下面给出我机子所安装的版本)

　　 

3、安装ionic和cordova

　　

4、创建ionic项目

　　 

5、运行ionic应用（在ios平台上；如果是android平台则把下面的ios改为android即可）

6、运行ionic应用（浏览器）

　　 

效果图：

　　 

7、至此你已经成功搭建一个ionic项目了

更多案例：

来自http://www.ionic.wang/

　　 

交流和学习

如有纰漏，请斧正，应用请注明出处...（未完待续）

时间： 2024-08-08 03:49:24

ionic入门01的相关文章

ionic入门之色彩、图标、边距和界面组件：列表

转载声明,本文章来自http://cnodejs.org/topic/551b516c33e515e67640631e 目录: 色彩.图标和边距 色彩 图标 内边距 界面组件:列表 列表:.list 成员容器:.item .item: 嵌入文本 .item : 嵌入图标 .item : 嵌入头像 .item : 嵌入缩略图 .item : 嵌入大图 色彩 ionic定义了九种前景/背景/边框的色彩样式,: 可以在任何元素上使用这些样式设置前景和背景颜色: <any class="posit

JavaScript基础入门 - 01

JavaScript入门 - 01 准备工作 在正式的学习JavaScript之前,我们先来学习一些小工具,帮助我们更好的学习和理解后面的内容. js代码位置 首先是如何编写JavaScript代码,说到这,我们首先要来说明一个需要新人们关注的点,因为我们的js是一门跨平台的语言,所以说,我们的代码可以运行在不同的平台之上.这也就导致了可能相同的代码放在不同的平台运行就会有所出入. 这里面说的平台其实被称之为宿主环境. 同时,代码在不同的平台上的运行方式也有所不同. 如果运行在服务端,那么更多的

ionic入门教程第十一课-简要说明ion-list、ion-item完成列表页ion-infinite-scroll上拉加载ion-refresher下拉刷新

发了十篇教程,现在向我问问题的朋友越来越少了.可能我接触到的学习ionic的就这么些人吧! 可能大家已经觉得我写的东西都太过基础了,没什么值得参考借鉴的地方. 开始有人叫我说直接防类似饿了吗,折八百这样的网站,做一个Demo. 其实我也知道有些朋友就想要这种网上的免费劳动力. 但是其实这个建议还是不错的. 等我把现在这个demo讲完,我可能会考虑找一个成熟的上线的项目进行说明. 这个列表页一说,写完这个的朋友就可以尝试着接手项目了. 我不是说ionic简单,内容少. 我只是说我这些时间里面提到的

ionic入门篇（一）[了解]与[头部、底部、副标题]

一].ionic了解:是什么?1.强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )2.构建接近原生体验的移动应用程序.3.注重外观.体验.交互4.轻量.速度快5.不支持IOS6和Android4.1以下的版本 特点:1.基于Angular语法2.轻量级.简单3.融合下一代移动框架,支持Angular.js特性,MVC,代码易维护4.漂亮.SASS.UI组件多5.原生性强6.ionic提供了强大的命令行工具7.性能优越,运行速度快 ion

ionic 入门学习

我用的环境是visual studio Code和node.js 安装包网盘: node.js链接:http://pan.baidu.com/s/1o8a64qQ 密码:7uec visual studio Code链接:http://pan.baidu.com/s/1cxV8ZG 密码:i6r9 配置环境: npm install -g ionic npm install -g cordova 创建目录:在Windows powershell输入:cd D: mkdir workspace c

动态规划入门-01背包问题 - poj3624

2017-08-12 18:50:13 writer:pprp 对于最基础的动态规划01背包问题,都花了我好长时间去理解: poj3624是一个最基本的01背包问题: 题意:给你N个物品,给你一个容量为M的背包 给你每个物品的重量,Wi 给你每个物品的价值,Di 求解在该容量下的物品最高价值? 分析: 状态: dp[i][j] = a 剩下i件 当前容量为j的情况下的最大价值为a 如果用 i 来枚举物品编号, 用 j 来枚举重量,那么 if ( j is from 1 to weight[i]

Lua for Windows入门01

由于项目紧急,我都没来得及研究lua的基本知识就直接持枪上阵了.在实施编写的过程中,却次发现编程语言如此之美,第一次. 随着Lua+for+Windows+5.1.4-45版本的完全安装,最后跳出了一个example浏览.这可是个入门的好机会,赶紧另开一个lua.cmd 依葫芦画瓢写一遍.  有一些与c不一样的地方,现把所学及感受归纳如下: 1.if 后要 then 完了还要end: if then elseif then else end; function f end; f=funciton

springMVC入门-01

这一系列是在看完网上SpringMVC(基于spring3.0)入门视频之后的个人总结,仅供参考,其中会添加一些个人的见解. 1.搭建SpringMVC所需jar包: org.springframework.aop-3.1.3.RELEASE.jarorg.springframework.asm-3.1.3.RELEASE.jarorg.springframework.aspects-3.1.3.RELEASE.jarorg.springframework.beans-3.1.3.RELEASE

ionic入门教程-ionic路由详解（state、route、resolve）(转)

http://blog.csdn.net/onil_chen/article/details/51758696?appinstall=0 今天好好的跟大家讲讲ionic的路由配置. 问到的朋友有点多,因为这个内容比较多,所以我一直想等我多了解一些再出关于路由的教程. 但是有些很简单的也有朋友不理解,所以我就提前出了这篇教程. 希望能对大家有点帮助,关于我遗漏的部分,后面再发教程补充吧. 但是基本的内容,简单的应用,应该这篇教程里面都会提到了. 首先我们还是从tabs类型的新建项目来学习(这个项目