由于ionic2资料较少,再加上本人跛足的英语,在学习中遇到的问题不少,故整理出来,防止今后再次入坑。
1 .no emulator images (avds) found 错误解决方案
此错误,已明确告诉缺少avd,解决办法如下:
①:执行命令行 android avd ,弹出窗口,如图,选择合适的虚拟机设备,点击 “create AVD”按钮
②: 弹出如下窗口,设置完成后点击 “OK”按钮 即可大功告成
③:注意:若在第二步的时候不能点击 ok ,可能是sdk因为缺少东西,如图,安装该插件即可。
2.解决页面跳转无法覆盖整个视窗问题
一般的我们在跳转页面时,期望的时使其覆盖整个屏幕,但是我们使用
this.navCtrl.push();的时候,如果底部或顶部有导航栏时,打开的新页面无法覆盖整个屏幕。
解决办法:
注入app类 import { App } from 'ionic-angular';
初始化 声明app类 constructor(private app:App) {}
调用 this.app,getRootNav();
this.app.getRootNav().push(new page);
3.ionic2 异步请求 GET方法
①:注入Http
import { Http } from '@angular/http';
②:控制器中引用
constructor(public http:Http){}
③:开始异步调用
this.http.get('请求地址')
.map(res => res.json())
.subscribe(data=>{处理返回的data数据},error=>{请求错误处理})
4.ionic2 异步请求post方法
①注入相关类
import { Http, Headers,RequestOptions} from '@angular/http';
②处理请求中body格式
headleAjaxBodyParam(param) {
let bodyStr = [];
for (let item in param) {
bodyStr.push(item + '=' + param[item])
}
return bodyStr.join('&');
}
③: 开始post请求
this.http.post(url, this.headleAjaxBodyParam({key:value}),options)
.subscribe((data) => {let myData = data.json();},(err) => {});
5.angular2的背景图片渲染
由于ionic2使用了angular2,在实际项目中,遇到了使用ngFor循环渲染时,同时要使用内嵌样式渲染出背景图片,书写方法如下:
<div [ngStyle]="{'background-image':'url('+ 数据变量 +')'}">div>
6.解决ionic start 错误问题
使用国内镜像cnpm,安装命令是
npm install -g cnpm
然后试一下cnpm -v看看有没有版本号出来,有则安装成功,继续执行如下命令
ionic start app --v2 --skip-npm
解释一下上面的语句,–v2表示采用Ionic2版本创建app,–skip-npm表示跳过npm installl package阶段
所以这次就不会有那个错误提示,但也没有真的完成创建,我们还需要进入app目录下,执行:
cnpm install --save
没有报错即说明成功,此时可以使用ionic serve命令,在浏览器上看看我们的app界面效果了