·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中修改背景颜色
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();
}
效果展示:
小结: