Ionic Framework学习(一)

最新推荐文章于 2024-09-13 12:01:47 发布
最新推荐文章于 2024-09-13 12:01:47 发布
阅读量1.8k 收藏 4
点赞数 3
分类专栏： 前端 文章标签： Ionic 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alan_TW/article/details/88402699
版权

1.安装
(1)安装nodejs
(2)新建文件夹，shift+右键，打开命令行：npm install -g ionic
(3)Start an App:ionic start myApp tabs
(4)运行cd myApp,ionic serve

2.Packages & CDN
(1)集成Angular：npm install @ionic/angular@latest --save
(2)Using Ionic from a CDN:在<head></head>间

<script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script>
    <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet">

(3)ionicons的使用:放在页面末尾附近，</body>之前   

 <script src="https://unpkg.com/ionicons@latest/dist/ionicons.js"></script>

3.环境配置
查看nodejs和npm版本

node --version
npm --version
git --version

4.iOS 设置
(1)XCode:Xcode是用于创建本机iOS应用程序的IDE。它包括iOS SDK和Xcode命令行工具。可以使用Apple帐户免费下载 Xcode 。它也可以通过App Store安装。
(2)ios-sim和ios-deploy:该ios-sim和ios-deploy是在开发过程中的应用程序部署到了iOS模拟器和iOS设备的实用程序。它们可以在全球范围内安装NPM。
    npm install -g ios-sim
    npm install -g ios-deploy

5.Android 设置
(1)Java:Native Android apps are compiled with the Java programming language(原生Android应用程序使用Java编译语言编译).
(2)Gradle:Android应用程序使用的构建工具。
(3)Android Studio:创建Android应用程序的IDE,
(4)安装Android SDK:打开Android Studio，在SDK Components Setup屏幕中，完成SDK的安装。
(5)创建Android虚拟设备(AVD):进入Tools » AVD Manager，单击 Create Virtual Device 并选择合适的设备定义。如果不确定，选择Pixel 2 XL。然后，选择合适的系统映像。

6.Building 构建
(1)ionic start myApp tabs(\sidemenu\blank)
    myApp是项目名，tabs是启动器模板
    tabs: A tabs based layout
    sidemenu: A sidemenu based layout
    blank: An empty project with a single page
(2)查看可用的模板
ionic start --list
(3)项目结构


(4)生成新功能：ionic generate，然后选择要生成的功能。选择完成后，Ionic CLI将提示输入名称。名称可以是路径，允许在有组织的项目结构中轻松生成功能。或者，可以在命令行上输入type和name生成的和：ionic g page "User Detail"。
tip:Could not find an NgModule. Use the skip-import option to skip importing in NgModule.解决方式：进入src结构下的app下进行操作。

7.Layout 布局
(1)结构体：
①页眉和页脚布局
头：

   <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>
      
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>
    </ion-app>

页脚：    

   <ion-app>
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>    

      <ion-footer>
        <ion-toolbar>
          <ion-title>Footer</ion-title>
        </ion-toolbar>
      </ion-footer>
    </ion-app>


②标签布局   

   <ion-app>
      <ion-tabs>
        <ion-tab tab="home">
          <h1>Home Content</h1>
        </ion-tab>
        <ion-tab tab="settings">
          <h1>Settings Content</h1>
        </ion-tab>

        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="home">
            <ion-label>Home</ion-label>
            <ion-icon name="home"></ion-icon>
          </ion-tab-button>
          <ion-tab-button tab="settings">
            <ion-label>Settings</ion-label>
            <ion-icon name="settings"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
    </ion-app>


③菜单布局

<ion-app>
  <ion-menu>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-list-header>
          Navigate
        </ion-list-header>
        <ion-menu-toggle auto-hide="false">
          <ion-item button>
            <ion-icon slot="start" name='home'></ion-icon>
            <ion-label>
              Home
            </ion-label>
          </ion-item>
        </ion-menu-toggle>
      </ion-list>
    </ion-content>
  </ion-menu>

  <ion-page class="ion-page" main>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-toggle>
            <ion-button>
              <ion-icon slot="icon-only" name="menu"></ion-icon>
            </ion-button>
          </ion-menu-toggle>
        </ion-buttons>
        <ion-title>Header</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <h1>Main Content</h1>
      <p>Click the icon in the top left to toggle the menu.</p>
    </ion-content>
  </ion-page>
</ion-app>

<ion-menu-controller></ion-menu-controller>


④拆分窗格布局

<ion-app>
  <ion-split-pane when="sm">
    <ion-menu>
      <ion-header>
        <ion-toolbar color="primary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content>
        <ion-list>
          <ion-list-header>
            Navigate
          </ion-list-header>
          <ion-menu-toggle auto-hide="false">
            <ion-item button>
              <ion-icon slot="start" name='home'></ion-icon>
              <ion-label>
                Home
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-page class="ion-page" main>
      <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-menu-toggle>
              <ion-button>
                <ion-icon slot="icon-only" name="menu"></ion-icon>
              </ion-button>
            </ion-menu-toggle>
          </ion-buttons>
          <ion-title>Header</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content padding>
        <h1>Main Content</h1>
      </ion-content>
    </ion-page>

  </ion-split-pane>
</ion-app>


(2)响应式网格
①网格大小
默认情况下，网格将占用100％的宽度。要根据屏幕大小设置特定宽度，请添加fixed属性。每个断点的网格宽度在--ion-grid-width-{breakpoint}CSS变量中定义。

XS    100％    不要为xs屏幕设置网格宽度
SM    540px    设置网格宽度为540px时（最小宽度：576px）
MD    720px    （最小宽度：768px）时将网格宽度设置为720px
LG    960px    （最小宽度：992px）时将网格宽度设置为960px
XL    1140px    （最小宽度：1200px）时将网格宽度设置为1140px

②网格属性

属性           描述
no-padding     从网格和直接子列中删除填充。
fixed          根据屏幕大小设置最大宽度。

③默认断点

名称      值            宽度前缀    偏移前缀        推送前缀    拉前缀            描述
XS        0            size-        offset-    push-    pull-        （min-width：0）时设置列
SM        576px        size-sm-    offset-sm-        push-sm-    pull-sm-        设置列时（最小宽度：576px）
MD        768px        size-md-    offset-md-        push-md-    pull-md-        设置列时（最小宽度：768px）
LG        992px        size-lg-    offset-lg-        push-lg-    pull-lg-        设置列时（最小宽度：992px）
XL        1200px    size-xl-    offset-xl-        push-xl-    pull-xl-        设置列时（最小宽度：1200px）

(3)CSS实用工具
①文字对齐

.ion-text-left        text-align: left    内联内容与行框的左边缘对齐。
.ion-text-right        text-align: right    内联内容与行框的右边缘对齐。
.ion-text-start        text-align: start    一样text-left如果方向是左到右和text-right如果方向是从右到左。
.ion-text-end        text-align: end        一样text-right如果方向是左到右和text-left如果方向是从右到左。
.ion-text-center    text-align: center    内联内容在行框中居中。
.ion-text-justify    text-align: justify    内联内容是合理的。文本应该间隔开，以使其左右边缘与行框的左右边缘对齐，但最后一行除外。
.ion-text-wrap        white-space: normal    空白的序列被折叠。源中的换行符作为其他空格处理。根据需要打破行以填充行框。
.ion-text-nowrap    white-space: nowrap    折叠空白normal，但抑制文本中的换行符（文本换行）。

②文字转换

.ion-text-uppercase        text-transform: uppercase    强制将所有字符转换为大写。
.ion-text-lowercase        text-transform: lowercase    强制将所有字符转换为小写。
.ion-text-capitalize    text-transform: capitalize    强制将每个单词的第一个字母转换为大写。

③响应文本类

.ion-text-{modifier}    将修改器应用于所有屏幕尺寸的元素。
.ion-text-sm-{modifier}    在何时将修改器应用于元素min-width: 576px。
.ion-text-md-{modifier}    在何时将修改器应用于元素min-width: 768px。
.ion-text-lg-{modifier}    在何时将修改器应用于元素min-width: 992px。
.ion-text-xl-{modifier}    在何时将修改器应用于元素min-width: 1200px。

④浮动元素

类                    风格规则                    描述
.ion-float-left        float: left                    该元素将浮动在其包含块的左侧。
.ion-float-right    float: right                元素将浮动在其包含块的右侧。
.ion-float-start    float: left / float: right    一样float-left如果方向是左到右和float-right如果方向是从右到左。
.ion-float-end        float: left / float: right    一样float-right如果方向是左到右和float-left如果方向是从右到左。

⑤响应式浮动

.ion-float-{modifier}        将修改器应用于所有屏幕尺寸的元素。
.ion-float-sm-{modifier}    在何时将修改器应用于元素min-width: 576px。
.ion-float-md-{modifier}    在何时将修改器应用于元素min-width: 768px。
.ion-float-lg-{modifier}    在何时将修改器应用于元素min-width: 992px。
.ion-float-xl-{modifier}    在何时将修改器应用于元素min-width: 1200px。

⑥显示元素

.ion-hide    display: none    该元素将被隐藏。

⑦响应式显示元素

.ion-hide-sm-{dir}    在min-width: 576px（up）或max-width: 576px（down）时将修饰符应用于元素。
.ion-hide-md-{dir}    在min-width: 768px（up）或max-width: 768px（down）时将修饰符应用于元素。
.ion-hide-lg-{dir}    在min-width: 992px（up）或max-width: 992px（down）时将修饰符应用于元素。
.ion-hide-xl-{dir}    在min-width: 1200px（up）或max-width: 1200px（down）时将修饰符应用于元素。

⑧元素填充(内边距padding)

类                        风格规则                描述
.ion-padding            padding: 16px            适用于所有方面的填充。
.ion-padding-top        padding-top: 16px        将填充应用于顶部。
.ion-padding-start        padding-start: 16px        应用填充到开头。
.ion-padding-end        padding-end: 16px        将填充应用到最后。
.ion-padding-bottom        padding-bottom: 16px    将填充应用于底部。
.ion-padding-vertical    padding: 16px 0            在顶部和底部应用填充。
.ion-padding-horizontal    padding: 0 16px            在左侧和右侧应用填充。
.ion-no-padding            padding: 0                不向所有方面应用填充。

⑨元素填充(外边距margin)

类                        风格规则            描述
.ion-margin                margin: 16px        所有方面的外边距。
.ion-margin-top            margin-top: 16px    顶部外边距。
.ion-margin-start        margin-start: 16px    左侧外边距。
.ion-margin-end            margin-end: 16px    右侧外边距。
.ion-margin-bottom        margin-bottom: 16px    底部外边距。
.ion-margin-vertical    margin: 16px 0        在顶部和底部应用外边距。
.ion-margin-horizontal    margin: 0 16px        向左和向右应用外边距。
.ion-no-margin            margin: 0            不向所有方面申请外边距。

8.CSS变量
(1)全局变量，在src/theme/variables.scss下   

 / *为所有模式设置变量* / 
    ：root  { 
      / *设置整个应用程序的背景* / 
      --ion-background-color: #ff3700;
      / *设置整个app * /  
      --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
      / *仅为Material Design设置整个应用程序的文本颜色* / 
      .md {
        --ion-text-color: #222;
      }

(2)组件变量,要为特定组件设置CSS变量，请在其选择器内添加变量   

 / *设置所有离子按钮元素的颜色* / 
    ion-button {
      --color: #222;
    }
    / *设置在离子键与.fancy按钮类* /
    .fancy-button {
      --background: #00ff00;
    }

(3)通过JavaScript设置变量    

const el = document.querySelector('.fancy-button');
el.style.setProperty('--background', '#36454f');

(4)获取值
①使用CSS    

.fancy-button {
    --background: var(--charcoal, #36454f);
}

②使用JavaScript  

const el = document.querySelector('.fancy-button');
const color = el.style.getPropertyValue('--charcoal');

9.Color Generate、
(1)color:

    <ion-button>Default</ion-button>
    <ion-button color="primary">Primary</ion-button>
    <ion-button color="secondary">Secondary</ion-button>
    <ion-button color="tertiary">Tertiary</ion-button>
    <ion-button color="success">Success</ion-button>
    <ion-button color="warning">Warning</ion-button>
    <ion-button color="danger">Danger</ion-button>
    <ion-button color="light">Light</ion-button>
    <ion-button color="medium">Medium</ion-button>
    <ion-button color="dark">Dark</ion-button>

(2)分层颜色

名称            属性                                默认值                描述
Base            --ion-color-primary                    #3880ff                所有变化源自的主要颜色
Base (rgb)        --ion-color-primary-rgb                rgb( 56, 128, 255)    基色为红色，绿色，蓝色格式
Contrast        --ion-color-primary-contrast        #ffffff                基色的反面应该是基色可见的
Contrast (rgb)    --ion-color-primary-contrast-rgb    rgb( 255, 255, 255)    红色，绿色，蓝色格式的对比色
Shade            --ion-color-primary-shade            #3171e0                基色的浅色版本
Tint            --ion-color-primary-tint            #4c8dff                基色的略微更轻的版本

(3)要更改颜色的默认值，应设置该颜色的所有列出的变体
    

:root {
      --ion-color-secondary: #006600;
      --ion-color-secondary-rgb: 0,102,0;
      --ion-color-secondary-contrast: #ffffff;
      --ion-color-secondary-contrast-rgb: 255,255,255;
      --ion-color-secondary-shade: #005a00;
      --ion-color-secondary-tint: #1a751a;
    }

(4)添加颜色

 .ion-color-favorite {
      --ion-color-base: #69bb7b;
      --ion-color-base-rgb: 105,187,123;
      --ion-color-contrast: #ffffff;
      --ion-color-contrast-rgb: 255,255,255;
      --ion-color-shade: #5ca56c;
      --ion-color-tint: #78c288;
    }

 使用：

<ion-button color="favorite">Favorite</ion-button>

 

Alan_TW
关注
专栏目录
ION框架学习（一）
ForDream321的专栏
09-05 6496
本系列分为三章：第一章介绍：ION的框架和buffer的分配； 第二章介绍：如何使用ION buffer； 第三章介绍：以MTK平台为例来了解camera buffer的流转；   ION是google在Android4.0 为了解决内存碎片管理而引入的通用内存管理器,用来支持不同的内存分配机制，如CARVOUT(PMEM)，物理连续内存(kmalloc), 虚拟地址连续但物理不连续内存(vma
Ionic:Ionic Framework是一个开源UI工具包，用于使用HTML，CSS和JavaScript等Web技术以及与Angular，React和Vue等流行框架的集成来构建高性能，高质量的移动和桌面应用程序
03-10
离子性
Ionic框架入门教程：构建生物信息学应用
最新发布
weixin_28746213的博客
09-13 1169
本文还有配套的精品资源，点击获取 简介：本教程旨在向初学者展示如何使用Ionic框架构建跨平台的生物信息学应用sample-ionic-bio-app。Ionic是一个基于Web技术的开源框架，支持使用一套代码库创建iOS、Android及Web应用。教程涵盖从安装配置到运行调试的全过程，并介绍了如何使用Ionic的UI组件和服务API集成等核心特性。 1. Io...
ionicframework学习和使用
jasondu264的专栏
01-08 4369
我一直在找移动App的htmlUI框架，之前我有了jquerymobile+backbone，但jquerymobile很不流程，backbone也有个缺点那就是但模型发生变化时，你要自己修改界面，它只有一个监听模型变化的方法，所以操作起来很不智能，我在网上找了很多，发现了一个类似JQM的框架，在这里推荐给大家，叫做：ionicframework，网站是：http://ionicframework
Ionic Framework 教程
gitblog_00914的博客
08-13 477
Ionic Framework 教程 ionic-frameworkionic-team/ionic-framework: 是一个基于 HTML5 的移动端应用程序开发框架，它使用 Angular 和 CSS 进行开发，支持多种平台，如 Android、iOS 等。适合用于移动端应用程序开发，特别是对于那些需要使用 HTML5、Angular 和 CSS 进行跨平台应用程序开发的场景。特点是移动...
ionicframework官方例子
10-27
官方示例是学习和掌握Ionic Framework的重要资源，它们展示了框架的各种功能和最佳实践。由于官网访问可能受到网络限制，这个压缩包提供了完整的示例，确保开发者无需担心缺失的资源文件，可以直接运行和学习。 ...
Shortcut for Ionic Framework-crx插件
04-02
`Shortcut_for_Ionic_Framework.crx`文件很可能是一个为开发人员提供便捷访问Ionic Framework相关资源的Chrome浏览器扩展。这种插件通常会添加书签、快捷方式或者工具栏按钮，以便用户快速访问常用的 Ionic 开发工具...
ionicframework开发入门
07-31
2. **Ionic项目创建与构建**：使用命令行工具，通过`ionic start myApp blank`命令创建一个新的Ionic项目，其中`myApp`是项目名称，`blank`为模板名称。然后使用`cd myApp`切换到项目目录下，并通过`ionic platform ...
Ionic-Framework-Learning:大量的博客文章，文章，视频等链接，用于学习Ionic Framework
05-19
一堆链接，用于学习IonicFramework的博客文章，文章，视频等。 如果您要添加一些链接/资源，请随时提交请求请求。 另外，我尝试验证以下文章是否具有真实内容（即不是2段博客文章，信息很少），以确保我没有列出...
Web移动端混合开发--IonicFramework
行进中的Blog
11-09 2596
一：Ionic安装及使用一览图（请全屏查看） 号外！ 准备： JDK 下载地址 http://www.oracle.com/technetwork/java/javase/downloads/index.html 安装好之后环境变量配置: 新建系统变量JAVA_HOME 和CLASSPATH 变量名：JAVA_HOME 变量值：C:Program FilesJavajdk...
Ionic Framework包含React和Vue
cxu0262的博客
05-17 241
Ionic Framework是用于构建跨平台应用程序的移动UI工具包，已与Ionic Framework 4.0松开了与Angular JavaScript框架的联系。 Ionic 4.0于1月23日发布，从“面向Angular的移动”转变为面向Web开发人员的UI设计系统和应用程序框架。 该版本是使用Web Components构建的，仍可与Angular一起使用，并且是一个用于Rea...
Ionic Framework 4 介绍
weixin_30267691的博客
01-31 150
Ionic Framework 4是一个开源UI工具包，用于使用Web技术（HTML，CSS和JavaScript）构建高性能的高质量移动和桌面应用程序。Ionic Framework专注于前端用户体验，或应用程序的UI交互（控件，交互，手势，动画）。它易于学习，并与其他库或框架（如Angular）很好地集成，或者可以独立使用而无需使用简单脚本包含的前端框架。目前，Ionic Frame...
Ionic Framework 学习
weixin_33716557的博客
02-01 171
为什么80%的码农都做不了架构师？>>> ...
HTML5-ionic框架
itszt888的博客
08-18 1662
pm—–ionic框架（不常用，是基于angular的）使用时，先把css、js文件引入,写ng-app=”myApp” bundle.js里面有angular所有的东西，例如路由等1、bar-header主标题 bar-light title可使文字居中 bar-stable 颜色与上面有区别 bar-positive 颜色与上面有区别 bar-calm
Ionic –用于构建看起来本机HTML5移动应用程序的高端框架
cuken7684698822的博客
08-06 584
主流移动 框架 ionicGone are the days when developing an app took multiple days and even weeks. Today, the world of mobile app development is filled with stunning open source front-end SDKs(Software Developm...
App 开发框架 Ionic 构建应用的 5 个实用技巧
Free雅轩的博客
11-15 289
使用 Ionic，只需要设计合适的 app 图标即可，有更多的重要的事需要去做。不用担心，它的使用很简单，通过使用 Ionic CLI，只需在平台目录中放置合适的文件即可（Ionic 可与 .png, Photoshop, 和 Illustrator 格式兼容），这样就可以轻松为 iOS 和 Android 生成 app 图标和启动页界面。创作者还可以通过应用程序的想法，更容易地销售您的客户端 - 使用内置的功能，如“添加朋友”，让客户（或潜在的客户端）检查应用程序，同时仍在开发中提供其输入。
170多个Ionic Framework学习资源（转载）
weixin_33757609的博客
01-08 263
在Ionic官网找到的学习资源：http://blog.ionic.io/learning-ionic-in-your-living-room/  网上的文章比较多，但是很多时候我们很难找到自己需要的。下面这些资源覆盖面很广，看一下有没有你需要的： PS：嫌麻烦的可以直接在这里找：http://thompsonemerson.github.io/ionic-collection/    太...
【Ionic】framework框架开发跨平台App
ZhangKui-01的博客
02-24 500
直接上干货： 一，配置开发环境： 1.1 首先您需要安装Node.js，确认电脑已安装了node.js，否则请下载安装node.js; 1.2 然后通过命令行工具安装最新版本的 cordova 和 ionic：（install ionic） 安装cordova：sudo npm install -g cordova 安装ionic：s...
Ionic Framework学习资源全解析：文章、视频与社区指南
资源摘要信息:"Ionic Framework是一个强大的开源UI工具包，专门用于开发跨平台的移动...以上信息的总结展示了Ionic Framework学习资源的多样性和深度，包含了从入门到高级的各方面知识，为不同水平的开发者提供帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值