安装
npm install ionic@3.12.0 // 安装指定版本
ionic -version
ionic info // 查看系统信息
快速开始
ionic start myApp tabs
cd myApp
ionic serve
// or 改变默认端口8100 为 8101
ionic serve -p 8101
更新报错
eg1:
Error ECONNRESET - Reload and websocket error breaks server
https://github.com/ionic-team/ionic-app-scripts/issues/1345
解决方案:
npm install @ionic/app-scripts@nightly --save-dev
安装平台 android 微信
android
ionic cordova platform ls //查看
ionic cordova platform add android //添加安装
报错
Failed to fetch platform cordova-android@~6.2.2 #2412
解决方案
https://github.com/ionic-team/ionic-cli/issues/2412
As @TomohikoTsuji stated, just use the below commands. That worked for me
npm uninstall -g cordova
npm install –g cordova@6.5.0 or npm install –g cordova@latest
ionic cordova platform add android
微信
ionic cordova platform add browser // 添加平台,生成静态文件,生成www静态目录可以部署在nigix平台
底部tabs组件编写
// tabs.html
<ion-tab [root]="tabHome" tabTitle="首页" tabIcon="list-box"></ion-tab>
// tabs.ts
import { HomePage } from '../home/home';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tabHome = HomePage;
}
快速生成文件page
ionic generate (简写g) // 选择式
ionic g page discovery // 直接生成discovery页面page
然后修改src
下的app
下的app.modules.ts
小技巧:苹果app对于接口请求要求是HTTPS
布局小技巧
- 找组件
components
- 找样式
theming
下的css-utilities
把常用的已经举例出来了,https://ionicframework.com/docs/theming/css-utilities/
- 组件会带有默认的全局
padding
属性 - 自定义
scss
文件,通过 全局import
引入 - 安卓和ios平台样式类不一样,通过类名改变不同样式
-安卓和ios通过属性来控制显示的不同
弹出浮层和关闭浮层
弹出
// moer.html
<button ion-button outline small (click)="showModal()">登录/注册</button>
// more.ts
import {LoginPage} from '../login/login';
constructor(
public modalCtrl: ModalController
) {
}
showModal() {
const modal = this.modalCtrl.create(LoginPage);
modal.present();
}
关闭
// login.html
<button ion-button (click)="dismiss()">
<span ion-text color="primary" showWhen="ios">取消</span>
<ion-icon name="md-close" showWhen="android"></ion-icon>
</button>
// login.ts
import { ViewController } from 'ionic-angular';
constructor(
public viewCtrl: ViewController
) {
}
dismiss() {
this.viewCtrl.dismiss()
}
请求封装 HTTP
ionic g provider
import {HttpClient} from '@angular/common/http';
import { Response } from '@angular/http';
import {Observable} from 'rxjs';
constructor(public http: HttpClient) {
}
private getUrlReturn(url: string): Observable<string[]>{
return this.http.get(url)
// 成功
.map(v => JSON.parse(v) || {})
// 失败
.catch(this.handerError)
}
storage
add it to the imports list in your NgModule declaration (for example, in src/app/app.module.ts):
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
]
})
export class AppModule {}
Finally, inject it into any of your components or pages:
import { Storage } from '@ionic/storage';
export class MyApp {
constructor(private storage: Storage) { }
...
// set a key/value
storage.set('name', 'Max');
// Or to get a key/value pair
storage.get('age').then((val) => {
console.log('Your age is', val);
});
}
生命周期
- ionViewDidLoad
- ionViewWillEnter
- ionViewDidEnter
页面跳转
- modal 临时、过渡的一个弹窗
- nav 用于层级关系的页面展示
导航返回键配置
https://ionicframework.com/docs/api/IonicModule/
https://ionicframework.com/docs/api/config/Config/
- forRoot(appRoot, config, deepLinkConfig)
import { IonicApp, IonicModule } from 'ionic-angular';
@NgModule({
declarations: [ MyApp ],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
backButtonText: 'Go Back',
iconMode: 'ios',
modalEnter: 'modal-slide-in',
modalLeave: 'modal-slide-out',
tabsPlacement: 'bottom',
pageTransition: 'ios-transition'
}, {}
)],
bootstrap: [IonicApp],
entryComponents: [ MyApp ],
providers: []
})
图片上传功能
照相机、文件、文件路径、传输模块的下载
npm i -S @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer
ionic cordova plugin add cordova-plugin-camera -S
ionic cordova plugin add cordova-plugin-file -S
ionic cordova plugin add cordova-plugin-file-transfer -S
ionic cordova plugin add cordova-plugin-filepath -S
--
作者:刘伟波
链接:http://www.liuweibo.cn/p/240
来源:刘伟波博客
本文原创版权属于刘伟波 ,转载请注明出处,谢谢合作
发表评论: