ionic3 入门【1】创建Ionic项目及基本配置

深碍√TFBOYSˉ_ 2022-06-03 09:49 495阅读 0赞

制作手机app基本配置

要创建Ionic项目，您需要安装最新版本的CLI和Cordova。

npm install -g ionic cordova  
完成之后，创建第一个Ionic应用程序：  
ionic start MyIonicProject tabs|sidemenu|blank|super|tutorial  
start 会告诉CLI创建一个新的应用程序。  
MyIonicProject 将是您的项目中的目录名称和应用程序名称。  
  tabs ：一个简单的3选项卡布局  
  sidemenu：侧面有一个可滑动菜单的布局  
  blank：一个简单的初始页面  
  super：超过14个准备使用页面设计的入门项目  
  tutorial：引导式启动项目  
  
在浏览器中查看应用程序:  
cd MyIonicProject/ \----cd进入创建的文件夹  
ionic serve \----在浏览器中测试应用程序  
  
  
项目结构：  
node\_modules \----node各类依赖包  
resources \----android/ios 资源（更换图标和启动动画）  
src \----开发工作目录，页面、样式、脚本和图片都放在这个目录下  
  app \----应用根目录  
  assets \----资源目录（静态文件（图片，js框架。。。）  
  pages \----页面文件，放置编写的页面文件，包括：html，scss，ts  
  theme \----主题文件，里面有一个scss文件，设置主题信息。  
  index.html \----入口文件  
  manifest.json  
  service-worker.js  
www \----静态文件  
config.xml \----配置文件  
ionic.config.json  
ionic.starter.json  
package.json \----node安装模块时的依据  
package-lock.json  
tsconfig.json \----TypeScript项目的根目录，指定用来编译这个项目的根文件和编译选项  
tslint.json \----格式化和校验typescript  
  
  
添加iOS项目：  
 ionic cordova platform add ios  
把src里的内容同步到ios项目中(src后面会讲到)  
 ionic cordova build ios  
运行iOS项目,相当于在Xcode里面按Command+R  
 ionic cordova emulate ios  
添加android项目  
 ionic cordova platform add android  
 ionic cordova build android  
 ionic cordova emulate android  
  
  
修改 Tabs，让目录结构清晰----  
1. 修改src/pages/tabs/tabs.html

<ion-tabs>
      <ion-tab *ngFor="let tabRoot of tabRoots" [root]="tabRoot.root" tabTitle="{
       {tabRoot.tabTitle}}" tabIcon="{
       {tabRoot.tabIcon}}"></ion-tab>
    </ion-tabs>

2. 打开 Tabs.ts，修改为如下代码：  
\-------内容-----

import { Component } from '@angular/core';
    
    import { AboutPage } from '../about/about';
    import { ContactPage } from '../contact/contact';
    import { HomePage } from '../home/home';
    
    @Component({
      templateUrl: 'tabs.html'
    })
    export class TabsPage {
      tabRoots: Object[];
    
      constructor() {
        this.tabRoots = [
          {
            root: HomePage,
            tabTitle: 'Home',
            tabIcon: 'home'
          },
          {
            root: ContactPage,
            tabTitle: 'Contact',
            tabIcon: 'notifications'
          },
          {
            root: AboutPage,
            tabTitle: 'About',
            tabIcon: 'document'
          }
        ];
      }
    }

\------------