:按钮
2.4.12、:小图标,ionic包含许多小图标可以供我们使用
2.4.13、:里面可放多个滑动页
2.4.14、:其中的一个滑动页,包含在中
2.5、css样式标签和用法
2.5.1、floating:文字上浮,一般在文本框前的提示中用:
密码
2.5.2、clearInput="true":文本框输入内容后,后面有个叉叉,点击可以清除文字
2.5.3、clearOnEdit="true":文本输入的内容焦点离开文本框后,再次获取焦点时会清空文本内容,
一般用在密码框中
2.5.4、small:尺寸偏小的,一般用在按钮中,指定按钮类型为小按钮
2.5.5、large:尺寸偏大的,一般用于按钮
2.5.6、clear:清除样式
2.5.7、block:设为块元素
2.5.8、full:充满整个横向页面
2.5.9、bottom:在页面底部显示
2.5.10、padding:使用ionic定义的内边距
2.5.11、color="danger":使用ionic定义的颜色,除此之外还有light、secondary、dark等颜色
2.5.12、outline:大纲样式
2.5.13、round:圆角,用在按钮可以使按钮变成圆角矩形
2.6、js标签和用法
2.6.1、(click)="函数名":点击时间调用函数
2.6.2、this.navCtrl.setRoot(页面); :设置root页面
2.6.3、this.navCtrl.push(某页面); :堆栈,跳到某页面
2.6.4、this.navCtrl.pop(某页面); :出栈,弹出某页面,前提是这个页面之前已经进栈
3、第6、7天:周末休息
4、第8、9、10、11、12天
4.1、ionic标签和用法
4.1.1、#你取的一个标识名:
给某个元素一个标识,之后可以通过这个标识对这个元素做更改处理,如#userName,在js里
就能够有办法获取到。
4.1.2、:卡片
4.1.3、:卡片头
4.1.4、:卡片内容
4.1.5、:Grid的一行
4.1.6、:Grid的一列
4.1.7、:下拉刷新
4.2、css样式标签和用法
4.2.1、{{变量名}}:把变量的内容直接显示出来
4.2.2、width-xx:Grid的宽度设置,例如width-10
4.3、js标签和用法
4.3.1、(input)="函数名" :输入框里面文本内容改变会实时调用函数
4.3.2、public alertCtrl: AlertController:
定义一个变量用于代表一个类,alertCtrl只是一个自定义的名字
4.3.3、this.alertCtrl.create({
title: ' ',
message: ' ',
buttons: [' '],
})
:创建一个弹窗,把窗口弹出还需要调用.present()
4.3.4、*ngFor="let xxx of xxx":在ionic标签中使用,用于循环创建元素,相当于加强for循环
4.3.5、*ngIf="Boolean":在ionic标签中使用,if条件判断,true的时候会执行
4.3.6、
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph
:这个是switch case语句
4.4、命令
4.4.1、ionic plugin add plugin-name:安装插件
4.4.2、ionic plugin add cordova-plugin-geolocation:安装Ionic Native插件
4.4.3、ionic g provider Data:生成数据提供者
4.5、SQLite数据库连接与操作
4.5.1、ionic cordova plugin add cordova-sqlite-storage:添加SQLite插件
4.5.2、npm install --save @ionic-native/sqlite:安装
4.5.3、在app.module.ts中添加 import { SQLite } from '@ionic-native/sqlite';
4.5.4、在app.module.ts的providers:[]中加入SQLite
4.5.5、在需要用到SQLite的ts文件中加入:
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
4.5.6、在需要用到SQLite的ts文件的constructor中加入:
constructor(private sqlite: SQLite,) {}
4.6、SQLite数据库DRUD核心代码(所有代码需要添加到TypeScript类中)
4.6.1、连接,初始化
database: SQLiteObject;
ngOnInit() {
this.initDB();
}
initDB(){
this.sqlite.create({name: 'data.db',location: 'default'})
.then((db: SQLiteObject) => {
db.executeSql('create table if not exists saveQuestion(id INTEGER PRIMARY KEY AUTOINCREMENT, questionName text NOT NULL)', {})//建表
.then(() => console.log('Executed SQL'))
.catch(e => console.log(e));
this.database = db;
});
4.6.2、插入数据
//插入数据
insert(params){
//console.log(params);
//获取当前时间
var date: string = new Date().toLocaleDateString();
var time: string = new Date().toTimeString().substring(0,5);
var datetime: string = date + " " + time;
console.log(datetime);
this.database.executeSql("INSERT INTO saveQuestion (questionName,important) VALUES (?,?);",[params.questionName,params.important])
.then(() => alert('暂存成功'))
.catch(e => console.log(e));//插入数据
}
4.6.3、修改数据
//修改数据
update(params){
//console.log(params);
var date: string = new Date().toLocaleDateString();
var time: string = new Date().toTimeString().substring(0,5);
var datetime: string = date + " " + time;
console.log(datetime);
this.database.executeSql("UPDATE saveQuestion set questionName=?,important=? WHERE id=?;",[params.questionName,params.important])
.then(() => alert('修改成功'))
.catch(e => console.log(e));
}
4.6.4、删除
//删除
buttonDelete(){
this.database.executeSql("DELETE FROM saveQuestion WHERE id=?;",[放id])
.then(() => alert('删除成功'))
.catch(e => console.log(e));//删除数据
}
4.6.5、查询数据
//查询
query() {
this.database.executeSql("select * from saveQuestion",{}).then((data)=>{
if ((uName == data.rows.item(0).userName) && (userPwd == data.rows.item(0).userPassword)) {
this.navCtrl.setRoot(RootHomePage);
}
},(error)=>{
console.log('查询错误');
});
}
4.6.6、一些注意事项
4.6.6.1、数据库操作的结果都会返回到data变量接收,我们只需要把拿到的数据做处理就好了
4.6.6.2、对数据操作只要把alert()替换成{}就好了,并且操作在{}内部完成
4.6.6.3、取数据操作后的结果的方法:data.rows.item(n).字段名,n代表第几条记录,可能数
据库操作有多条数据,如data.rows.item(5).userPassword
4.7、弹出警告窗
4.7.1、在需要用到的ts文件中:
import { AlertController } from 'ionic-angular/components';
4.7.2、构造器中加入public alertCtrl: AlertController
4.7.3、使用
let alert = this.alertCtrl.create({
title: '恭喜',
message: '注册成功!',
buttons: ['确定'],
})
alert.present();
4.8、其它
4.8.1、在类中定义的全局变量可以直接在页面中通过{{变量名}}取到变量的值
4.8.2、下拉刷新
4.8.3、密码框通过点击小图标显示或隐藏密码,在文本框中添加这个:
type="{{eyeshow?'text':'password'}}",
在小图标中添加这个:
(click)="eyeshow= !eyeshow"
就能实现点击显示,再点击隐藏的功能
4.8.4、一些重要资料链接
4.8.4.1、http://www.jianshu.com/p/ca2f87cd3280
4.8.4.2、http://www.cnblogs.com/greyzeng/p/5557947.html
4.8.4.3、http://ionicframework.com/docs/storage/#set
4.8.4.4、http://blog.csdn.net/zuoyiran520081/article/details/56017320?locationNum=4&fps=1
4.8.4.5、http://blog.csdn.net/h254532699/article/details/54382123
4.8.4.6、https://www.cnblogs.com/huihuihui/p/6930412.html
4.8.4.7、http://blog.csdn.net/u012379815/article/details/51775956
4.8.4.8、http://blog.csdn.net/qq993284758/article/details/77679283
4.8.4.9、http://blog.csdn.net/u011537073/article/details/61004203
4.8.4.10、http://blog.csdn.net/li00828/article/details/78318255
4.8.4.11、http://ionicframework.com/docs/api/platform/Keyboard/
4.8.4.12、http://ionicframework.com/docs/native/keyboard/
作者:li_zean
来源:CSDN
原文:https://blog.csdn.net/li_zean/article/details/79260715