ionic 开发实例

一、ionic初始化项目

1:安装ionic

npm install -g ionic

2:初始化项目框架

我们可以用命令创建一个应用程序,可以使用我们的一个现成的应用程序模板,或一个空白模板。 传送门

ionic start myApp tabs

3:运行

进入项目文件夹,运行项目

cd ionicDemo
ionic serve

4:页面实测

运行在localhost:8100。谷歌浏览器中我们切换机型可以看到不同的样式。 这是因为在network下的localhost请求里,有User-Agent识别不同的设备。

二、使用ionic Lab进行开发和测试

可以在windows环境下进行图形界面开发(Create, build, test, and deploy Ionic apps) 下载地址   百度云分享

三、ionic 基础概念

1:项目结构介绍

app文件夹: 项目的编码文件。

node_modules: npm管理的依赖包。

resources: app的图标和启动图片。

plugins: 插件包(可在ionic Lab中点击安装)。

www: 编译好可在浏览器运行的文件。

config.xml: 项目全局配置。

四、ionic组件

1:ionic页面生命周期(常用)  官网文档

Event Desc
ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次,如果被缓存了,那么下次再打开这个页面则不会触发
ionViewWillEnter 顾名思义,当将要进入页面时触发
ionViewDidEnter 当进入页面时触发
ionViewWillLeave 当将要从页面离开时触发
ionViewDidLeave 离开页面时触发
ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发

ionic 开发实例的更多相关文章

  1. 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容

    没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...

  2. 《Ionic 2 实例开发》发布

    Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...

  3. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

  4. ecshop二次开发 给商品添加自定义字段【包含我自己进一步的开发实例详解】

    本文包含商品自定义添加教程及进一步的开发实例: 教程: 说起自定义字段,我想很多的朋友像我一样会想起一些开源的CMS(比如Dedecms.Phpcms.帝国)等,他们是可以在后台直接添加自定义字段的. ...

  5. RDIFramework.NET -.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(WebForm版)

    RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(WebForm版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之 ...

  6. RDIFramework.NET-.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(MVC版)

    RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(MVC版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之产品管理 ...

  7. Ionic开发实战

    转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此 ...

  8. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

  9. Ionic 开发环境搭建

    android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technet ...

随机推荐

  1. 在正文部分操作accordion内容展开和闭合

    $('#accordionid').accordion("select",0);             //展开第一个title $('#accordionid').accord ...

  2. 1006.Sign in and Sign out(25)—PAT 甲级

    At the beginning of every day, the first person who signs in the computer room will unlock the door, ...

  3. php添加数据库转义特殊字符串

    addslashes()

  4. python的subprocess基本

    先在同一个文件夹下创建两个.py文件. 第一个:13.py # -*- coding: utf-8 -*- __author__ = "YuDian" ''' multiproce ...

  5. uni-app 下拉至指定高度固定view

    uni.createSelectorQuery().select(‘#salyt’).boundingClientRect(function(rects){ console.log(rects) va ...

  6. 20155236 《Java程序设计》实验五(网络编程与安全)实验报告

    20155236 <Java程序设计>实验五(网络编程与安全)实验报告 一.实验内容及步骤 任务一: 编写MyBC.java实现中缀表达式转后缀表达式的功能 编写MyDC.java实现从上 ...

  7. 20155315 2016-2017-2 实验二《Java面向对象程序设计》实验报告

    实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验知识点 1.参考Intellj I ...

  8. 20155337 2016-2017-2 《Java程序设计》第一周学习总结

    20155337 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 我们主要学习的是JAVA SE平台也就是标准平台-Java SE四个组成部分:JVM .JR ...

  9. C#基础之接口

    对于接口一直以来都清楚自己理解的不深入,这两天重温以前的代码时更加发现对接口的理解仅仅限于定义而已,得好好学学接口了. 1.接口的特点 接口的定义是指定一组函数成员而不实现成员的引用类型,其它类型和接 ...

  10. 任务队列和异步接口的正确打开方式(.NET Core版本)

    任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...