Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构
目录:
一、ionic的安装
使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI”),并使用Cordova构建和部署为本机应用程序。
CLI:command-line interface的缩写,命令行界面,是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。
Cordova:是从PhoneGap中抽出的核心代码,是贡献给Apache后的开源移动开发框架,是驱动PhoneGap的核心引擎。使用它您可以使用web技术(html、css、JavaScript)来进行跨平台的开发,可针对不同的运行平台构建对应的应用程序,同时提供了一组API,使我们开发的应用可以来访问设备的功能,如摄像头、麦克风、传感器、数据、网络状态等。
具体安装如下:
1. 首先我们需要先安装Node.js和NPM
下载Node.js6或更高版本的安装程序,下载好后双击下载的pkg包默认安装即可。在dos命令行 或者 git 命令行中,可分别输入以下内容查看npm和node的版本号
// 查看node版本
node –v // 查看npm版本
npm –v
2. 安装 Ionic CLI和Cordova。
- 通过 config 配置指向国内镜像源,避免国内网络安装错误,终端命令:
npm config set registry https://registry.npm.taobao.org //配置指向源 // 配置后可通过下面方式来验证是否成功
npm config get registry // 或
npm info express
- 下载后安装ionic和cordova包,终端命令:
npm install -g cordova ionic
- 安装完成后,检查是否安装成功,终端命令:
ionic -info //检查是否安装成功
ionic -angular //查看Ionic版本
根据信息提示,可对没有成功安装的包再次安装。
二、创建第一个应用程序
进入你想放应用程序的那个目录,比如我放在E盘,打开终端,输入命令
cd e:
使用ionic tutorial作为起始模板创建应用程序
ionic start myapp tutorial
命令说明:
- start 创建一个新的应用程序
- myapp 你项目的目录名称和应用程序名称
- tutorial ,ionic提供的起始模板,ionic提供了5个可用模板
tabs
:一个简单的3选项卡布局sidemenu
:侧面有可滑动菜单的布局blank
一个单独的启动器super
:启动项目超过14个可以使用的页面设计tutorial
:一个引导启动项目
说明:如果不选择起始模板 ionic start myapp ,默认将使用 tabs 作为起始模板
三、浏览器中预览应用
你创建的应用程序所在文件夹,在浏览器中预览项目
cd myapp //进入程序所在目录
ionic serve //浏览器中预览
四、项目结构
整个应用项目结构如下
src/index.html
是应用程序的主要入口点,第一个打开的文件就是 index.html
<!DOCTYPE html>
<html lang="en" dir="ltr"> <head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no"> <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7"> <!--cordova.js的引用让我们可以使用Cordova创建应用(将应用打包为native应用,可以提交到App Store) -->
<script src="cordova.js"></script> <!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>--> <link href="build/main.css" rel="stylesheet"> </head> <body> <!--Ionic的根组件,同时也是app启动的地方-->
<ion-app></ion-app> <!--polyfills.js是在程序构建过程中生成的,是为浏览器某些特点功能生成的基本补丁-->
<script src="build/polyfills.js"></script> <!-- vendor.js 是在程序构建过程中生成的,它包含了node_modules所有的依赖项 -->
<script src="build/vendor.js"></script> <!--我们应用绑定的代码,一个包含Ionic,Angular和您的应用程序JavaScript的连接文件-->
<script src="build/main.js"></script> </body> </html>
./src/
在src
目录的内部,我们找到我们原始的,未编译的代码。这就是Ionic应用程序的大部分工作。当我们运行ionic serve
,我们的代码里面src/
是transpiled到浏览器理解正确的JavaScript版本(目前,ES5)。这意味着我们可以使用TypeScript在较高级别工作,但是可以编译成浏览器需要的较早版本的Javascript。
src/app/app.module.ts是我们的应用程序的切入点
@NgModule({
//创建的所有页面需添加到declarations数组 和 entryComponents数组
//所有自定义的组件或pipes需添加到declarations数组
declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage], imports: [ BrowserModule, IonicModule.forRoot(MyApp)], //每一个app都有一个用来引导其他程序的根组件,这和ionic/Angular 1中的ng-app很相似
//引导app程序的地方
bootstrap: [IonicApp], // 创建的所有页面需添加到declarations数组 和 entryComponents数组
entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage], //所有的服务需添加到 provider 数组
providers: []
})
export class AppModule {}
五、添加页面
Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构的更多相关文章
- cordova安装--创建ionic项目
1.简介ionic ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML.CS ...
- MongoDB 学习记录(二)yum安装
前言:接着上篇继续学习MongoDB,这次学习的是在Linux下安装MongoDB 环境:centos7.3 安装版本:MongoDB4.0 官网安装教程地址 https://docs.mongodb ...
- Ionic学习记录
1.跨域问题 浏览器中的运行 当你运行 ionic serve 时发生了什么呢? 启动了一个本地 web 服务器 你的浏览器打开并定位到本地服务器地址 这让你看着你的应用加载到你电脑上一个浏览器里,地 ...
- python爬虫学习记录——各种软件/库的安装
Ubuntu18.04安装python3-pip 1.apt-get update更新源 2,ubuntu18.04默认安装了python3,但是pip没有安装,安装命令:apt install py ...
- Hadoop学习记录(6)|Eclipse安装Hadoop 插件
下载 https://skydrive.live.com/redir.aspx?cid=cf7746837803bc50&resid=CF7746837803BC50!1277&par ...
- docker学习------记录centos7.5下docker安装更换国内源的处理过程
一.centos7.5下更换阿里源 1.装好centos7.5镜像,将yum源更换为阿里源 第一步:刚出的centos7.5是解析不到阿里的东西的,所以找了台centos7.4,下载一些包 (1) 下 ...
- Python学习记录(一):Anaconda3的安装、配置与使用
简单说下为啥要创建Python虚拟环境呢? 不同的Python工程中用到的包不尽相同,相同包的版本也可能不一样,一种方法是使得各个环境相对独立. 假如说某一个环境崩了,直接remove掉就可以了,不会 ...
- 【PyQt5 学习记录】011:使用 QListWidet 创建列表
使用 QListWidet 创建列表 作者: 八月未见 博客: https://www.cnblogs.com/jmtm/ 创建列表: list_widget = QListWidget() 插入项目 ...
- .net core 2.0学习记录(一):搭建一个.Net Core网站项目
.Net Core开发可以使用Visual Studio 2017或者Visual Studio Code,下面使用Visual Studio 2017搭建一个.net Core MVC网站项目. 一 ...
随机推荐
- CAD插入jpg
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- js可以随意拖拽的div的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- php中fopen不能创建中文文件名文件的问题
之前网页的chartset用的是utf-8,文件也用utf-8,然后用fopen()创建一个中文文件名的文件时问题就出来了,文件名都是乱 码! 查看了很多文档试了不少方法都解决不了,本来想着用别的方法 ...
- 【Android】一个好用的sharedpreferences存储类方法
其实我也不知道sharedpreferences究竟安全不安全,毕竟是android中最简单的存储机制. 如果你手机root了的话,使用MT管理器到data/data/包名/shared_prefs下 ...
- HDU-5968异或密码
超级传送门 题目描述: 晨晨在纸上写了一个长度为N的非负整数序列{ai}.对于这个序列的一个连续子序列{al,al+1,…,ar}晨晨可以求出其中所有数异或的结果 alxoral+1xor...xor ...
- Python os.listdir() 方法
概述 os.listdir() 方法用于返回指定的文件夹包含的文件或文件夹的名字的列表.这个列表以字母顺序. 它不包括 '.' 和'..' 即使它在文件夹中. 只支持在 Unix, Windows 下 ...
- Silverlight之我见——数据批示(1)
第一次听到这个概念,你是否有点陌生?MSDN上也没有特意的去说明.不要看到这个名词不太熟悉,其实数据批示,玩过C#的人都会非常熟悉,所谓数据批示,其本质就是特性(Attribute),怎么样,现在有点 ...
- 198. House Robber(动态规划)
You are a professional robber planning to rob houses along a street. Each house has a certain amount ...
- 《Java JDK 8 学习笔记》序
摘录自<Java JDK 8 学习笔记> 翻开一本书,无非是想从书中得到知识,只是为何你要得到书中的知识,才是我想知道的答案,而这个答案决定了你在取得知识的过程中是否快乐! 多数人在取得知 ...
- ActiveMQ学习总结(5)——Java消息服务JMS详解
JMS: Java消息服务(Java Message Service) JMS是用于访问企业消息系统的开发商中立的API.企业消息系统可以协助应用软件通过网络进行消息交互. JMS的编程过程很简单,概 ...