Ionic学习记录(一):ionic及cordova安装、创建第一个应用、项目结构

目录:

一、ionic的安装

二、创建第一个应用程序

三、浏览器中预览应用

四、项目结构

五、添加页面

 


 

 

一、ionic的安装

使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI”),并使用Cordova构建和部署为本机应用程序。

CLI:command-line interface的缩写,命令行界面,是指可在用户提示符下键入可执行指令的界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。

Cordova:是从PhoneGap中抽出的核心代码,是贡献给Apache后的开源移动开发框架,是驱动PhoneGap的核心引擎。使用它您可以使用web技术(html、css、JavaScript)来进行跨平台的开发,可针对不同的运行平台构建对应的应用程序,同时提供了一组API,使我们开发的应用可以来访问设备的功能,如摄像头、麦克风、传感器、数据、网络状态等。

 

具体安装如下:

1. 首先我们需要先安装Node.js和NPM

下载 Node.js 6或更高版本的安装程序,下载好后双击下载的pkg包默认安装即可。在dos命令行 或者 git 命令行中,可分别输入以下内容查看npm和node的版本号

1 // 查看node版本
2 node –v

4 // 查看npm版本
5 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 

 1 <!DOCTYPE html>
 2 <html lang="en" dir="ltr">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title>Ionic App</title>
 7         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 8         <meta name="format-detection" content="telephone=no">
 9         <meta name="msapplication-tap-highlight" content="no">
10 
11         <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
12         <link rel="manifest" href="manifest.json">
13         <meta name="theme-color" content="#4e8ef7">
14 
15         <!--cordova.js的引用让我们可以使用Cordova创建应用(将应用打包为native应用,可以提交到App Store) -->
16         <script src="cordova.js"></script>
17 
18         <!-- un-comment this code to enable service worker
19   <script>
20     if ('serviceWorker' in navigator) {
21       navigator.serviceWorker.register('service-worker.js')
22         .then(() => console.log('service worker installed'))
23         .catch(err => console.error('Error', err));
24     }
25   </script>-->
26 
27         <link href="build/main.css" rel="stylesheet">
28 
29     </head>
30 
31     <body>
32 
33         <!--Ionic的根组件,同时也是app启动的地方-->
34         <ion-app></ion-app>
35 
36 
37 
38         <!--polyfills.js是在程序构建过程中生成的,是为浏览器某些特点功能生成的基本补丁-->
39         <script src="build/polyfills.js"></script>
40 
41         <!-- vendor.js 是在程序构建过程中生成的,它包含了node_modules所有的依赖项 -->
42         <script src="build/vendor.js"></script>
43 
44         <!--我们应用绑定的代码,一个包含Ionic,Angular和您的应用程序JavaScript的连接文件-->
45         <script src="build/main.js"></script>
46 
47     </body>
48 
49 </html>

./src/

src目录的内部,我们找到我们原始的,未编译的代码。这就是Ionic应用程序的大部分工作。当我们运行ionic serve,我们的代码里面src/transpiled到浏览器理解正确的JavaScript版本(目前,ES5)。这意味着我们可以使用TypeScript在较高级别工作,但是可以编译成浏览器需要的较早版本的Javascript。

 

src/app/app.module.ts是我们的应用程序的切入点

 1 @NgModule({
 2   //创建的所有页面需添加到declarations数组 和 entryComponents数组
 3   //所有自定义的组件或pipes需添加到declarations数组
 4   declarations: [MyApp,HelloIonicPage, ItemDetailsPage, ListPage],
 5   
 6   imports: [ BrowserModule, IonicModule.forRoot(MyApp)],
 7   
 8   //每一个app都有一个用来引导其他程序的根组件,这和ionic/Angular 1中的ng-app很相似
 9   //引导app程序的地方
10   bootstrap: [IonicApp],
11   
12   // 创建的所有页面需添加到declarations数组 和 entryComponents数组
13   entryComponents: [MyApp,HelloIonicPage,ItemDetailsPage,ListPage],
14   
15   
16   //所有的服务需添加到 provider 数组
17   providers: []
18 })
19 export class AppModule {}

 

五、添加页面

 

posted @ 2017-08-18 15:33  沉着前进  阅读(926)  评论(0编辑  收藏  举报