Ionic系统性详解

·Ionic框架

·ionic 特点

1.ionic 基于Angular语法，简单易学。

2.ionic 是一个轻量级框架。

3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。

4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

5.ionic 专注原生，让你看不出混合应用和原生的区别

6.ionic 提供了强大的命令行工具。

7.ionic 性能优越，运行速度快。

 

·ionic 相关内容

ionic 官方网站 http://ionicframework.com/

ionic 官方网站 http://ionicframework.com/docs/

   Github 地址   https://github.com/driftyco/ionic

ionic 下载地址： http://ionicframework.com/docs/overview/#download

IthoughtsX（思维导图）下载地址： https://www.toketaware.com/ithoughts-osx/

 

环境搭建：

·问题1：邮箱问题

 解决方法：

$ git config --global user.name "yourname"

 

$ git config --global user.email "youremail"

 

注意：（引号内请输入你自己设置的名字，和你自己的邮箱）此用户名和邮箱是git提交代码时用来显示你身份和联系方式的，并不是github用户名和邮箱

 

·VSCode-icons 用于项目中文件类型显示对应的图标，提高定位效率

·VSCode-tslint 用于TS的规范检测

·Path Intellisence用于提示导入文件时的路径

·ESlint JS的代码规范检测

·Beantify 进行代码的格式自动美化

src工作目录：

 

ionic创建界面及页面跳转

$ Ionic g page new 

系统将自动建立以下文件

在APP.module中注册页面的module.ts

1.

2.配置组件

3.配置不会在模板中使用的组件

<>

Ionic页面设计组件大全

ionic中修改背景颜色

theme文件夹下建立新的.scss文件

并在里面写样式：

并在variables.scss中声明

效果图如下：

 

ionic对话框弹出

1引用组件Alertcontroller

2声明引用

3.写入对话框逻辑

showAlert() {

let confirm = this.alertCtrl.create({

title: '提示',

message: '确定要退出？',

buttons: [

{

text: '取消',

handler: () => {

console.log('Disagree clicked');

}

},

{

text: '确定',

handler: () => {

console.log('Agree clicked');

}

}

]

});

confirm.present();

}

 

效果展示：

 

  

小结：