GitHub地址:github.com/JerryMissTo… ,欢迎关注
最近在使用ionic做项目,遇到过一些问题,现记录下来,说不定有缘人会需要它。我们的App进入就是登录界面,登陆成功后会进入到底部有若干Tab的主界面。
Platform Version:
- ionic:3.3.0
- Cordova:7.0.1
最近更新了一篇V3.10的开发,地址是:ionic V3.10 开发踩坑集锦,假如二者有冲突,以最新的为准。
打包出来的apk启动缓慢,有白屏
使用 ionic cordova build android --prod --release 打包文件会更小,启动更迅速,亲测有效
打包出来的APK没有权限
使用Android Studio打开生成的工程,在Manifest.xml中设置权限,在我的Mac上遇到无法进行网络访问的情况,只得另外添加,但是在另一同事那儿没有这个问题,打包直接就可以进行网络访问,真是奇怪
从登录界面进入主页,按返回键可以返回至登录页
在登录成功的处理代码段中添加this.navCtrl.setRoot(TabsPage)
,其中TabsPage
是主界面。通常App打开就是登录界面,登陆后才是主界面。我们在app.component.ts
中设置了root=LoginPage
,所以一进去就是登录界面,在主界面点击返回按钮会退到登录界面,执行上述代码后重新设置Root界面就可以解决。
添加自定义字体图标
在src
目录下新建icon
文件夹,把字体文件放进去。然后在theme/variables.scss
中后面添加以下内容,注意把相应位置替换成你自己的:
$iconfont-path: "../assets/icon";
@font-face {
font-family: "iconfont";
src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046'); /* IE9*/
src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('#{$iconfont-path}/iconfont.woff?t=1495679878046') format('woff'), /* chrome, firefox */
url('#{$iconfont-path}/iconfont.ttf?t=1495679878046') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('#{$iconfont-path}/iconfont.svg?t=1495679878046#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 1.6rem;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ion-md-customer-home:before,
.ion-ios-customer-home:before,
.ion-ios-customer-home-outline:before,
.ion-md-customer-rank:before,
.ion-ios-customer-rank:before,
.ion-ios-customer-rank-outline:before,
.ion-md-customer-stock:before,
.ion-ios-customer-stock:before,
.ion-ios-customer-stock-outline:before {
@extend .iconfont;
}
.ion-md-customer-home:before { //在这里自定义你的名字,例如:customer-home,前缀也要加上,与平台相关
content: "\e60f";
}
.ion-ios-customer-home:before { //选中
content: "\e611";
}
.ion-ios-customer-home-outline:before { //未选中
content: "\e60f";
}
.ion-md-customer-rank:before {
content: "\e60d";
}
.ion-ios-customer-rank:before {
content: "\e60e";
}
.ion-ios-customer-rank-outline:before {
content: "\e60d";
}
.ion-md-customer-stock:before {
content: "\e610";
}
.ion-ios-customer-stock:before {
content: "\e612";
}
.ion-ios-customer-stock-outline:before {
content: "\e610";
}
$tabs-ios-tab-text-color-active:#f6670B; //设置点击后的颜色
$tabs-ios-tab-icon-color-active:#f6670B;
$tabs-md-tab-text-color-active:#f6670B;
$tabs-md-tab-icon-color-active:#f6670B;
然后在需要的地方,例如在tabs.html
中:
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="{{ 'TABS.TAB1_TITLE' | translate }}" tabIcon="customer-home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="{{ 'TABS.TAB2_TITLE' | translate }}" tabIcon="customer-rank"></ion-tab>
</ion-tabs>
最后,在app.scss中添加以下代码,防止图标偏上:
.tabs-ios .tab-button-icon::before {
vertical-align: middle;
}
ios平台上,界面底色可能会变黑色
使用<ion-content></ion-content>
包裹内容
国际化
使用官方推荐的ngx-translate,而不是ng2-translate。地址是:ionicframework.com/docs/develo… ionic V3是基于Angular2的,所以国际化也是沿用其方法,地址为:github.com/ngx-transla…
Token过期返回至登录页
检测到Token过期,应该跳转到登录页,重新登录,具体方法是:在需要跳转的地方,执行以下代码
this.navCtrl.setRoot(LoginComponent);
此时可能会出现底下的Tab显示的问题,隐藏它:
ngOnInit() {
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'none';
});
}
}
从含Tab的主界面进入二级界面后Tab仍然显示
在二级界面中加入如下代码:
//进入隐藏Tab
ngOnInit() {
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'none';
});
}
}
//返回至主界面显示Tab
ngOnDestroy() {
let elements = document.querySelectorAll(".tabbar");
if (elements != null) {
Object.keys(elements).map((key) => {
elements[key].style.display = 'flex';
});
}
}
ionic V3使用ECharts V3.6
cd /项目的根目录下
npm install echarts --save
然后在使用的.ts文件中导入:
import echarts from 'echarts';
事件通知
ionic V3.X 本身提供了发布-订阅风格的应用级别的事件系统Events ,使用起来简单方便,具体用法见:ionicframework.com/docs/api/ut…