·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组件大全.doc>>

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();

}

 

效果展示：

 

  

小结：