本文系原創(chuàng),轉(zhuǎn)載請注明出處,謝謝 !
- 如果不知道如何創(chuàng)建ionic項(xiàng)目,請點(diǎn)擊這里
1. 正向傳值和反向傳值(附帶常見的兩種頁面跳轉(zhuǎn)方式:push 和 modal)
- 點(diǎn)擊按鈕surebtn 從 本頁面(SeatPage) 跳轉(zhuǎn)到 ConfirmPositionPage 傳參數(shù):'number'
export class SeatPage {
number;
constructor(public navCtrl: NavController,
public navParams: NavParams
) {}
}
surebtn(){
this.navCtrl.push(ConfirmPositionPage,{'number':this.number});
}}
- modal 方式跳轉(zhuǎn)
// 導(dǎo)入
import { NavController, NavParams,ModalController } from 'ionic-angular';
export class ConfirmPositionPage {
number;time
registerData:RegisterData;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private modalCtrl: ModalController, // modal的控制器
public storageService: StorageService,
public networkTool: HttpServiceTool,) {
// 接收上個(gè)頁面的參數(shù)
this.number = navParams.get('number')
}
}
select_time(){
// 創(chuàng)建要modal的頁面
let dataSelectPageModal = this.modalCtrl.create(DataSelectPage)
// dismiss 時(shí) 從 DataSelectPage 傳來的值為 data
dataSelectPageModal.onDidDismiss(data => {
console.log(data);
this.time = data;
})
// 把頁面modal出來
dataSelectPageModal.present();
}
- 在 DataSelectPage
import { NavController, NavParams ,ViewController} from 'ionic-angular';
export class DataSelectPage {
data;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private viewCtrl: ViewController
) {}
}
this.viewCtrl.dismiss(this.data)
- push方式跳轉(zhuǎn)
this.navCtrl.push(Page,
{
data: this.data,
callback: this.getData
});
getData = (data) =>
{
return new Promise((resolve, reject) => {
for (let order of orders) {
this.data = data;
}
resolve();
});
};
constructor(public navCtrl: NavController, public navParams: NavParams)
{
this.callback = this.navParams.get('callback');
this.data = this.navParams.get('data') || [];
}
sendData(event: any): void
{
this.callback(this.data).then(()=>{ this.navCtrl.pop() });
}
2. 集成二維碼掃描功能
- 安裝插件
$ ionic plugin add phonegap-plugin-barcodescanner
$ npm install --save @ionic-native/barcode-scanner
- 在 app.module.ts中導(dǎo)入
1.png
2.png
- 使用 注意:一定要用真機(jī)調(diào)試!
scan(){
this.barcodeScanner.scan().then((barcodeData) => {
if (!barcodeData.cancelled) {
alert('二維碼掃描信息:'+ barcodeData.text);
}, (err) => {
alert('err: ' + err);
});
}
3. 獲取時(shí)間,日期和星期
注意:模擬器,瀏覽器,真機(jī)上時(shí)間的顯示略有不同,請以自行打印出的為準(zhǔn)
- 效果如圖
3.png
export class ScanPage {
timer;
number;
date: string = new Date().toLocaleDateString();
time: string = new Date().toTimeString();
week: string = new Date().toDateString();
status:string = '簽到';
}
ionViewDidLoad() {
[var number = this.time.substr(0,2) ;
console.log(number);]
if(parseInt(number)>=13){
this.status = '簽退'
}else{
this.status = '簽到'
}
// 讓時(shí)間實(shí)時(shí)刷新
this.timer = setInterval(()=> {
// 每隔10秒 刷新時(shí)間
console.log('000000 更新');
this.time = (new Date().toTimeString()).substr(0,5);
}, 10000);
console.log('1111111 ionViewDidLoad');
this.week = this.week.substr(0,3);
this.time = this.time.substr(0,5);
switch(this.week){
case 'Mon': this.week = '星期一';
break;
case 'Tue': this.week = '星期二';
break;
case 'Wed': this.week = '星期三';
break;
case 'Thu': this.week = '星期四';
break;
case 'Fri': this.week = '星期五';
break;
case 'Sat': this.week = '星期六';
break;
case 'Sun': this.week = '星期日';
break;
default :break;
}
}
4. 字符串截取
// 需要截取的str : id=114B08FK3ARKE00A & room=114B08ET8LRKE007 & code=2301@101 & t=1
this.tableNumber = 'id=114B08FK3ARKE00A&room=114B08ET8LRKE007&code=2301@101&t=1'
var array = this.tableNumber.split("&",3)
this.seatuuid = array[0].split("=")[1]
this.roomuuid = array[1].split("=")[1]
this.seatcode = array[2].split("=")[1]
// 存儲(chǔ)到本地
this.storageService.write( 'seatuuid', this.seatuuid);
this.storageService.write( 'roomuuid', this.roomuuid);
this.storageService.write( 'seatcode', this.seatcode);
console.log(this.seatuuid+'...1...'+this.roomuuid+"....2..."+this.seatcode);
5. 本地存儲(chǔ)和讀取
- 使用
//存儲(chǔ)
this.storageService.write( 'seatuuid', this.seatuuid);
// 讀取
this.storageService.read('seatuuid');
- 添加工具類,如圖 (prodivers和pages同級(jí))
Snip20170425_20.png
- 本地存儲(chǔ)工具類 StorageService
import { Injectable } from '@angular/core';
@Injectable()
export class StorageService {
constructor() {}
write(key: string, value: any) {
if (value) {
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
}
read<T>(key: string): T {
let value: string = localStorage.getItem(key);
if (value && value != "undefined" && value != "null") {
return <T>JSON.parse(value);
}
return null;
}
}
使用前的導(dǎo)入同 二維碼 ,需要在 app.module.ts中導(dǎo)入
后期還會(huì)有 有關(guān)登陸,注冊,get post 請求,數(shù)據(jù)解析,熱更新,原生與ionic傳值,自定義插件 等技術(shù)點(diǎn)的文章,歡迎感興趣的同學(xué)一起溝通交流!
如有錯(cuò)誤之處,歡迎大家批評指正,謝謝 !
