·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"

Ionic系统性详解

 

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

 

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

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

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

·ESlint JS的代码规范检测

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


src工作目录:

Ionic系统性详解

 

ionic创建界面及页面跳转

$ Ionic g page new 

Ionic系统性详解

系统将自动建立以下文件

Ionic系统性详解

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

1.

Ionic系统性详解

2.配置组件

Ionic系统性详解

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

Ionic系统性详解

<<ionic组件大全.doc>>

Ionic页面设计组件大全

ionic中修改背景颜色

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

并在里面写样式:

Ionic系统性详解

Ionic系统性详解

并在variables.scss中声明

Ionic系统性详解

效果图如下:

Ionic系统性详解

 

ionic对话框弹出

1引用组件Alertcontroller

Ionic系统性详解

2声明引用

Ionic系统性详解

3.写入对话框逻辑

showAlert() {

let confirm = this.alertCtrl.create({

title: '提示',

message: '确定要退出?',

buttons: [

{

text: '取消',

handler: () => {

console.log('Disagree clicked');

}

},

{

text: '确定',

handler: () => {

console.log('Agree clicked');

}

}

]

});

confirm.present();

}

 

效果展示:

Ionic系统性详解

Ionic系统性详解

 

  

小结:

 

Ionic系统性详解

 

相关文章:

  • 2021-11-23
  • 2021-10-15
  • 2021-11-02
  • 2021-06-08
  • 2021-12-10
  • 2021-11-03
  • 2021-05-26
  • 2022-12-23
猜你喜欢
  • 2021-12-31
  • 2022-01-03
  • 2021-10-02
  • 2022-12-23
  • 2021-07-08
  • 2022-12-23
相关资源
相似解决方案