简介

  1.     ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。<br />ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。<br />ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

一、安装jdk

flutter
配置环境变量

1.JAVA_HOME
   C:\Program Files\Java\jdk1.8.0_191
2.CLASSPATH:
C:\Program Files\Java\jdk1.8.0_191 /bin
3.path:
C:\Program Files\Java\jdk1.8.0_191 /bin

------命令行
javac： 命令行输入javac有输出就表示安装成功

二、android 开发环境

放置文件夹sdk

1、ANDROID_HOME
//C:\Users\86155\AppData\Local\Android\Sdk
2. Path
//C:\Users\86155\AppData\Local\Android\Sdk\platforms
// C:\Users\86155\AppData\Local\Android\Sdk\platform-tools

//adb      命令行中输出adb就表示android开发环境配置成功

三、gradle配置

压缩文件：gradle 解压缩放置C盘根目录下

https://gradle.org/releades/

配置环境变量

1.Path:
//C:\gradle_5.4.1\bin
2.系统变量
GRADLE_HOME
//C:\gradle_5.4.1
-----命令行
gradle -v

四、安装ionic

----命令行
nom install -g ionic cordova
----ionic -v      
----cordova -v

报错解决方式 卸载node.js 重新安装

五、简单项目

image.png

5-1 创建项目

ionic start myApp tabs

1、启动             ionic serve

2、打包(web)        ionic cordova build browser --prod      （y）
   全局安装安装包    npm i server -g 
   检查安装包        serve --version
   启动访问网页      serve -s www

3、打包成apk
   ionic platform add Android
   ionic cordova platform add android 
   打包成apk
   ionic cordova build android

5-2 配置新的路由模块页面

ionic g page views/detail

5-2 使用ion组件

https://ionicframework.com/docs/components
图标：https://ionicons.com/

//  tab1.page.html
<ion-content>
  <ion-button color="danger"     //颜色为danger
  [routerLink]="['/detail']"     // 跳转到detail页面
  >button</ion-button>
</ion-content>

//  detail.page.html
<ion-header>
  <ion-toolbar>
    <ion-buttons
    text="返回"
    slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>detail</ion-title>
  </ion-toolbar>
</ion-header>

5-3 配置底部路由导航

1、新增模块  ionic g page tab4
2、删除自动配置的路由 app-routing.module.ts   
     {
        path: 'tab4',
        loadChildren: () => import('./tab4/tab4.module').then( m => m.Tab4PageModule)
      }
3、增加底部路由 tabs-routing.module.ts
    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          ...
          {
            path: 'tab4',
            children: [
              {
                path: '',
                loadChildren: () =>
                  import('../tab4/tab4.module').then(m => m.Tab4PageModule)
              }
            ]
          }, 
        ]
      },
    ];

4、增加底部导航 tabs.page.html
    <ion-tab-bar>
    ...
      <ion-tab-button tab="tab4" >
        <ion-icon name="logo-octocat"></ion-icon>
        <ion-label>Tab four</ion-label>
      </ion-tab-button>
    </ion-tab-bar>