ionic 开发实例
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 开发实例的更多相关文章
- 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容
没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...
- 《Ionic 2 实例开发》发布
Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- ecshop二次开发 给商品添加自定义字段【包含我自己进一步的开发实例详解】
本文包含商品自定义添加教程及进一步的开发实例: 教程: 说起自定义字段,我想很多的朋友像我一样会想起一些开源的CMS(比如Dedecms.Phpcms.帝国)等,他们是可以在后台直接添加自定义字段的. ...
- RDIFramework.NET -.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(WebForm版)
RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(WebForm版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之 ...
- RDIFramework.NET-.NET快速信息化系统开发整合框架 【开发实例 EasyUI】之产品管理(MVC版)
RDIFramework.NET—.NET快速开发整合框架 [开发实例]之产品管理(MVC版) 接上篇:RDIFramework.NET (.NET快速信息化系统开发整合框架) [开发实例]之产品管理 ...
- Ionic开发实战
转自:http://blog.csdn.net/i348018533/article/details/47258449/ 折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此 ...
- Cocos2d-x 3.X手游开发实例详解
Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...
- Ionic 开发环境搭建
android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technet ...
随机推荐
- 在正文部分操作accordion内容展开和闭合
$('#accordionid').accordion("select",0); //展开第一个title $('#accordionid').accord ...
- 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, ...
- php添加数据库转义特殊字符串
addslashes()
- python的subprocess基本
先在同一个文件夹下创建两个.py文件. 第一个:13.py # -*- coding: utf-8 -*- __author__ = "YuDian" ''' multiproce ...
- uni-app 下拉至指定高度固定view
uni.createSelectorQuery().select(‘#salyt’).boundingClientRect(function(rects){ console.log(rects) va ...
- 20155236 《Java程序设计》实验五(网络编程与安全)实验报告
20155236 <Java程序设计>实验五(网络编程与安全)实验报告 一.实验内容及步骤 任务一: 编写MyBC.java实现中缀表达式转后缀表达式的功能 编写MyDC.java实现从上 ...
- 20155315 2016-2017-2 实验二《Java面向对象程序设计》实验报告
实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 实验知识点 1.参考Intellj I ...
- 20155337 2016-2017-2 《Java程序设计》第一周学习总结
20155337 2016-2017-2 <Java程序设计>第一周学习总结 教材学习内容总结 我们主要学习的是JAVA SE平台也就是标准平台-Java SE四个组成部分:JVM .JR ...
- C#基础之接口
对于接口一直以来都清楚自己理解的不深入,这两天重温以前的代码时更加发现对接口的理解仅仅限于定义而已,得好好学学接口了. 1.接口的特点 接口的定义是指定一组函数成员而不实现成员的引用类型,其它类型和接 ...
- 任务队列和异步接口的正确打开方式(.NET Core版本)
任务队列和异步接口的正确打开方式 什么是异步接口? Asynchronous Operations Certain types of operations might require processi ...